AngularJS 1.x版本 大致内容记录

• 简单介绍

AngularJS诞生于2009年，后为Google所收购。

通过新的属性和表达式扩展了 HTML，可以构建一个单一页面应用程序，易学易上手。

适合表单多,模块多的项目,hybrid app,但不适合高并发的项目（dirty checking 的机制）。

• 特性

1. 基于mvc模式开发：即model数据层、controller逻辑处理层、view视图层。
2. 模块化：不同的功能逻辑可区分为不同模块（如ngRoute等模块），提高复用性，采用依赖注入的模式进行引用。
3. 指令系统：使用Angular提供的指令或者自定义指令，提高搭建应用的效率。
4. 双向数据绑定：通过改变数据来与DOM节点进行交互。
5. 依赖注入：即调用其他模块时的用法。

• 常用指令

ng-app：Angular应用程序“所有者”，根模块声明，定义了使用范围。

ng-init：  初始化变量的值，有多个变量时，中间用分号隔开，一般在controller里面初始化数据，这个很少使用。

ng-controller：视图绑定控制器，值为控制器名称。

ng-repeat：用于遍历数组，为每一项生成一份html结构进行渲染。

ng-class：元素类名声明指令，可以直接是类名也可以是对象{'className': boolean}。

ng-class-even: 类似于ng-class，作用于偶数行，配合ng-repeat使用。

ng-class-odd: 类似于ng-class，作用于奇数行，配合ng-repeat使用。

ng-hide：隐藏元素。

ng-if：移除元素。

ng-href：为a元素指定href属性。

ng-include：在应用中包含html文件。

ng-src：img元素的src属性设置。

ng-style：元素行内元素设置。

• 事件指令

ng-blur：失去焦点事件监听指令。

ng-change：元素值发生改变监听事件指令，需要配合ng-model进行使用。

ng-checked ： 元素是否被选中。

ng-click：点击事件监听指令。

ng-dbclick：双击事件监听。

ng-copy：监听copy事件。

ng-cut：监听剪切事件。

ng-focus：监听获取焦点事件。

ng-keydown：按下键盘事件。

ng-keypress：按下键盘事件。

ng-keyup：键盘松开事件。

ng-mousedown：鼠标按键按下事件。

ng-mouseup：鼠标按键松开事件。

ng-mouseenter：鼠标进入某元素事件。

ng-mouseleave：鼠标离开某元素事件。

ng-mousemove：鼠标在某元素移动事件。

ng-mouseover：鼠标在某元素上的事件。

ng-paste：粘贴事件监听。

ng-submit：表单提交事件发生时触发。

• 表单验证相关

ng-model和表单元素form两者相配合，能轻易实现表单数据验证的各项操作

1、提供状态值：

• $pristine  未被修改时为true
• $dirty 被修改过为true
• $valid 值通过验证为true
• $touched 元素被点击过为true
• $error 验证错误信息

2、为元素提供相应的类名：

• ng-empty （为空）
• ng-not-empty （不为空）
• ng-touched  （被点击）
• ng-untouched （未点击）
• ng-valid  （验证通过）
• ng-invalid （验证未通过）
• ng-dirty （已被玷污）
• ng-pending （修改过）
• ng-pristine （未被修改过）

3、常用于验证的指令：

• ng-required：是否必输
• ng-maxlength：最大长度限制
• ng-minlength：最小长度限制
• ng-pattern：正则表达式验证
• ng-show ：控制提示信息的隐藏、显示
• ng-disabled：禁用元素指令
• ng-readonly：元素只读限制
• ng-selected：指定元素select属性值

注意事项：验证表达式必需从表单name开始，否则无效；表单验证不通过可以通过myForm.email.$error.xxx得到是什么原因不通过。

• 数据绑定

ng-model：双向绑定指令，用于表单元素，如果所在的控制器作用域中没有对应的变量，则会自动声明一个。

ng-bing：单项绑定，获取变量的值，与双花括号功能差不多，但是如果当前界面为首页之类的，建议使用ng-bing而不用{{}}，避免angular启动比html加载慢时显示不友好。

ng-bing-html：绑定HTML字符串变量，移除一些危险字符之后以HTML解析的格式进行输出显示。

ng-bing-template： 使用模板内容替换元素文本内容。

• 自定义指令

使用directive()方法进行指令的自定义创建。

采用驼峰命名法给指令取名，调用的时候使用单词小写并用“-”符号隔开。

