AngularJS

基于JavaScript开发的客户端应用框架；

Google的很多项目就使用了这个框架；

angular适合CRUD应用和SPA单页面网站开发。

适合频繁的前后端数据交换，不适合界面优化。

教程

AngularJS应用引导过程的3个重要点：

注入器将用于创建词应用程序的依赖注入（dependency injection）

AngularJS--PhoneCat

教程

AngularJS种子项目--angular-seed

教程

node_moduels:项目需要的npm工具包；
app/bower_components:angular的框架文件；

angular的两种测试

单元测试

使用Karma测试运行器运行它，默认的Karma文件运行它；

-karma.conf.js查看单元测试的配置； -每个运行的代码下有一个对应的单元测试代码..._test.js;

执行单元测试：

npm test

运行简单单元测试后退出；

npm run test-single-run

端对端的测试

使用Protractor端对端运行器运行端对端的测试脚本，

-可以在e2e-tests/protractor-conf.js查看端对端的测试配置； -运行e2e-tests/scenarios.js进行端对端的测试；

首先打开服务器，以便Protractor能与它互动：

npm start

运行Protractor需要先安装WebDriver：

npm run update-webdriver

web服务器环境运行起来了，WebDriver更新过了，进行端对端的测试：

npm run protractor

angularjs的特性

MVC模式
模块系统
指令系统
依赖注入
双向数据绑定

MVC模式

model:主要是数据；

view:视图，将数据显示在桌面上

controller:控制器，联系model和view；

demo:这个例子中用的angularjs是1.3.0以下的版本！

$scope的作用域

上面的例子中的name挂载到了$scope上;

controller会定义一个作用域，这个作用域就是函数的scope，scope是一个局部作用域；

rootscope是一个全局作用域，全局作用域下就是scope；

ng-controller在访问变量时，会先在指定的作用域中查找，然后向上查找，最后才到全局作用域中查找

局部作用域scope还可以向下继续分别配更小的作用域；

依赖注入

$scope形参不能被修改：angularjs规定了参数的名称，函数会根据参数的名称将依赖注入到函数中；

指令系统

ng-app:angularjs的作用域，可以写在任意地方；写在html标签中，就会让它作用域整个html页面中。

ng-controller:控制器，用于绑定数据(model)和视图(view).

双向数据绑定

MVVM:

数据->视图/视图->数据；数据改变会影响视图，视图改变会影响数据。

demo

M->V:

注意：

原生定时器setTimeout不会刷新视图，所以我们需要注入angular中提供的定时器$timeout;

还可以使用ng-click指令，改变视图；

除了ng-click其他原生的事件angular中也有；

V->M:

使用ng-model指令，在视图上绑定数据，实现改变视图时影响数据；

例子:购物金额计算

过滤器

帮助我们进行一些常用的数据操作

currency:"￥"；//格式化货币数据，默认是$;

监听器

监听相关数据的变化：

$scope.$watch(parameter,function(newValue,oldValue)[,true]);

parameter:被监听的对象,可以是变量、对象、函数；

function:回调函数；

true:第三个参数可选，表示监听的深度；如果不填，只能监听单个值，true表示监听整个对象；

newValue:改变后的值；

oldValue:改变前的值；

模块化

减小全局的污染，和命名冲突；

能让模块之间实现依赖；

在之前的demo中，函数定义在了全局的js环境下，很容易与其他函数产生冲突！

解决方法，实现模块化：

angular.module('myApp',[]);

anguler:是angularjs中的访问接口，类似于JQuery中的$;

module:是angular中的方法，用于创建模块

'myApp':是module方法的第一个参数，是当前创建的模块的名字；

[]:第二个参数是一个数组，当前模块所要依赖的其他模块；

当指定了模块后，之前在html标签中添加的ng-app指令就要去指定具体的模块名称；

ng-app='模块的名字';

对之前的demo进行模块化:demo

压缩问题

当使用工具对js代码压缩时，会改变函数的参数，比如$scope；这就违背了angularjs依赖注入的原则；

解决办法：

angular提供了一种写法，将函数改写程数组的方式:

m1.controller('fn1',['$scope',function($s){
	$s.name='hi angular'
}]);

工具方法

demo

angular.bind()

与JQuery中的$.proxy()类似：用于改变this的指向；

angular.bind(thisArg,arg);

thisArg:this的当前指向；

arg:调用的对象；如果是函数：

angular.bind(thisArg,fn,arg1)(arg1);//传参的方式有几种

angular.copy()

拷贝对象的方法：

var c=angular.copy(a,b);//b也变成了a对象，a覆盖了所有的值

angular.extend()

对象继承：

var d=angular.extend(b,a);//拥有了a的属性和b的属性

与判断相关的工具方法

angular.isArray//判断是否是数组
angular.isDate//判断是否是日期对象
angular.isDefined//判断元素是否定义
angular.isUndefined//判断是否是未定义
angular.isFunction//判断是否是Function对象（函数）
angular.isNumber
angular.isObject
angular.isString
angular.isElement//判断是否是一个元素

其他工具方法

angular.version//ng版本
angular.equals//比较两个元素是否相等（NaN和数组以及对象比较的结构都为true）
angular.forEach(value,function(value,i){})//与JQuery不同在于它首先得到的是value然后是index；
angular.fromJson（JsonObj）/toJson(str[,true])//第二参数可以将结果格式化
angular.identity/noop//第一个返回原值，第二个是一个空函数；
angular.lowercase/uppercase//大小写转换；
angular.element//相当于JQuery中的$，实现了JQuery中的部分方法；
angular.bootstrap(element,[])//angular的动态初始化，之前使用ng-app进行了angular的静态初始化；当页面中需要多次初始化操作时使用；
angular.injector//注册器

angular与JQuery的关系

首先在angular.min.js中实现了JQuery的部分方法；

.css();

angular.element==$(JQuery);//可以使用JQuery中的其他方法

$scope

局部作用域

$scope.$watch

监听变化的数据

$scope.$apply

setTimeout(function(){
	$scope.$apply(function(){//刷新视图
	//数据更新
	})
},2000);

angular.module()

模块

controller

run

chengpingping/AngularJSStudy