angular学习笔记

angular framework 知识点 开发执行 

angularJS 紧要 要求明白上边多少个基本点 进行普通的支付是不曾难点的

 

首先个:驾驭 angularjs 中的数据绑定

其次个:通晓angularjs 的模块和模块的加载机制

其五个:知道 angularjs中的成效域 $scope

第两个:精通 angularjs 中的控制器

第八个:熟稔 angularjs中的过滤器,表明式

第七个:驾驭angularjs中的指令包含 内置指令
和自定义的吩咐中的10来个参数的意思

第两个:领悟angularjs中的视图和路由

第七个:掌握angularjs中的看重注入

第九个:驾驭angularjs中的服务 包蕴驾驭一些置于的劳动和 自定义的劳动

第十个:精晓angularjs中的事件

 

设若想用angularjs举办支付至少都亟需了解上边的10点 仍旧有点多的
,angularjs 前边还有一部分地点化 安全性,测试,缓存一些技术
,假若是初专家我其实并不提出一上来就学习 angularjs
可以先看有些概括的MVC框架 例如 backbone.js

  

实在
angularjs个人驾驭是把java的那套东东搬到前者来了,以后那种angularjs的品种应该是做一些里头系统相比多,因为和java一样方便搭积木。

上边我们就来分别说一说angularjs中的那10点

 

先是点: 领悟 angularjs 中的数据绑定

 

数码绑定这一个东西 最早我接触到的是从asp.net开首的分外时候的asp.net
网页每一个VIEW 其实都一定于一个模板,当时那样做就是梦想
控制器逻辑和页面分离开来,那样不会显得整个工程乌烟瘴气 ,到新兴
jquery的兴起,也有局地很理想的前端模板早先产出 例如jquery-templ
那几个根据jquery的模板插件,如若您做过部分
后端的前端开发的化应该连忙可以精通 angularjs 中的数据绑定

 

HTML (VIEW) JS(controller)

[javascript] view
plain
 copy

 

  1. <div ng-controller=”MyController”>  
  2.          <span style=”white-space:pre”>   </span><h1>来自controller scope My:{{name}}</h1>  
  3.  </div>  
  4. <h1>来自 rootscope {{name}}</h1>  

[javascript] view
plain
 copy

AngularJS, 

  1. testapp.controller(‘MyController’,function($scope, $parse){  
  2.    $scope.name = “ARI”;  
  3.   });  

 

运作后的功能

AngularJS 1

 

实则那里就是一个简约的 数据绑定 当本人任性修改 controller 中name
的值的时候  相应的视图中的 突显也会变动

 

第一个:了解angularjs 的模块和模块的加载机制

 

领悟java的同窗 都知道 java 中有不少的 包 不一致的包
有着不同的职能,因为javascript中的一些不好的东西
,也不叫不佳,就是在相似的情状下有些不便民的东西例如全局命名空间,angularjs
中的模块 可以保障命名空间的清新,可以从五个地点复用大家的模块代码

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’, []);  
  2. //那就是 angular 中定义模块的 格局  
  3. 那些方法接受七个参数,第三个是名字name,这里 name = myAPP 第四个参数是一个数组,那一个里面存放的是其他模块的名字myApp那几个模块 器重那么些模块</span>  

那么难题来了 那些模块应该怎么加载呢,他们之间顺次生成有标题吧?
那里就关乎到angularjs 中的模块加载机制

大家先看一个小例子了然一下 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>function SomeClass(greeter) {  
  2. this.greeter = greeter;  
  3. }  
  4. SomeClass.prototype.greetName = function(name) {  
  5. this.greeter.greet(name);  
  6. };</span>  

SomeClass可以在运转时访问到内部的greeter,但它并不保护怎么着收获对greeter的引用。
为了得到对greeter实例的引用,SomeClass的创设者会负责社团其借助关系并传递进入。

angularjs 通过一个 $injector 的一个零件
来去已毕各个状态下模块的看重性和注入

 

上边大家来简单看一下 angularjs 的 $injector api

先是个点子 annotate()

annotate()方法的再次回到值是一个由劳务名称组成的数组,那么些服务会在实例化时被注入到目
标函数中。annotate()方法可以扶持$injector判断哪些服务会在函数被调用时注入进来。
annotate()方法可以接受一个参

 

参数fn可以是一个函数,也得以是一个数组。annotate()方法重临一个数组,数组成分的
值是在调用时被注入到对象函数中的服务的名目。

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>var injector = angular.injector([‘ng’, ‘myApp’]);  
  2. injector.annotate(function($q, greeter) {});  
  3. // [‘$q’, ‘greeter’]</span>  

第二个 get() 方法

get()方法再次来到一个服务的实例,可以接受一个参数

参数name是想要获取的实例的名目

get()依据名称再次来到服务的一个实例

 

其三个方法 has()

has()方法重返一个布尔值,在$injector可以从友好的注册列表中找到相应的劳务时回来
true,否则再次来到false。它能经受一个参数:

参数name是大家想在注入器的挂号列表中询问的劳动名称

 

第七个主意 instantiate()

instantiate()方法可以创设某个JavaScript类型的实例。它会经过new操作符调用构造函数,
并将具有参数都传送给构造函数。它可以承受五个参数:

 

type(函数) locals(对象,可选)

instantiate()方法重回Type的一个新实例

 

首个情势 invoke()

invoke()方法会调用方法并从$injector中添加方法参数。
invoke()方法接受多个参数。
fn(function)
以此函数就是要调用的函数。这几个函数的参数由函数声明设置。
self (object-可选)
self参数允许大家设置调用方法的this参数。
locals (object-可选)
其一可选参数提供另一种办法在函数被调用时传递参数名给该函数。
invoke()方法重回fn函数再次回到的值

 

地方介绍的 都是文档里面描述的 我们只要精晓一下就行了

 

其三点 angularjs 中的效率域

 

率先应用的成效域是和利用的数据模型相关联的,同时功效域也是表明式执行的上下文。$scope
目标是概念应用工作逻辑、控制器方法和视图属性的地点

 

成效域是视图和控制器之间的胶水。在利用将视图渲染并呈献给用户此前,视图中的模板会
和作用域举行一连,然后使用会对DOM举行安装以便将质量变化文告给AngularJS

 

功效域是行使状态的基本功。基于动态绑定,大家得以凭借视图在修改数据时立刻更新$scope,
也足以借助$scope在其爆发变化时立即重新渲染视图

 

AngularJS将$scope设计成和DOM类似的社团,由此$scope可以拓展嵌套,也就是说大家可
以引用父级$scope中的属性

 

功用域有以下的基本成效:

 

提供观望者以监视数据模型的变迁;

可以将数据模型的转移文告给所有应用,甚至是系统外的组件;

可以举行嵌套,隔离业务作用和数据;

给表明式提供运算时所需的执行环境。

 

$scope 的生命周期:

 

创建

在创造控制器或指令时,AngularJS会用$injector成立一个新的成效域,并在那么些新建的控
制器或指令运行时将作用域传递进入。

 

链接

当Angular伊始运行时,所有的$scope对象都会增大恐怕链接到视图中。所有缔造$scope对
象的函数也会将本身附加到视图中。那一个功用域将会登记当Angular应用上下文中暴发变化时需
要运行的函数。

 

更新

当事件循环运行时,它一般执行在顶层$scope对象上(被称作$rootScope),逐个子功能域
都实施自身的脏值检测。逐个监控函数都会检讨变化。假诺检测到自由变化,$scope对象就会触
发指定的回调函数。

 

销毁

当一个$scope在视图中不再需要时,那些成效域将会清理和销毁自身。
即便永远不会需求清理功效域(因为Angular会为你处理),可是知道是何人创设了这些成效域
要么有效的,因为您能够运用那一个$scope上称为$destory()的章程来清理这些功用域。

 

第两个:了然 angularjs 中的控制器

 

控制器在AngularJS中的成效是增强视图

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>var app = angular.module(‘app’, []);  
  2. app.controller(‘FirstController’, function($scope) {  
  3. $scope.message = “hello”;  
  4. });</span>  

规划卓绝的应用会将复杂的逻辑放到指令和服务中。通过选拔指令和劳务,咱们可以将决定
爱慕构成一个轻量且更易维护的格局:

 

第七个:熟知 angularjs中的过滤器,表明式

 

表明式在AngularJS应用中被周边选取,因而深切领悟AngularJS怎么着行使并运算表明式是非
常首要的。
面前早已见过使用表明式的示范。用{{
}}符号将一个变量绑定到$scope上的写法本质上就
是一个表达式:{{ expression
}}。当用$watch举行监听时,AngularJS会对表达式或函数举行
运算。
表明式和eval(javascript)格外相似,不过由于表明式由AngularJS来处理,它们有以下显
著区其他天性:
       
所有的表明式都在其所属的效率域内部推行,并有访问当地$scope的权杖;
        要是表明式暴发了TypeError和ReferenceError并不会抛出尤其;
       不一样意利用此外流程控制效果(条件决定,例如if/eles);
       可以承受过滤器和过滤器链。
     
 对表明式举行的此外操作,都会在其所属的成效域内部实施,因而可以在表明式内部调用那
         
 些限制在此效能域内的变量,并拓展巡回、函数调用、将变量应用到数学表达式中等操作。

 

过滤器用来格式化要求出示给用户的多寡。AngularJS有诸多实用的嵌入过滤器,同时也提
供了福利的路径得以友善创办过滤器。

 

过滤器本质上是一个会把我们输入的剧情作为参数传入进去的函数。下边这些例子中,大家
在调用过滤器时简短地把input当作字符串来处理。

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp.filters’, [])  
  2. .filter(‘capitalize’, function() {  
  3. return function(input) {  
  4. // input是我们传入的字符串  
  5. if (input) {  
  6. return input[0].toUpperCase() + input.slice(1);  
  7. }  
  8. });</span>  

第一个:了解angularjs中的指令

 

个人认为 要搞领会指令 把那些 弄透就成功了

第多少个:了然angularjs中的指令

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’, [])  
  2. .directive(‘myDirective’, function() {  
  3. return {  
  4. restrict: String,  
  5. priority: Number,  
  6. terminal: Boolean,  
  7. template: String or Template Function:  
  8. function(tElement, tAttrs) (…},  
  9. templateUrl: String,  
  10. replace: Boolean or String,  
  11. scope: Boolean or Object,  
  12. transclude: Boolean,  
  13. controller: String or  
  14. function(scope, element, attrs, transclude, otherInjectables) { … },  
  15. controllerAs: String,  
  16. require: String,  
  17. link: function(scope, iElement, iAttrs) { … },  
  18. compile: // 重回一个对象或一而再函数,如下所示:  
  19. function(tElement, tAttrs, transclude) {  
  20. return {  
  21. pre: function(scope, iElement, iAttrs, controller) { … },  
  22. post: function(scope, iElement, iAttrs, controller) { … }  
  23. }  
  24. // 或者  
  25. return function postLink(…) { … }  
  26.              }  
  27.         };  
  28. });</span>  

当然 还忘记了一些  angularjs 中还有很多内置的指令 那个也非得询问一下

点  这里  能够查看详细的
内置 指令文档 里面讲的很了然

 

好久没更新了 来 大家继续!

 

下边大家来挨家挨户介绍一下 

第一个 :restrict

他限制directive为指定的扬言形式 可以因此两种格局展开宣示

E: element A:attribute C:class  M: anotation

默许是经过 属性的章程 

priority : 优先级

当有多个directive定义在同一个DOM成分时,有时须求显明它们的施行顺序。那属性用于在directive的compile
function调用从前进行排序。如果优先级相同,则实施各样是不确定的(经初始试验,优先级高的先进行,同级时听从类似栈的“后绑定先举行”。

terminal :

 若是设置为”true”,则象征方今的priority将会变成最后一组举办的directive。任何directive与当下的优先级相同的话,他们依旧会举行,但顺序是不确定的(固然各类不确定,但大约与priority的各样一致。当前优先级执行完成后,更低优先级的将不会再进行)。

template:

假定replace
为true,则将模版内容替换当前的HTML成分,并将原先成分的习性、class一并搬迁;如果为false,则将模版成分当作当前成分的子成分处理。

一个得以承受七个参数的函数,参数为tElement和tAttrs,并赶回一个意味着模板的字符串。tElement和tAttrs中的t代表template,是绝对于instance的。

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”> angular.module(‘app’,[])  
  2.     .directive(‘myDirective’, function () {  
  3.             return {   
  4.                 restrict: ‘E’,   
  5.                 template: ‘<a href=”http://www.baidu.com"&gt;百度&lt;/a&gt;’   
  6.             };  
  7.         })</span>  

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>  HtmlCode:  
  2.  <my-directive></my-directive></span>  

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘app’,[])  
  2.     .directive(‘myDirective’, function () {  
  3.             return {   
  4.                 restrict: ‘EAC’,   
  5.                 template: function (elem, attr) {  
  6.                     return “<a href='” + attr.value + “‘>” + attr.text + “</a>”;  
  7.                 }  
  8.         };  
  9.     })  
  10. </span>  

 