创建：

app.directive('testDirective', [function() {
    return {};  // return object
}]);

调用： 

<test-directive></test-directive>

接下来详细解析创建时需要返回的object的各个属性：

1、restrict：<string> 表明指令调用方式，有四个值：E、A、C、M，组合使用。

2、 priority：<number> 同一元素上多个指令时优先级设置，默认为0。

3、template：<string | function> 指令HTML模板，值为function时，可以接受tElement、tAttrs两个参数，分别表示指令所在的元素以及所在元素的所有属性集合，需要返回HTML模板字符串。

4、templateUrl：<string | function> 指令HTML模板文件url，值为function时，可以接受tElement、tAttrs两个参数，分别表示指令所在的元素以及所在元素的所有属性集合，需要返回HTML模板文件url。

5、replace： <boolean> 是否替换指令所在的元素。

6、transclude： 不太理解，反正不常用。

7、link：<function> 接受四个参数：

  （1）scope，与指令元素相关联的作用域；

  （2）element，当前指令对应的元素；

  （3）attrs，由当前元素的属性组成的对象；

  （4）supermanCtrl，若指令中定义有require选项，则会有supermanCtrl参数，代表控制器或者所依赖的指令的控制器。

为每个指令实例执行一遍link声明的函数，用于指令模板的事件监听添加，数据绑定的建立等，常用。

8、compile：大多数只需要使用link即可，compile感觉没什么用处。

9、controller和require：可以组合定义一些指令复用的行为，为所有指令实例所有。

10、scope： <boolean | obejct> 指令的作用域对象，false：继承不隔离；true：继承且隔离；object：不继承且隔离，通过对象中的属性来单独父控制层的数据和函数：

scope: {
    attr: '@',     // 属性单项绑定，只获取值
    attr1: '=',    // 属性双向绑定
    func: '&'      // 函数绑定
}

• 过滤器

过滤器在模板中使用 | 符合进行调用：

{{filterData | filter1: param1: param2 ... | filter2 ...}}

在控制器中，建议注入内置服务$filter进行调用：

$scope.filterData = $filter('filterName')(被过滤的数据，过滤参数1，过滤参数2， ...);

常用的内置过滤器有：

currency：货币格式转换，常用参数有人民币￥、美元$。

date： 日期格式转换，使用y M d h m s E （分别表示 年 月 日 时 分 秒 星期）自由组合进行参数配置。

filter：用于筛选数组，参数可以是字符串可以是对象，具体看数据格式。

json： json对象字符串转换，没有参数，与使用JSON.stringify()一样。

limitTo：限制数组或者字符串的长度，参数为长度。

lowercase：英文字母小写转换。

uppercase：英文字母大写转换。

number：格式化数字，比如添加千分位，保留小数位数等。

orderBy： 对数组进行排序，参数为排序字段或者返回排序字段的函数，默认正序，添加-符号为倒序。

• 自定义过滤器

// 定义了模块app之后，直接调用filter函数自定义过滤器
app.filter('filterName', function() {   // 这里可以注入各项依赖
    // 返回一个能够返回过滤后的数据的函数
    return function(filterData, param1, param2, ... ) {
        // 对数据进行所需要的各种处理
        ...
        // 最后返回过滤后的结果
        return filteredData;
    };
});

• 常用的内置服务

1、$http： 核心服务，用于读取远程服务器的数据：

$http.get('/someUrl', config: {}, params: {}).then(successCallback, errorCallback);
$http.post('/someUrl', data: {}, config: {}).then(successCallback, errorCallback);

2、$timeout：延时器服务，与原生js的setTimeout方法对应：

$timeout(function () {
    ...
}, 1000);

3、$interval：定时器服务，与原生js的setTimeout方法对应：

$scope.timer = $interval( function(){
    $scope.backup("1");
}, 10000, 3); // 第三个参数代表第几次停止，不添加则一直重复

// 终止定时器
$interval.cancel($scope.timer);

4、$filter：过滤器调用服务。

5、$location： 对应window对象的location属性：

// 获取当前完整的url路径
$location.absUrl();

// 获取当前url路径（#后面的内容）
$location.url();

// 修改url的子路径（#后面内容）
$location.url('修改替换内容');

6、$watch：变量监听：

