angularJs

AngularJS 应用组成如下：

• View(视图), 即 HTML。
• Model(模型), 当前视图中可用的数据。
• Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

1、AngularJS 表达式：写在双大括号内{{ expression }}，可以直接嵌套在HTML中。等价于：ng-bind 指令。可以包含文字、运算符和变量。（数组、对象、运算等）

如：<div ng-app="" ng-init="firstName='John';lastName='Doe'">
　　<p>姓名： {{ firstName + " " + lastName }}</p>
　　</div>

等价于：<div ng-app="" ng-init="firstName='John';lastName='Doe'">
　　　　<p>姓名： <span ng-bind="firstName+ " " + lastName"></span></p>
　　　　</div>

2、AngularJS 指令：

　　(1)前缀 ng-

如：　ng-app 指令初始化一个 AngularJS 应用程序。

　　　ng-init 指令初始化应用程序数据。

　　　ng-model 指令把元素值（input, select, textarea）绑定到应用程序。为应用程序数据提供类型验证（number、email、required）；为应用程序数据提供状态（invalid、dirty、touched、error）；为 HTML 元素提供 CSS 类；绑定 HTML 元素到 　　　HTML 表单。

　　　ng-repeat 指令：将集合中（数组中）的每个项会 克隆一次 HTML 元素。

　　　　<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  　　　　　　<p>使用 ng-repeat 来循环数组</p>
 　　　　　　 <ul>
    　　　　　　　　<li ng-repeat="x in names">
      　　　　　　　　　　{{ x }}
   　　　　　　　　 </li>
  　　　　　　</ul>
　　　　</div>

　　(2)自定义指令：使用 .directive 函数来添加自定义的指令,使用驼峰法来命名一个指令。通过：元素名、属性、类名、注释来调用，并且可以限制指令的调用方式。

如：

　　<div ng-app="myApp" ng-controller="myCtrl">
　　　　名字: <input ng-model="name">
　　　　<h1>你输入了: {{name}}</h1>

　　　　年龄: <input ng-model="age">
　　　　<h1>你输入了: {{age}}</h1>
　　</div>

<script>
　　var app = angular.module('myApp',[]);
　　app.controller('myCtrl', function($scope) {
　　　　$scope.name = "John Doe";
　　　　$scope.age = "20";
　　});
</script>

3、验证：

（1）ng-show 属性返回 true 的情况下显示；

（2）ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)；

如：

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

　　Email:

　　<input type="email" name="myAddress" ng-model="myText">

　　<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>

　　<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>

　　<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

4、作用域：

　　Scope 是一个对象（模型），可应用在视图和控制器上。在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

　　根作用域：所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

如：

<div ng-app="myApp" ng-controller="myCtrl">
　　<h1>{{carname}}</h1>
</div>
<script>

　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope) {
    　　　$scope.carname = "Volvo";
　　});

</script>

5、控制器：控制 AngularJS 应用程序的数据。ng-controller 指令定义了应用程序控制器。也可以引用外部文件中的控制器

<div ng-app="myApp" ng-controller="myCtrl">
　　名: <input type="text" ng-model="firstName"><br>
　　姓: <input type="text" ng-model="lastName"><br>
　　<br>
　　姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

应用解析：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

6、过滤器：可用于转换数据，使用一个管道字符（|）添加到表达式和指令中。

如：<p>姓名为 {{ lastName | uppercase }}</p>

7、服务：是一个函数或对象，可在你的 AngularJS 应用中使用。$location 服务，它可以返回当前页面的 URL 地址；$http服务，向服务器发送请求，应用响应服务器传送过来的数据；$timeout 服务，对应了 JS window.setTimeout 函数；$interval 服务，对应了 JS window.setInterval 函数；当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

如：

<div ng-app="myApp" ng-controller="myCtrl">
　　<p> 当前页面的url:</p>
　　<h3>{{myUrl}}</h3>
</div>

<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

<script>
　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope, $location) {    // $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。
　　　　$scope.myUrl = $location.absUrl();
　　});
</script>

<div ng-app="myApp" ng-controller="myCtrl">

　　<p>欢迎信息:</p>

　　<h1>{{myWelcome}}</h1>

</div>

<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

<script>
　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope, $http) {
　　　　$http.get("welcome.htm").then(function (response) {
　　　　　　$scope.myWelcome = response.data;
　　　　});
　　});
</script>

8、select选择框：可以使用数组或对象创建一个下拉列表选项，使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出；也可以使用ng-repeat 指令来创建下拉列表；

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

如：

<div ng-app="myApp" ng-controller="myCtrl">
　　<select ng-model="selectedName" ng-options="x for x in names">
　　</select>
</div>

或者

　　<select>
　　　　<option ng-repeat="x in names">{{x}}</option>
　　</select>
<script>

　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope) {
    　　$scope.names = ["Google", "Runoob", "Taobao"];
　　});

</script>

<div ng-app="myApp" ng-controller="myCtrl">  //使用对象作为数据源, x 为键(key), y 为值(value):

　　<select ng-model="selectedSite" ng-options="x for (x, y) in sites">  //在下拉菜单也可以不使用 key-value 对中的 key , 直接使用对象的属性：ng-options="y.brand for (x, y) in sites"
　　</select> 

　　<h1>你选择的值是: {{selectedSite}}</h1>

</div>

<script>
　　var app = angular.module('myApp', []);
　　app.controller('myCtrl', function($scope) {
　　　　$scope.sites = {
　　　　　　site01 : "Google",
　　　　　　site02 : "Runoob",
　　　　　　site03 : "Taobao"
　　　　};
　　});
</script>

9、HTML DOM：ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性；绑定应用数据。ng-show 指令根据 value 的值来显示（隐藏）HTML 元素,（ true 或 false）其中可以使用表达式来代替；ng-hide 指令用于隐藏或显示 HTML 元素；ng-click 指令定义了点击事件。

10、动画：ngAnimate 模型可以添加或移除 class 。ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。