templateUrl:

与template基本一致,但模版通过点名的url举办加载。因为模版加载是异步的,所以compilation、linking都会搁浅,等待加载已毕后再举行。

replace:

万一设置为true,那么模版将会交替当前元素,而不是当做子成分添加到当前因素中。

scope:

 scope参数是可选的,可以被设置为true或一个对象。默许值是false。

 scope:false
 此时,directive没有独立的scope对象,link函数中援引的scope对象来自于如今节点的默许controller

 scope:true
 此时,directive拥有独立的scope对象,此scope是由父scope对象继承而来,可以访问父scope中的所有属性,此时实际上是经过持续链接(prototype链)访问的父scope中的属性,要专注的是,当给此scope继承而来的性质名称赋值的时候,子scope中会相应建立一个本土属性,此时变动的是本scope的变量属性,父scope中的属性是不会变动的。

下边 我们的话说 directive 与scope 的 隔离交互

AngularJS 的 directive 默许能共享父 scope
中定义的性质,例如在模板中间接动用父 scope
中的对象和天性。经常选拔那种直白共享的法子可以兑现部分简易的 directive
成效。当你必要成立一个可重复使用的 directive,只是有时候需求拜访仍旧涂改父
scope 的多寡,就须要动用隔离 scope。当使用隔离 scope 的时候,directive
会创造一个并未依赖父 scope 的 scope,并提供一些做客父 scope 的艺术。

 当您想要写一个可重复使用的 directive,无法再依靠父
scope,那时候就必要运用隔离 scope 代替。共享 scope 可以直接共享父
scope,而隔离 scope 无法共享父scope。下图解释共享 scope 和隔断 scope
的分别:

 AngularJS 2

利用共享 scope 的时候,可以一向从父 scope
中共享属性。由此上边示例可以将那么属性的值输出出来。使用的是父 scope
中定义的值。

 

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>app.controller(“myController”, function ($scope) {  
  2.     $scope.name = “hello world”;  
  3.     }).directive(“shareDirective”, function () {  
  4.     return {  
  5.             template: ‘Say:{{name}}’  
  6.     }  
  7. });</span>  

 

 

[html] view
plain
 copy

 

  1. <span style=”color:#330033;”><div ng-controller=”myController”>  
  2. <div share-directive=””></div>  
  3. </div></span>  

结果输出 hello world

 

选拔隔离 scope 的时候,无法从父 scope 中共享属性。因而下边示例不只怕输出父
scope 中定义的 name 属性值。

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>app.controller(“myController”, function ($scope) {  
  2.     $scope.name = “hello world”;  
  3. }).directive(“isolatedDirective”, function () {  
  4.         return {  
  5.             scope: {},  
  6.             template: ‘Say:{{name}}’  
  7.         }  
  8. });</span>  

[html] view
plain
 copy

 

  1. <span style=”color:#330033;”><div ng-controller=”myController”>  
  2. <div isolated-directive=””></div>  
  3. </div></span>  

出口结果 say:

 

从地点看出共享 scope 允许从父 scope 渗入到 directive 中,而隔离 scope
不大概,在切断 scope 下,给 directive 创制了一堵墙,使得父 scope
不能渗入到 directive 中。

在 Directive 中开创隔离 scope 很简单,只要求定义一个 scope
属性即可,那样,这几个 directive 的 scope 将会创建一个新的 scope,固然多少个directive 定义在同一个因素上,只会成立一个新的 scope。

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘app’).controller(“myController”, function ($scope) {  
  2.     $scope.user = {  
  3.             id:1,  
  4.             name:”hello world”  
  5.     };  
  6. }).directive(‘isolatedScope’, function () {  
  7.     return {  
  8.         scope: {},  
  9.         template: ‘Name: {{user.name}} Street: {{user.addr}}’  
  10.     };  
  11. });</span>  

至今 scope 是割裂的,user 对象将不能从父 scope 中走访,因而,在
directive 渲染的时候 user 对象的占位将不会输出内容。

 

 

directive 在采纳隔离 scope
的时候,提供了二种方法同隔离之外的地方交互。那三种分别是

 

@ 绑定一个有些 scope 属性到当前 dom
节点的属性值。结果一而再一个字符串,因为 dom 属性是字符串。

& 提供一种方式实施一个表明式在父 scope 的光景文中。假使没有点名 attr
名称,则属性名称为同样的本地名称。

= 通过 directive 的 attr 属性的值在一些 scope 的性质和父 scope
属性名之间建立双向绑定。

 

一般来说示例:directive 表明未隔离 scope 类型,并且使用@绑定 name 属性,在
directive 中动用 name 属性绑定父 scope 中的属性。当改变父 scope
中属性的值的时候,directive 会同步更新值,当改变 directive 的 scope
的属性值时,父 scope 无法共同更新值。

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”> app.controller(“myController”, function ($scope) {  
  2.         $scope.name = “hello world”;  
  3.     }).directive(“isolatedDirective”, function () {  
  4.         return {  
  5.             scope: {  
  6.                 name: “@”  
  7.             },  
  8.             template: ‘Say:{{name}} <br>改变隔离scope的name:<input type=”buttom” value=”” ng-model=”name” class=”ng-pristine ng-valid”>’  
  9.         }  
  10. })</span>  

[html] view
plain
 copy

 

  1. <span style=”color:#330033;”><div ng-controller=”myController”>  
  2.    <div class=”result”>  
  3.        <div>父scope:  
  4.            <div>Say:{{name}}<br>改变父scope的name:<input type=”text” value=”” ng-model=”name”/></div>  
  5.        </div>  
  6.        <div>隔离scope:  
  7.            <div isolated-directive name=”{{name}}”></div>  
  8.        </div>  
  9.         <div>隔离scope(不使用{{name}}):  
  10.              <div isolated-directive name=”name”></div>  
  11.     </div>  
  12. </div></span>  

