AngularJS 零碎

html指令

1. ng-app

1.1. 定义

用于告诉 AngularJS 应用当前这个元素是根元素，所有 AngularJS 应用都必须要要一个根元素。

HTML文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。

1.2. 语法

<element ng-app="modulename">
...
 在 ng-app 根元素上的内容可以包含 AngularJS 代码
...
</element>

2. ng-controller

2.1. 定义

为应用添加控制器，在控制器中，可以编写代码、制作函数和变量，并使用 scope 对象来访问。

2.2. 语法

<element ng-repeat="expression"></element>

3. ng-repeat

3.1. 定义

用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。

3.2. 语法

<element ng-repeat="expression"></element>

/* expression 实例 */
x in records
(key, value) in myObj
x in records track by $id(x)

4. ng-model

4.1. 定义

绑定了 HTML 表单元素到 scope 变量中。如果 scope 中不存在变量, 将会创建它。

4.2. 语法

// <input>, <select>, <textarea>, 元素支持该指令
<element ng-model="name"></element>

js方法

1. angular.module()

1.1. 定义

注册模块，第一参数是模块的名字，第二个参数是这个模块所依赖的模块。

如果不依赖第二个模块也要传第二个参数，如果不传第二个模块angular是不会创建一个模块的，而是获取。

• angular.module('myApp', []);：相当于AngularJS模块的setter方法，是用来定义模块的。
• angular.module('myApp')：相当于AngularJS模块的getter方法，用来获取对模块的引用。

1.2. 语法

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", ["require1","require2",...]); 
</script>

2. controller()

2.1. 定义

主要用于增强 angular 的scope，可以用于 $scope 中对象的初始化，给 $scope 中对象增加一些行为。

2.2. 语法

1. 对象的初始化

// 创建了一个 module，myApp，然后调用 module 的 controller 方法，给 module 增加了一个 controller 构造函数
var myApp = angular.module('myApp', []);

myApp.controller('GreetingController', ['$scope', function ($scope) {
    $scope.greeting = 'Hola!';
}]);

// 在相应的 DOM 中，greeting属性做了数据绑定，可以显示在controller中的值
<div ng-controller="GreetingController">
    {{ greeting }}
</div>  

2. 给scope对象增加一些行为

myApp.controller('DoubleController', ['$scope', function($scope) {
    $scope.double = function(value) { return value * 2; };
}]);

// controller 一旦被添加到 DOM 中，该方法就可以在 template 中被调用
<div ng-controller="DoubleController">
    Two times <input ng-model="num"> equals {{ double(num) }}
</div>