// watchExpression: 监听的对象，它可以是angular的一个表达式如'name'，或函数如function () { return $scope.name }。
// listener: 当watchExpression变化时，会被调用的函数。它有3个参数：newValue（新值），oldValue（旧值），scope（作用域的引用）。
// objectEquality: 是否深度监听。若为true，它告诉angular检查所监控的对象中每一个属性的变化。若你希望监控数组的个别元素、或对象的属性等，应用'true'。

$scope.$watch(watchExpression,listener,objectEquality);

//$watch将导致性能问题，$watch如果不再使用，最好将其注销。
// $watch会返回一个函数，这个函数可以用来注销监听，只需要被调用一次即可：

var destroy = $scope.$watch(...);

destroy();

7、$q：promise承诺服务：

8、$log：控制台信息打印：

$log.log('打印信息');
$log.info('普通信息');
$log.warn('警告信息');
$log.error('错误信息');
$log.debug('调试信息');

9、$broadcast、$emit、$on：广播服务，$broadcast用于向子控制器包括自己进行广播通知，$emit用于向父控制器包括自己进行广播通知，$on用于监听接受广播。

• 自定义服务

系统内置的服务都是以$开头，所以我们的自定义服务尽量避免以$开头。

自定义服务的三个方法：provider、factory、service。

1、provider：通过provider方法创建的服务一定要包含$get方法，provider注入的结果就是$get方法返回的结果，如果不包含$get方法，则程序会报错。只有使用provider方法创建的服务才可以传进config函数，而且在注入config函数中时，参数名必须由服务名+Provider组成。

app.provider('myProvider', function () {
    this.$get = function () {
            //do somthing
    };
});

2、factory：通过factory方法创建的服务必须有返回值，即必须有return函数，它可以返回任意类型的值，包括基本数据类型或者对象类型。如果没有return函数，则会报错。factory注入的结果就是return返回的结果，可以在被注入的对象中使用注入的结果定义的各种方法。

app.factory('myFactory', function ($http) {
    //不一定是要对象类型，实际为任意类型
    var factory = {};
    return factory;
});

 3、service：通过service方法创建的服务，可以不用返回任何值，因为service方法本身返回一个构造器，系统会用new关键字来创建一个对象，所以我们可以在service内部使用this关键字，对service进行扩展。

app.service('myService', function () {
    this._name = ''; 
    this.getName = function () {
        return this._name;
    }; 
    this.setName = function (name) {
        this._name = name;
    };
});

ps：如果需要设置一些全局变量或者一些公用的数据，可以通过创建服务进行维护。 

• 常见的全局函数

angular.bootstrap(element, [modules], [config])：手动启动Angular应用，element元素，modules模块名称，config配置项，很少使用。

angular.$$lowercase(): 小写转换，返回转换值。

angular.$$uppercase()：大写转换，返回转换值。

 angular.copy(source, [destination])：深拷贝，destination为赋值对象，省略会创建一个与source一样的对象返回。

angular.extend({}, object1, object2)：扩展对象属性，第一个参数为目标。

angular.forEach()：遍历数组。

angular.fromJson()	反序列化 JSON 字符串
angular.toJson()	序列化 JSON 字符串

angular.isArray()	如果引用的是数组返回 true
angular.isDate()	如果引用的是日期返回 true
angular.isDefined()	如果引用的已定义返回 true
angular.isElement()	如果引用的是 DOM 元素返回 true
angular.isFunction()	如果引用的是函数返回 true
angular.isNumber()	如果引用的是数字返回 true
angular.isObject()	如果引用的是对象返回 true
angular.isString()	如果引用的是字符串返回 true
angular.isUndefined()	如果引用的未定义返回 true
angular.equals()	如果两个对象相等返回 true

• 简单创建AngularJs单页面应用程序

1、在项目根目录上创建SPA的宿主界面：index.html

2、在index.html中使用script标签引入angularjs，建议放在 <body> 元素的底部进行引入，这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

3、在index.html引入angularjs的下面使用script标签编写或者引入一个js文件，创建根模块：

var app = angular.module("app",[]);

4、在index.html中的html元素或者body元素（也可以在body元素中声明一个元素作为根模块“所有者”），添加ng-app指令，声明根模块的作用域：

<body ng-app="app"></body>

5、在浏览器打开index.html，就会自动启动angular应用程序了，此时可以使用一些常用的UI框架的路由，创建一些子目录进行页面跳转等业务逻辑的开发，也可以依赖注入ngRoute模块进行路由的配置等。