AngularJS 3

 

= 局部 scope 属性

= 通过 directive 的 attr 属性的值在有的 scope 的习性和父 scope
属性名之间建立双向绑定。
趣味是,当你想要一个双向绑定的天性的时候,你能够拔取=来引入外部属性。无论是改变父
scope 照旧隔离 scope 里的质量,父 scope 和隔离 scope
都会同时革新属性值,因为它们是双向绑定的关系。

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”> app.controller(“myController”, function ($scope) {  
  2.         $scope.user = {  
  3.             name: ‘hello’,  
  4.             id: 1  
  5.         };  
  6.     }).directive(“isolatedDirective”, function () {  
  7.         return {  
  8.             scope: {  
  9.                 user: “=”  
  10.             },  
  11.             template: ‘Say:{{user.name}} <br>改变隔离scope的name:<input type=”buttom” value=”” ng-model=”user.name”/>’  
  12.         }  
  13.     })</span>  

[html] view
plain
 copy

 

  1. <span style=”color:#330033;”><div ng-controller=”myController”>  
  2.     <div>父scope:  
  3.         <div>Say:{{user.name}}<br>改变父scope的name:<input type=”text” value=”” ng-model=”user.name”/></div>  
  4.     </div>  
  5.     <div>隔离scope:  
  6.         <div isolated-directive user=”user”></div>  
  7.     </div>  
  8.     <div>隔离scope(使用{{name}}):  
  9.         <div isolated-directive user=”{{user}}”></div>  
  10.     </div>  
  11. </div></span>  

AngularJS 4

 

 

& 局部 scope 属性

& 格局提供一种途经是 directive 能在父 scope
的左右文中执行一个表明式。此表明式可以是一个 function。
譬如说当您写了一个 directive,当用户点击按钮时,directive 想要公告controller,controller 不能了解 directive
中发生了怎么,大概你可以透过利用 angular 中的 event
广播来达成,可是必须求在 controller 中追加一个事件监听方法。
最好的方式就是让 directive 可以透过一个父 scope 中的 function,当
directive 中有啥样动作需求创新到父 scope 中的时候,可以在父 scope
上下文中执行一段代码恐怕一个函数。

 

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”> app.controller(“myController”, function ($scope) {  
  2.         $scope.value = “hello world”;  
  3.         $scope.click = function () {  
  4.             $scope.value = Math.random();  
  5.         };  
  6.     }).directive(“isolatedDirective”, function () {  
  7.         return {  
  8.             scope: {  
  9.                 action: “&”  
  10.             },  
  11.             template: ‘<input type=”button” value=”在directive中施行父scope定义的艺术” ng-click=”action()”/>’  
  12.         }  
  13.     })</span>  

[html] view
plain
 copy

 

  1. <span style=”color:#330033;”> <div  ng-controller=”myController”>  
  2.         <div>父scope:  
  3.             <div>Say:{{value}}</div>  
  4.         </div>  
  5.         <div>隔离scope:  
  6.             <div isolated-directive action=”click()”></div>  
  7.         </div>  
  8. </div></span>  

AngularJS 5

 

Transclusion(嵌入)

Transclusion是让咱们的吩咐包括自由内容的法门。大家得以延时提取并在正确的scope下编译那几个嵌入的剧情,最后将它们放入指令模板中指定的地方。
若是你在命令定义中安装
transclude:true,一个新的松手的scope会被创设,它原型继承子父scope。
假如你想要你的吩咐使用隔离的scope,可是它所涵盖的情节可以在父scope中实践,transclusion也足以扶持。

 

偶尔我大家要放权指令成分自身,而不仅是它的始末。在那种场所下,我们必要运用
transclude:’element’。它和 transclude:true 差别,它将标志了
ng-transclude
指令的元素一起包蕴到了命令模板中。使用transclusion,你的link函数会得到一个叫作
transclude
的链接函数,那几个函数绑定了不错的命令scope,并且传入了另一个享有被置于DOM成分拷贝的函数。你能够在那些transclude 函数中施行比如修改成分拷贝可能将它添加到DOM上等操作。 

 

transclude:true

 

[html] view
plain
 copy

 

  1. <span style=”color:#330033;”><body ng-app=”myApp”>  
  2.   <div class=”AAA”>  
  3.    <hero name=”superman”>Stuff inside the custom directive</hero>  
  4. </div>  
  5. </body></span>  

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’, []).directive(‘hero’, function () {  
  2.     return {  
  3.       restrict: ‘E’,  
  4.       transclude: true,  
  5.       scope: { name:’@’ },  
  6.       template: ‘<div>’ +  
  7.                   ‘<div>{{name}}</div><br>’ +  
  8.                   ‘<div ng-transclude></div>’ +  
  9.                 ‘</div>’  
  10.     };  
  11.   });</span>  

 

透过指令编译将来

AngularJS 6

 

指令 中的 controller  controllerAs require

controller参数可以是一个字符串或一个函数。当设置为字符串时,会以字符串的值为名字,来搜寻注册在使用中的控制器的构造函数:

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’, [])  
  2. .directive(‘myDirective’, function() {  
  3. restrict: ‘A’, // 始终要求  
  4. controller: ‘SomeController’  
  5. })  
  6. // 应用中其他的位置  
  7. angular.module(‘myApp’)  
  8. .controller(‘SomeController’, function($scope, $element, $attrs, $transclude) {  
  9. // 控制器逻辑放在那里  
  10. });</span>  

可以在命令内部通过匿名构造函数的格局来定义一个内联的控制器:

 

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’,[])  
  2. .directive(‘myDirective’, function() {  
  3. restrict: ‘A’,  
  4. controller:  
  5. function($scope, $element, $attrs, $transclude) {  
  6. // 控制器逻辑放在此处  
  7. }  
  8. });</span>  

我们得以将轻易可以被注入的AngularJS服务传递给控制器。例如,假如我们想要将$log服
务传入控制器,只需简单地将它注入到控制器中,便得以在命令中使用它了。
控制器中也有局部卓殊的劳务可以被注入到指令当中。这么些劳动有:

 

  1. $scope
    与指令成分相关联的如今成效域。
  2. $element
    脚下下令对应的因素。

  3. $attrs
    由近年来成分的性质组成的对象。例如,下边的因素:
    <div id=”aDiv”class=”box”></div>
    装有如下的品质对象:
    {
    id: “aDiv”,
    class: “box”
    }

  4. $transclude
    置于链接函数会与相应的松开成效域举办预绑定。
    transclude链接函数是事实上被执行用来克隆成分和操作DOM的函数。

