AngularJS浅析

概念

AngularJS is a structural framework for dynamic web apps.

了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm

Directive

扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间，-后面的部分都是Directive。常用的如：ng-app，ng-cotroller，ng-repeat，ng-model，ng-click等等。

另外，还有一些关于表单验证的directive，如input[email]，input[url]等。

scope

为把model里的data暴露给view，我们需要将$scope对象传给controller。$scope是controller与view之间的纽带。而ng-controller能够负责的dom范围，就是controller中$scope的有效区域（正确传递数据，传递正确的数据）。

service

services都是单例的（不知可否参考设计模式中的单例模式去理解），angular中的service有：$location，route，$http等。

当一个app中有一堆controller，其中一些controller实现类似的逻辑（如一个查询功能：发送服务器请求－解析服务器返回的内容存入对象－将对象添加到$scope以显示到view），这时我们就可以定义一个那些controller共用的service，这样做的好处是：1、可以在controller中共享它们，从而减少重复的代码，方便阅读；2、需要的话，多个controller之间能够进行交流，分享状态…

三种方式去创建一个service：

• Services

语法: module.service( ‘serviceName’, function );

用法：不可配置，内部通过new实例化对象，给this添加属性，然后返回this。

• Factories

语法: module.factory( ‘factoryName’, function );

用法：不可配置，内部直接创建一个对象，为它添加属性，然后返回这个对象。

• Providers

语法: module.provider( ‘providerName’, function );

用法：可配置，内部通过$get方法返回一个实例对象。

备注：controller使用serviceName／factoryName／providerName作为参数，通过angular的依赖注入特性获取结果。

filter

声明data被显示给用户的格式，语法：

 {{ expression | filterName : parameter1 : ...parameterN }}

如{{12.9 | currency | number:0 }}显示为$13。常用的filter还有json，lowercase，orderBy等等。

filtername也可以是自定义的处理数据（转化格式）方法的方法名。

优势

angularjs扩展了html，缓解了编写ajax应用的痛苦。

MVC

Model包含app当前状态的数据，用对象来定义如：

var someText = ''; 

View显示数据，在dom中这样展示：``

Controller用来关联M和V，使用$scope对象来传递／操作Model，创建方法如下：

function TextController($scope) { $scope.someText = someText; }

MVC中，焦点应该被放在Model上：应该定义怎样的对象？怎样从服务器接收和保存对象？等等，花些时间考虑这些问题。

数据绑定

利用数据绑定特性，以非常精短的代码，在操作数据的同时实现页面的自动局部刷新。

如下的例子中，当点击button，items数组的对应位置（index）首先被删除，由于div的数量由items决定（ng-repeat），因此当对数组items的删除操作完成时，dom也随之刷新。

1. <divng-repeat='item in items'>
2. <span>{{item.title}}</span>
3. <inputng-model='item.quantity'>
4. <span>{{item.price | currency}}</span>
5. <span>{{item.price * item.quantity | currency}}</span>
6. <buttonng-click="remove($index)">Remove</button>
7. </div>

 

1.  

1. functionCartController($scope){
2. $scope.items =[{
3. title:'Paint pots',
4. quantity:8,
5. price:3.95
6. },{
7. title:'Polka dots',
8. quantity:17,
9. price:12.95
10. },{
11. title:'Pebbles',
12. quantity:5,
13. price:6.95
14. }];
15. $scope.remove =function(index){
16. $scope.items.splice(index,1);
17. }
18. }

 

依赖注入

angular要求我们遵循编码规则，按照规定去写代码，使用规定的参数名，这样来自动获取需要的内容。

比如controller中通过serviceName来获取service的返回值。

了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm