AngularJSangular学习笔记

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

 

  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中之setTimeout()来更新一个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

相关文章