比如,大家想要通过指令来添加一个超链接标签。可以在控制器内的$transclude函数中落到实处:

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’)  
  2. .directive(‘link’, function() {  
  3. return {  
  4. restrict: ‘EA’,  
  5. transclude: true,  
  6. controller:  
  7. function($scope, $element, $transclude, $log) {  
  8. $transclude(function(clone) {  
  9. var a = angular.element(‘<a>’);  
  10. a.attr(‘href’, clone.text());  
  11. a.text(clone.text());  
  12. $log.info(“Created new a tag in link directive”);  
  13. $element.append(a);  
  14. });  
  15. }  
  16. };  
  17. });</span>  

命令的控制器和link函数能够开展互换。控制爱抚借使用来提供可在命令间复用的行事,但链接函数只好在当下里边指令中定义行为,且不可以在命令间复用

 

由于指令可以require其他指令所运用的控制器,由此决定器常被用来放置在三个指令间共享的动作。
若果大家愿意将近来下令的API揭露给其余指令使用,可以应用controller参数,否则可以利用link来社团当前命令成分的作用性。要是我们利用了scope.$watch()恐怕想要与DOM成分抓牢时的互相,使用链接会是更好的采用。
技术上讲,$scope会在DOM成分被实际渲染在此以前传出到控制器中。在一些意况下,例如利用了内置,控制器中的作用域所突显的功用域或许与我们所梦想的不均等,那种景观下,$scope对象不能担保可以被正常更新。

controller,link,compile有怎么着两样

 

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>//directives.js增加exampleDirective  
  2. phonecatDirectives.directive(‘exampleDirective’, function() {  
  3.     return {  
  4.         restrict: ‘E’,  
  5.         template: ‘<p>Hello {{number}}!</p>’,  
  6.         controller: function($scope, $element){  
  7.             $scope.number = $scope.number + “22222 “;  
  8.         },  
  9.         //controllerAs:’myController’,  
  10.         link: function(scope, el, attr) {  
  11.             scope.number = scope.number + “33333 “;  
  12.         },  
  13.         compile: function(element, attributes) {  
  14.             return {  
  15.                 pre: function preLink(scope, element, attributes) {  
  16.                     scope.number = scope.number + “44444 “;  
  17.                 },  
  18.                 post: function postLink(scope, element, attributes) {  
  19.                     scope.number = scope.number + “55555 “;  
  20.                 }  
  21.             };  
  22.         }  
  23.     }  
  24. });  
  25.   
  26. //controller.js添加  
  27. dtControllers.controller(‘directive2’,[‘$scope’,  
  28.     function($scope) {  
  29.         $scope.number = ‘1111 ‘;  
  30.     }  
  31. ]);  
  32.   
  33. //html  
  34. <body ng-app=”phonecatApp”>  
  35.     <div ng-controller=”directive2″>  
  36.         <example-directive></example-directive>  
  37.     </div>  
  38. </body></span>  

运作结果:

 

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>Hello 1111 22222 44444 55555 !  </span>  

由结果可以看出来,controller先运行,compile后运行,link不运行(link就是compile中的postLink)。将上例中的compile注释掉运行结果:

 

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>Hello 1111 22222 33333 !    </span>  

由结果可以看出来,controller先运行,link后运行,link和compile不合营。compile改变dom,link事件的接触和绑定

 

 

controllerAs

controllerAs参数用来设置控制器的别名,能够以此为名来宣布控制器,并且成效域可以访问controllerAs。那样就足以在视图中引用控制器,甚至无需注入$scope。
比如,创立一个MainController,然后不要注入$scope,如下所示:

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’)  
  2. .controller(‘MainController’, function() {  
  3. this.name = “Ari”;  
  4. });</span>  

当今,在HTML中无需引用功用域就可以利用MainController。

[html] view
plain
 copy

 

  1. <span style=”color:#330033;”><div ng-appng-controller=”MainControllerasmain”>  
  2. <input type=”text” ng-model=”main.name” />  
  3. <span>{{ main.name }}</span>  
  4. </div></span>  

本条参数看起来好像没什么大用,但它给了大家可以在路由和指令中创制匿名控制器的强劲能力。那种能力可以将动态的对象创设成为控制器,并且这些目标是隔离的、易于测试的。

譬如,可以在命令中开创匿名控制器,如下所示:

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’)  
  2. .directive(‘myDirective’, function() {  
  3. return {  
  4. restrict: ‘A’,  
  5. template: ‘<h4>{{ myController.msg }}</h4>’,  
  6. controllerAs: ‘myController’,  
  7. controller: function() {  
  8. this.msg = “Hello World”  
  9. }  
  10. };  
  11. });</span>  

require

 

require参数可以被装置为字符串或数组,字符串代表其它一个下令的名字。require会将控制器注入到其值所指定的吩咐中,并作为当下命令的链接函数的第五个参数。

字符串或数组成分的值是会在时下命令的成效域中动用的授命名称。

scope会影响指令效率域的对准,是一个隔离成效域,一个有依靠的作用域只怕完全没有作用域。

在其余情况下,AngularJS编译器在查找子控制器时都会参照当前下令的模版。

require参数的值可以用上边的前缀举办修饰,那会改变查找控制器时的作为:
?
如若在方今下令中从未找到所急需的控制器,会将null作为传给link函数的第一个参数。
^
一经添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器。
?^
将前方七个选项的表现构成起来,大家可拔取地加载要求的一声令下并在父指令链中开展搜索。

尚未前缀
假设没有前缀,指令将会在本身所提供的控制器中展开检索,假如没有找到其余控制器(或具有指定名字的命令)就抛出一个不当。

下边这一个例子可以很好的解说

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>var app = angular.modeule(‘myapp’,[]);  
  2.   
  3. app.directive(‘common’,function(){  
  4.     return {  
  5.     …  
  6.     controller: function($scope){  
  7.         this.method1 = function(){  
  8.         };  
  9.         this.method2 = function(){  
  10.         };  
  11.     },  
  12.     …  
  13.     }  
  14. });  
  15.   
  16. app.directive(‘d1’,function(){  
  17.     return {  
  18.     …  
  19.     require: ‘?^common’,  
  20.     link: function(scope,elem,attrs,common){  
  21.         scope.method1 = common.method1;  
  22.         ..  
  23.         },  
  24.     …  
  25.     }  
  26. });</span>  

 

ngModal

 

ngModel是一个用法尤其的通令,它提供更底层的API来处理控制器内的多少。当大家在命令中使用ngModel时亦可访问一个异样的API,那些API用来拍卖数据绑定、验证、CSS更新等不实际操作DOM的作业。

 

ngModel控制器会随ngModel被一贯注入到指令中,其中包括了有些主意。

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’)  
  2. .directive(‘myDirective’,function(){  
  3. return {  
  4. require: ‘?ngModel’,  
  5. link: function(scope, ele, attrs, ngModel) {  
  6. if (!ngModel) return;  
  7. // 现在大家的指令中一度有ngModelController的一个实例  
  8. }  
  9. };  
  10. });</span>  

如果不设置require选项,ngModelController就不会被注入到指令中。

小心,那么些命令没有隔离效用域。即便给那一个命令设置隔离功效域,将促成其中ngModel不能更新外部ngModel的对应值:AngularJS会在本地成效域以外查询值。

为了设置功效域中的视图值,需求调用ngModel.$setViewValue()函数。ngModel.$setViewValue()函数可以接受一个参数。

value(字符串):value参数是我们想要赋值给ngModel实例的实际值。那个办法会更新控制器上地面的$viewValue,然后将值传递给逐个$parser函数(包涵验证器)。

$setViewValue()方法适合于在自定义指令中监听自定义事件(比如利用所有回调函数的jQuery插件),大家会期待在回调时设置$viewValue并履行digest循环。

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’)  
  2. .directive(‘myDirective’, function() {  
  3. return {  
  4. require: ‘?ngModel’,  
  5. link: function(scope, ele, attrs, ngModel) {  
  6. if (!ngModel) return;  
  7. $(function() {  
  8. ele.datepicker({  
  9. onSelect: function(date) {  
  10. // 设置视图和调用apply  
  11. scope.$apply(function() {  
  12. ngModel.$setViewValue(date);  
  13. });  
  14. }  
  15. });  
  16. });  
  17. }  
  18. };  
  19. });</span>  

总的来看此间 可能大家照旧不知晓 what fuck this

首先让大家在控制台出口ngmodel这几个参数看看

[html] view
plain
 copy

 

  1. <span style=”color:#330033;”><!DOCTYPE html>  
  2. <html lang=”en” ng-app=”app”>  
  3. <head>  
  4.   <meta charset=”UTF-8″>  
  5.   <title>Document</title>  
  6.   <script src=”angular.js” charset=”utf-8″></script>  
  7. </head>  
  8. <body ng-controller=’ctrl’>  
  9.   <input type=”text” test ng-model=_val>  
  10.   <script>  
  11.     var app = angular.module(‘app’,[]);  
  12.     app.controller(‘ctrl’,function ($scope){  
  13.       $scope._val = “leifengshushu”;  
  14.     })  
  15.     app.directive(‘test’,function(){  
  16.       return{  
  17.         restrict: ‘AE’,  
  18.         require: ‘ngModel’,  
  19.         link: function (scope,iElem,iAttr,ngmodel){  
  20.           console.log(ngmodel)  
  21.         }  
  22.       }  
  23.     })  
  24.   </script>  
  25. </body>  
  26. </html></span>  

那一个目的涵盖很多属性和措施

$viewValue为视图值,即突显在视图(页面)的实际值(就是地点例子中input输入框的值)
$modelValue为模型值,即赋给ng-model的值(与控制器绑定的值)
相互不必然相等,因为$viewValue同步到$modelValue要因此一多元的操作。
尽管如此一大半状态下两岸是相等的(例如地方的例子)

 

$parsers为一个履行它里面各个因素(每一种要素都是一个函数)的数组,首假如用来做阐明和转换值的经过,ngModel从DOM读取的值会被传到到中间的函数
它会相继执行每一种函数,把每种函数执行的结果传个下一个函数,而末了一个函数执行的值将会流传model中,大家得以将函数push进去,那样它就会执行。

 

$formatters也是一个履行它里面各个因素(各种因素都是一个函数)的数组,首要用来对值举办格式化和转移,以便在绑定了这么些值的控件中彰显。
当数码的模型值发生变化的时候,里面的函数会被每一个执行,同样大家就足以将函数push进去,让它执行

$viewChangeListeners的值也是一个由函数组成的数组,当视图的值暴发变化的时候里面的函数会被每个调用,
落到实处跟$watch类似的效益。

$render函数负责将模型值同步到视图上,
借使模型值被转移,要求一块视图的值。

$setViewValue用于安装视图值(上面的事例就是将input的value值赋值给$viewValue);

 

还有部分属性 在那里就一无所知解 请我们 百度 ngmodal 

 

下边大家来说说 $apply() 和 $digest();

 

$apply()和$digest()在AngularJS中是多个主导概念,但是有时它们又令人猜忌。而为了领会AngularJS的办事方法,首先必要领会$apply()和$digest()是什么样行事的。那篇作品意在解释$apply()和$digest()是如何,以及在一般的编码中如何行使它们。
 
探索$apply()和$digest()
AngularJS提供了一个那一个酷的特色叫做双向数据绑定(Two-way Data
Binding),那几个特点大大简化了俺们的代码编写格局。数据绑定意味着当View中有别的数据爆发了变化,那么那个变化也会自行地反映到scope的数码上,也即表示scope模型会活动地换代。类似地,当scope模型暴发变化时,view中的数据也会更新到最新的值。那么AngularJS是什么样形成那或多或少的啊?当您写下表达式如{{
aModel
}}时,AngularJS在暗地里会为您在scope模型上安装一个watcher,它用来在多少爆发变化的时候更新view。这里的watcher和您会在AngularJS中安装的watcher是如出一辙的:

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>$scope.$watch(‘aModel’, function(newValue, oldValue) {    
  2.   //update the DOM with newValue    
  3. });</span>  

