AngularJS

AngularJS四大特征

MVC模式
双向绑定
依赖注入
模块化设计

AngularJS 表达式

AngularJS 表达式写在双大括号内{{expression }}，可以包含文字、运算符和变量

AngularJS 指令

最常用的指令有

ng-app定义应用程序的根元素
ng-click定义元素被点击时的行为
ng-controller定义应用的控制器对象
ng-if如果条件为false移除HTML元素
ng-init定义应用的初始化值
ng-model绑定HTML控制器的值到应用数据
ng-repeat定义集合中每项数据的模板

ng-model 指令

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app=angular.module('myApp',[]);
            app.controller('myController',function($scope){
                $scope.name="张三";
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        我叫：<input ng-model="name" />
    </body>
</html>

双向绑定，在修改输入域的值时，AngularJS表达式中属性的值也将改变

<body ng-app="myApp" ng-controller="myController">
        我叫：<input ng-model="name" />
        <h1>你叫：{{name}}</h1>
</body>

AngularJS Scope(作用域)

AngularJS MVC模式中scope是模型

Model(模型):数据,其实就是 angular 变量($scope.XX);
View(视图): 数据的呈现,Html+Directive(指令);
Controller(控制器):操作数据,就是 function,数据的增删改查;

scope是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递。scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS 过滤器

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写

自定义过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app=angular.module('myApp',[]);
            app.controller('myController',function($scope){
                $scope.msg = "好好休息天天向上"
            });
            app.filter('reverse',function(){
                return function(text){
                    return text.split("").reverse().join("");
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <input ng-model="msg" />
        反转: {{msg | reverse}}
    </body>
</html>

AngularJS 服务(Service)

$location 服务

获取当前完整的url路径 $location.absUrl()
获取当前url的参数的序列化json对象 $location.search()
获取当前url路径(当前url#后面的全部内容) $location.url()
获取当前url的子路径(也就是当前url#后面的内容,不包括参数) $location.path()

$http 服务

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myController', function($scope, $http) {
                $http.get("http://www.runoob.com/try/angularjs/data/sites.php").then(function(response) {
                    $scope.names = response.data.sites;
                });
            });
        </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myController">
            <ul>
                <li ng-repeat="x in names">
                    {{ x.Name + ', ' + x.Country }}
                </li>
            </ul>
        </div>
    </body>
</html>

AngularJS Select(选择框)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myController', function($scope) {
                $scope.names = ["百度", "腾讯", "阿里巴巴", "网易" ,"京东"];
            });
        </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myController">
            超级品牌：<select ng-model="selectedName" ng-options="x for x in names"></select>
        </div>
    </body>
</html>

AngularJS 表格

<body ng-app="myApp" ng-controller="myController">
    <table border="1">
      <tr ng-repeat="x in names">
        <td>{{ x}}</td>
      </tr>
    </table>
</body>

显示序号 ($index)

<body ng-app="myApp" ng-controller="myController">
    <table border="1">
      <tr ng-repeat="x in names">
        <td>{{$index}}</td>
        <td>{{x}}</td>
      </tr>
    </table>
</body>

AngularJS 模块

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

//base.js
var app = angular.module('myApp', []);

//myController.js
app.controller('myController', function($scope) {
    $scope.names = ["百度", "腾讯", "阿里", "网易" ,"京东"];
});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script src="js/base.js"></script>
        <script src="js/myController.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <table border="1">
          <tr ng-repeat="x in names">
            <td>{{$index}}</td>
            <td>{{x}}</td>
          </tr>
        </table>
    </body>
</html>

Angular简单总结的更多相关文章

Angular简单应用剖析
这一篇我们将一起感受学习一个小型的.活生生的应用,而不是继续深入分析哪些单个的特性.我们将会一起感受一下,前面所讨论过的所有片段如何才能真正的组合在一起,形成一个真实的.可以运行的应用. GutHub ...
Angular 简单的Get
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
Angular 简单的Post
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
Angular.的简单运用
从script引用angular文件.开始编写angular事件: 在angular文件中添加属性: ag-xxxx;初始化使用: ng-app="name"; 没有这个属性就不会 ...
MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
vue和angular的区别：
相同: 1.数据绑定:vue和angular绑定都可以用{{}} 2.都支持内置指令和自定义指令 3.都支持内置过滤器和自定义过滤器. 区别: 1.学习成本和API 设计:vue相比于angular来 ...
vue，react，angular
一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库. Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...
vue，angular，react框架对比
转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Mod ...
vue.js和angular.js的区别
关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态 ...

随机推荐

如何获得ImageView中的图像
我们知道在Android中ImageView是一个用于显示图像的控件,比如在很多联系人方面的应用中,需要为联系人拍摄头像,并将得到的头像放在一个 ImageView对象中显示.通常,在没有为联系人拍摄 ...
javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/el/ELResolver错误解决办法
今天不用eclipse.myeclipse等开发工具,纯手写JSP页面(有点作死)时突然出现以前从来没遇到过的问题,报错如下: HTTP Status 500 - java.lang.NoClassD ...
Python类三种方法，函数传参，类与实例变量(一)
1 Python的函数传递: 首先所有的变量都可以理解为内存中一个对象的'引用' a = 1 def func(a): a = 2 func(a) print(a) # 1 a = 1 def fun ...
IEEP-网络设计
IEEP-网络设计网络设计概述网络设计概述 1.负责把网络规划阶段获得的客户需求运用技术手段予以规范化体现 2.网络设计一般遵循模块化指导方针,分模块进行设计 3.网络设计的输出成果必须是规范的. ...
spring-4.3.16+xfire-spring-1.2.6版本升级
最近爆了个spring的漏洞,然后公司整体要求升级spring到最新版本,然后搞四了一大批猿人. spring-4.*的最新版本是4.3.16(稳定版) xfire-spring-1.2.6(最新版- ...
如何使用Putty登录安装在VirtualBox里的ubuntu
我是在Windows操作系统里用VirtualBox安装了ubuntu操作系统. 在VirtualBox里操作ubuntu的终端不是很方便,比如我想在Windows里复制一些命令到ubuntu的终端执 ...
ubuntu16.4安装最新版wine3.0
1.主体大致过程 $ wget https://dl.winehq.org/wine/source/3.0/wine-3.0.tar.xz $ tar -xvf wine-3.0.tar.xz $ c ...
IOS 播放视频（MPMoviePlayerController、MPMoviePlayerViewController）
● iOS提供了叫做MPMoviePlayerController.MPMoviePlayerViewController的两个类,可以用来轻松播放视频 ➢ YouTobe就是用MPMoviePl ...
Android（java）学习笔记5：线程的生命周期
1. 我们学习线程本质就是学习如何开始线程和终止线程.下面这个关于线程的生命周期图,要牢记: 新建状态:当程序使用new关键字创建了一个线程之后,该线程就处于新建状态.此时和其他Java对象一样,它仅 ...
Android（java）学习笔记45：深入分析Java ClassLoader原理
1. 前言: Android中的动态加载机制能更好的优化我们的应用,同时实现动态的更新,这就便于我们管理我们的应用,通过插件化来减轻我们的内存以及CPU消耗,在不发布新版本的情况下能更新某些模块. 当 ...

Angular简单总结