传扬到$watch()中的第四个参数是一个回调函数,该函数在aModel的值发生变化的时候会被调用。当aModel暴发变化的时候,这些回调函数会被调用来更新view那一点不难领会,不过,还留存一个很紧要的难题!AngularJS是如何精晓怎么样时候要调用那个回调函数呢?换句话说,AngularJS是如何知晓aModel暴发了变通,才调用了对应的回调函数呢?它会周期性的周转一个函数来检查scope模型中的数据是或不是暴发了变化呢?好呢,那就是$digest循环的用武之地了。

 

在$digest循环中,watchers会被触发。当一个watcher被触发时,AngularJS会检测scope模型,如何它发生了变更那么涉及到该watcher的回调函数就会被调用。那么,下一个题材就是$digest循环是在如何时候以种种艺术开端的?

 

在调用了$scope.$digest()后,$digest循环就从头了。假诺你在一个ng-click指令对应的handler函数中改变了scope中的一条数据,此时AngularJS会自动地通过调用$digest()来触发一轮$digest循环。当$digest循环初叶后,它会触发每一个watcher。那几个watchers会检查scope中的当前model值是不是和上一遍总括得到的model值不一致。即使不一致,那么相应的回调函数会被实施。调用该函数的结果,就是view中的表明式内容(译注:诸如{{
aModel
}})会被更新。除了ng-click指令,还有局地其余的built-in指令以及服务来让您改变models(比如ng-model,$timeout等)和自行触发一次$digest循环。

 

近期为止还不错!不过,有一个不成难点。在地点的事例中,AngularJS并不直接调用$digest(),而是调用$scope.$apply(),后者会调用$rootScope.$digest()。由此,一轮$digest循环在$rootScope起头,随后会访问到独具的children
scope中的watchers。

 

现在,假如你将ng-click指令关联到了一个button上,并传到了一个function名到ng-click上。当该button被点击时,AngularJS会将此function包装到一个wrapping
function中,然后传入到$scope.$apply()。由此,你的function会正常被实施,修改models(若是必要的话),此时一轮$digest循环也会被触发,用来保管view也会被更新。
 
Note:
$scope.$apply()会活动地调用$rootScope.$digest()。$apply()方法有三种样式。第一种会承受一个function作为参数,执行该function并且触发一轮$digest循环。第两种会不接受其余参数,只是触发一轮$digest循环。我们立时会晤到为啥第一种样式更好。

 

什么样时候手动调用$apply()方法?
如若AngularJS总是将咱们的代码wrap到一个function中并传播$apply(),以此来开端一轮$digest循环,那么哪些时候才要求大家手动地调用$apply()方法吧?实际上,AngularJS对此有所极度鲜明的必要,就是它只负责对发出于AngularJS上下文环境中的变更会做出自动地响应(即,在$apply()方法中发出的对于models的变动)。AngularJS的built-in指令就是那样做的,所以任何的model变更都会被反映到view中。但是,假使您在AngularJS上下文之外的其余地点修改了model,那么您就要求经过手动调用$apply()来布告AngularJS。那如同告诉AngularJS,你改改了有些models,希望AngularJS帮您触发watchers来做出科学的响应。
 
诸如,要是你利用了JavaScript中的set提姆eout()来更新一个scope
model,那么AngularJS就没有章程知道您转移了何等。那种情状下,调用$apply()就是您的义务了,通过调用它来触发一轮$digest循环。类似地,倘若你有一个命令用来安装一个DOM事件listener并且在该listener中修改了一部分models,那么你也亟需经过手动调用$apply()来确保变更会被正确的反映到view中

 

让大家来看一个事例。参与你有一个页面,一旦该页面加载完毕了,你指望在两分钟之后显得一条音讯。你的完成或然是下边那个样子的:

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”><body ng-app=”myApp”>    
  2.   <div ng-controller=”MessageController”>    
  3.     Delayed Message: {{message}}    
  4.   </div>      
  5. </body></span>  

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>    angular.module(‘myApp’,[]).controller(‘MessageController’, function($scope) {    
  2.         
  3.       $scope.getMessage = function() {    
  4.         setTimeout(function() {    
  5.           $scope.message = ‘Fetched after 3 seconds’;    
  6.           console.log(‘message:’+$scope.message);    
  7.         }, 2000);    
  8.       }    
  9.           
  10.       $scope.getMessage();    
  11.         
  12.     }); </span>  

经过运行那些事例,你会看出过了两秒钟之后,控制台确实会展现出曾经更新的model,可是,view并不曾更新。原因或然你早就知晓了,就是大家忘了调用$apply()方法。由此,我们需求修改getMessage(),如下所示:

 

[javascript] view
plain
 copy

 

  1. <span style=”color:#330033;”>angular.module(‘myApp’,[]).controller(‘MessageController’, function($scope) {    
  2.         
  3.       $scope.getMessage = function() {    
  4.         setTimeout(function() {    
  5.           $scope.$apply(function() {    
  6.             //wrapped this within $apply    
  7.             $scope.message = ‘Fetched after 3 seconds’;     
  8.             console.log(‘message:’ + $scope.message);    
  9.           });    
  10.         }, 2000);    
  11.       }    
  12.           
  13.       $scope.getMessage();    
  14.         
  15.     });  </span>  

$digest循环会运行多少次?
当一个$digest循环运行时,watchers会被执行来检查scope中的models是或不是暴发了变动。若是发生了变通,那么相应的listener函数就会被实施。那涉及到一个重点的难点。倘诺listener函数本人会修改一个scope
model呢?AngularJS会怎么处理这种景观?
 
答案是$digest循环不会只运行一遍。在当前的两次巡回为止后,它会再进行两回循环用来检查是不是有models发生了变动。那就是脏检查(Dirty
Checking),它用来处理在listener函数被实施时或然引起的model变化。因而,$digest循环会持续运转直到model不再发生变化,恐怕$digest循环的次数高达了10次。因而,尽恐怕地不用在listener函数中修改model。

service 

服务提供了一种能在行使的百分之百生命周期内保持数据的法子,它亦可在控制器之间开展通信,并且能保险数据的一致性。
劳务是一个单例对象,在逐个应用中只会被实例化四次(被$injector实例化),并且是延迟加载的(需求时才会被成立)。

劳务提供了把与一定功效相关联的艺术集中在联名的接口。

 

注册一个劳务

使用angular.module的factoryAPI创造服务,是最普遍也是最灵敏的艺术:

[javascript] view
plain
 copy

 

  1. angular.module(‘myApp.services’, [])  
  2. .factory(‘githubService’, function() {  
  3.   var serviceInstance = {};  
  4.   // 我们的首先个劳务  
  5.   return serviceInstance;  
  6. });  

 

[javascript] view
plain
 copy

 

  1. var Person = function($http) {  
  2. this.getName = function() {  
  3. return $http({ method: ‘GET’, url: ‘/api/user’});  
  4. };  
  5. };  
  6. angular.service(‘personService’, Person);  

 

[javascript] view
plain
 copy

 

  1. angular.module(‘myApp’)  
  2. .factory(‘myService’, function() {  
  3. return {  
  4. ‘username’: ‘auser’  
  5. };  
  6. })  
  7. // 那与地点工厂的用法等价  
  8. .provider(‘myService’, {  
  9. $get: function() {  
  10. return {  
  11. ‘username’: ‘auser’  
  12. };  
  13. }  
  14. });  

[javascript] view
plain
 copy

 

  1. angular.module(‘myApp.services’, [])  
  2. .factory(‘githubService’, function($http) {  
  3. var githubUrl = ‘https://api.github.com‘;  
  4. var runUserRequest = function(username, path) {  
  5. // 从利用JSONP调用Github API的$http服务中回到promise  
  6. return $http({  
  7. method: ‘JSONP’,  
  8. url: githubUrl + ‘/users/’ +  
  9. username + ‘/’ +  
  10. path + ‘?callback=JSON_CALLBACK’  
  11. });  
  12. };  
  13. // 重返带有一个events函数的服务目的  
  14. return {  
  15. events: function(username) {  
  16. return runUserRequest(username, ‘events’);  
  17. }  
  18. };  
  19. });  

可以在控制器、指令、过滤器或其余一个劳务中经过看重注明的方法来使用服务。 
将服务的名字当作参数传递给控制器函数,可以将服务注入到控制器中。当服务成为了某个控制器的依靠,就可以在控制器中调用任何概念在那一个服务对象上的点子。

[javascript] view
plain
 copy

 

  1. angular.module(‘myApp’, [‘myApp.services’])  
  2. .controller(‘ServiceController’, function($scope, githubService) {  
  3. // 我们得以调用对象的轩然大波函数  
  4. $scope.events = githubService.events(‘auser’);  
  5. });  

constant(‘name’,’value’)

[javascript] view
plain
 copy

 

  1. angular.module(‘myApp’) .constant(‘apiKey’,’123123123′)  
  2. //这些常量服务可以像其余服务一样被注入到布署函数中:  
  3. angular.module(‘myApp’)  
  4. .controller(‘MyController’, function($scope, apiKey) {  
  5. // 可以像上边一样用apiKey作为常量  
  6. // 用123123123当做字符串的值  
  7. $scope.apiKey = apiKey;  
  8. });  

value(‘name’,’value’)

[javascript] view
plain
 copy

 

  1. angular.module(‘myApp’)  
  2. .value(‘apiKey’,’123123123′);  

value()方法和constant()方法之间最要紧的分裂是,常量可以注入到计划函数中,而值不行。常常情状下,可以通过value()来注册服务对象或函数,用constant()来布置数据。

[javascript] view
plain
 copy

 

  1. angular.module(‘myApp’, [])  
  2. .constant(‘apiKey’, ‘123123123’)  
  3. .config(function(apiKey) {  
  4. // 在那里apiKey将被赋值为123123123  
  5. // 就好像上边安装的那么  
  6. })  
  7. .value(‘FBid’,’231231231′)  
  8. .config(function(FBid) {  
  9. // 那将抛出一个张冠李戴,未知的provider: FBid  
  10. // 因为在config函数内部不可能访问这些值  
  11. });  

上边大家来说说他们的区分 (provider,value,constant,service,factory,decorator)

 

provider是干啥的?
provider可以为利用提供通用的服务,方式可以是常量,也可以是目的。
比如大家在controller里常用的$http就是AngularJS框架提供的provider

[javascript] view
plain
 copy

 

  1. myApp.controller(‘MainController’, function($scope, $http) {  
  2.    $http.get(…)  
  3. }  

在上头的代码里,就足以一贯动用$http包好的各个功用了

上面大家团结定义一个provider

[javascript] view
plain
 copy

 

  1. //定义:  
  2. $provide.provider(‘age’, {  
  3.     start: 10,  
  4.     $get: function() {  
  5.         return this.start + 2;  
  6.     }  
  7. });  
  8. //或  
  9. $provide.provider(‘age’, function($filterProvider){  
  10.     this.start = 10;  
  11.     this.$get = function() {  
  12.         return this.start + 2;  
  13.     };  
  14. });  
  15. //调用:  
  16. app.controller(‘MainCtrl’, function($scope, age) {  
  17.     $scope.age = age; //12  
  18. });  

provider的骨干尺度就是通过完结$get方法来在选用中注入单例,使用的时候获得的age就是$get执行后的结果。
上边例子中的二种定义方法都可以

 

上面大家温馨定义 factory

[javascript] view
plain
 copy

 

  1. $provide.provider(‘myDate’, {  
  2.     $get: function() {  
  3.         return new Date();  
  4.     }  
  5. });  
  6. //能够写成  
  7. $provide.factory(‘myDate’, function(){  
  8.     return new Date();  
  9. });  
  10. //调用:  
  11. app.controller(‘MainCtrl’, function($scope, myDate) {  
  12.     $scope.myDate = myDate; //current date  
  13. });  

上边大家去定义service

[javascript] view
plain
 copy

 

  1. $provide.provider(‘myDate’, {  
  2.     $get: function() {  
  3.         return new Date();  
  4.     }  
  5. });  
  6. //可以写成  
  7. $provide.factory(‘myDate’, function(){  
  8.     return new Date();  
  9. });  
  10. //能够写成  
  11. $provide.service(‘myDate’, Date);  

value 和 constant ,value可以被修改 而constant 不能被修改,value 不只怕在
config 里面注入可是constant 能够

angularjs 与服务器的 交互

  1. 重大领会$http
  2. 熟悉$resource
  3. 学会运用 restangular 库 http://ngmodules.org/modules/restangular
  4. 理解promise

相关文章