Angularjs留存(二)
来源：互联网 发布：珠峰js培训 编辑：程序博客网 时间：2024/05/17 08:58
PS：Angularjs留存系列主要是用来记录一些自己在学习其他文章时觉得有必要留存一下的fortune！
文章可能会很长(默认每篇17个小的知识点)，但是我们可以使用Ctrl + F 来查找啦！
1、AngularJS中，子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法。但有一个例外：在directive中使用scope: { ... }，这种方式创建的作用域是一个独立的"Isolate"作用域，它也有父作用域，但父作用域不在其原型链上，不会对父作用域进行原型继承。这种方式定义作用域通常用于构造可复用的directive组件。
作用域的原型继承是非常简单普遍的，甚至你不必关心它的运作。直到你在子作用域中向父作用域的原始类型属性使用双向数据绑定2-way data binding，比如Form表单的ng-model为父作用域中的属性，且为原始类型，输入数据后，它不会如你期望的那样运行——AngularJS不会把输入数据写到你期望的父作用域属性中去，而是直接在子作用域创建同名属性并写入数据。这个行为符合JavaScript原型继承机制的行为。AngularJS新手通常没有认识到ng-repeat、 ng-switch、ng-view和ng-include 都会创建子作用域, 所以经常出问题。 (见 示例)
避免这个问题的最佳实践是在ng-model中总使用.，（至于为什么只要仔细体会JavaScript原型继承机制，我相信你就可以明白！！！）。。。参见文章 always have a '.' in your ng-models。
比如：
<input type="text" ng-model="someObj.prop1">优于：
<input type="text" ng-model="prop1">如果你一定要直接使用原始类型，要注意两点：
- 在子作用域中使用
$parent.parentScopeProperty，这样可以直接修改父作用域的属性。 - 在父作用域中定义函数，子作用域通过原型继承调用函数把值传递给父作用域（这种方式极少使用）。
- 普通的带原型继承的作用域 --
ng-include,ng-switch,ng-controller, directive withscope: true； - 普通的带原型继承的，并且有赋值行为的作用域 --
ng-repeat，ng-repeat为每一个迭代项创建一个普通的有原型继承的子作用域，但同时在子作用域中创建新属性存储迭代项； - “Isolate”作用域 -- directive with
scope: {...}， 该作用域没有原型继承，但可以通过'=', '@', 和 '&'与父作用域通信。 - “transcluded”作用域 -- directive with
transclude: true，它也是普通的带原型继承的作用域，但它与“Isolate”作用域是相邻的好基友。
答案是$digest循环不会只运行一次。在当前的一次循环结束后，它会再执行一次循环用来检查是否有models发生了变化。这就是脏检查(Dirty Checking)，它用来处理在listener函数被执行时可能引起的model变化。因此，$digest循环会持续运行直到model不再发生变化，或者$digest循环的次数达到了10次。因此，尽可能地不要在listener函数中修改model。
Note: $digest循环最少也会运行两次，即使在listener函数中并没有改变任何model。正如上面讨论的那样，它会多运行一次来确保models没有变化。
5、AngularJS 之 Factory vs Service vs Provider
用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。
2) Service 是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后 service 返回"this"。你把 service 传进 controller 之后，在controller里 "this" 上的属性就可以通过 service 来使用了。
3) Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider。
什么时候适合使用factory()方法
在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择。
注意：需要使用.config()来配置service的时候不能使用factory()方法
什么时候适合使用service()方法
service()方法很适合使用在功能控制比较多的service里面
注意：需要使用.config()来配置service的时候不能使用service()方法
什么时候适合使用provider()方法
当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如，我们需要配置services在不同的部署环境里面（开发，演示，生产）使用不同的后端处理的时候就可以使用到了
当我们打算发布开源provider()也是首选创建service的方法，这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。
6、作用域也只不过是在彼此间进行了原型继承。所有可以用在 JavaScript 对象上的原型继承的规则，都可以同等的用在 作用域 的原型链继承上去。毕竟 Scopes 作用域就是 JavaScript 对象嘛。
在子级作用域中去改变父级作用域上面的属性有几种方法。第一种，我们就直接通过 $parent 属性来引用父级作用域，但我们要看到，这是一个非常不可靠的解决方案。麻烦之处就在于，ng-model 指令所使用的表达式非常严重的依赖于整个DOM结构。比如就在<input> 标签上面的哪里插入另一个 可创建作用域 的指令，那 $parent 就会指向一个完全不同的作用域了。
就经验来讲，尽量避免使用
$parent属性，因为它强制的把 AngularJS 表达式和你的模板所创建的 DOM 结构捆绑在了一起。这样一来，HTML结构的一个小小的改动，都可能会让整个应用崩溃。
另一个解决方案就是，不要直接把属性绑定到 作用域上，而是绑到一个对象上面，如下所示：
<body ng-app ng-init="thing = {name : 'World'}"> <h1>Hello, {{thing.name}}</h1> <div ng-controller="HelloCtrl"> Say hello to: <input type="text" ng-model="thing.name"> <h2>Hello, {{thing.name}}!</h2> </div></body>这个方案会更可靠，因为他并没有假设 DOM 树的结构是什么样子。
7、给你一个承诺 - 玩转 AngularJS 的 Promise避免直接把数据绑定到 作用域的属性上。应优先选择把数据双向绑定到对象的属性上（然后再把对象挂到 scope 上）。
就经验而言，在给ng-model指令的表达式中，你应该有一个点（例如，ng-model="thing.name"）。
Promise是一种异步方式处理值（或者非值）的方法，promise是对象，代表了一个函数最终可能的返回值或者抛出的异常。AngularJS中使用Promise，要使用AngularJS的内置服务$q。$q的defer()方法创建一个deferred对象，然后通过deferred对象的promise属性，将这个对象变成一个promise对象；这个deferred对象还提供了三个方法，分别是resolve(),reject(),notify()。Test1
我们先通过一个同步的例子来创建一个promise对象。
HTML代码：
<div ng-app="MyApp"> <div ng-controller="MyController"> <label for="flag">成功 <input id="flag" type="checkbox" ng-model="flag" /><br/> </label> <hr/> <button ng-click="handle()">点击我</button> </div></div>JS代码：
angular.module("MyApp", []).controller("MyController", ["$scope", "$q", function ($scope, $q) { $scope.flag = true; $scope.handle = function () { var deferred = $q.defer(); var promise = deferred.promise; promise.then(function (result) { alert("Success: " + result); }, function (error) { alert("Fail: " + error); }); if ($scope.flag) { deferred.resolve("you are lucky!"); } else { deferred.reject("sorry, it lost!"); } }}]);我们来详细的分析一下上面的代码，我们在html页面上添加了一个checkbox，一个button目的是为了当我们选中checkbox和不选中checkbox时，点击下面的按钮会弹出不同的内容。
var deferred = $q.defer()这段代码创建了一个deferred对象，我们然后利用var promise = deferred.promise创建了一个promise对象。
我们给给promise的then方法传递了两个处理函数，分别处理当promise被执行的时候以及promise被拒绝的时候所要进行的操作。
下面的一个if(){}else{}语句块，包含执行和拒绝deferred promise,如果$scope.flag为true,那么我们就会执行deferred promise，然后我们给promise传递一个值，也可能是一个对象，表明promise执行的结果。如果$scope.flag为false,那么我们就会拒绝deferred promise，然后我们给promise传递一个值，也可能是一个对象，表明promise被拒绝的原因。
现在回过头来看看，promise的then方法，如果promise被执行，那么它的参数中的第一个函数的result就代表了"you are lucky!"
我们暂时用的是同步的模式，为的是能够说明问题，后面将会使用异步的方法。
到这里我们可以了解一下$q的defer()方法创建的对象具有哪些方法
resolve(value)：用来执行deferred promise，value可以为字符串，对象等。reject(value)：用来拒绝deferred promise，value可以为字符串，对象等。notify(value)：获取deferred promise的执行状态，然后使用这个函数来传递它。then(successFunc, errorFunc, notifyFunc)：无论promise是成功了还是失败了，当结果可用之后，then都会立刻异步调用successFunc，或者'errorFunc'，在promise被执行或者拒绝之前，notifyFunc可能会被调用0到多次，以提供过程状态的提示。catch(errorFunc)finally(callback)
首先，HTML原生的form表单是不能嵌套的，而Angular封装之后的form就可以嵌套。
其次，Angular为form扩展了自动校验、防止重复提交等功能。
有人说，如果我想要使用原生的HTML表单，应该怎么做呢？
Angular提供了一个ng-pristine指令，把这个指令写在form标签中，Angular就知道你想使用原生的form标签了。
Angular为表单内置了4中CSS样式。
ng-valid 校验合法状态ng-invalid 校验非法状态ng-pristine 如果要使用原生的form，需要设置这个值ng-dirty 表单处于脏数据状态Angular在对表单进行自动校验的时候会校验Model上的属性，如果不设置ng-model，则Angular无法知道myForm.$invalid这个值是否为真。
9、AngularJs ng-route路由详解
首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular
<script src="../../bower_components/angular/angular.js"></script><script src="../../bower_components/angular-route/angular-route.js"></script>
这主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。
路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。
一般主要通过两个方法：
when()：配置路径和参数;
otherwise：配置其他的路径跳转，可以想成default。
when的第二个参数：
controller：对应路径的控制器函数，或者名称
controllerAs：给控制器起个别名
template：对应路径的页面模板，会出现在ng-view处,比如"<div>xxxx</div>"
templateUrl：对应模板的路径，比如"src/xxx.html"
resolve：这个参数着重说下，该属性会以键值对对象的形式，给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用，注入到控制器中。如果resolve中是一个promise对象，那么会等它执行成功后，才注入到控制器中，此时控制器会等待resolve中的执行结果。
详细的例子，可以参考下面的样例。
redirectTo：重定向地址
reloadOnSearch：设置是否在只有地址改变时，才加载对应的模板;search和params改变都不会加载模板
caseInsensitiveMatch：路径区分大小写
路由有几个常用的事件：
$routeChangeStart：这个事件会在路由跳转前触发
$routeChangeSuccess：这个事件在路由跳转成功后触发
$routeChangeError：这个事件在路由跳转失败后触发
angular中的$q是用来处理异步的(主要当然是http交互啦~).
$q采用的是promise式的异步编程.什么是promise异步编程呢?
异步编程最重要的核心就是回调,因为有回调函数,所以才构成了异步编程,而回调有三个关键部分:
一是什么时候执行回调,二是执行什么回调,三是回调执行的时候传入什么参数.
一. $q.defer():
返回一个对象.一般把它赋值给defer变量:
var defer = $q.defer()
※defer的方法:
(一)defer.resolve(data)
对promise发起通知,通知执行成功的回调,回调执行的参数为data
(二)defer.reject(data)
对promise发起通知,通知执行失败的回调,回调执行的参数为data
(三)defer.notify(data)
对promise发起通知,通知执行进度的回调,回调执行的参数为data
※defer的属性:
(一)defer.promise
※defer.promise的属性:
1.defer.promise.$$v
promise的$$v对象就是对应的defer发送的data,当defer还没有发送通知时,$$v为空.
有一点很重要,假设,我们令$scope.a = defer.promise,那么页面在渲染{{a}}时,使用的是a.$$v来渲染a这个变量的.并且修改a变量,视图不会发生变化,需要修改a.$$v,视图才会被更新,具体请参考:
http://www.cnblogs.com/liulangmao/p/3907307.html
※defer.promise的方法:
1.defer.promise.then([success],[error],[notify]):
.then方法接受三个参数,均为函数,函数在接受到defer发送通知时被执行,函数中的参数均为defer发送通知时传入的data.
[success]: 成功回调,defer.resolve()时调用
[error]: 失败回调,defer.reject()时调用
[notify]: 进度回调,defer.notify()时调用
.then()方法返回一个promise对象,可以接续调用.then(),注意,无论.then()是调用的success函数,还是error函数,还是notify函数,发送给下一个promise对象的通知一定是成功通知,而参数则是函数的返回值.也就是说,then()方法里的函数被执行结束后,即为下一个promise发送了成功通知,并且把返回值作为参数传递给回调.
2.defer.promise.catch([callback])
相当于.then(null,[callback])的简写. 直接传入失败回调.返回一个promise对象.发给下一个promise对象的通知依然是成功通知.data值就是回调的返回值.
*很早的angualr版本是没有这个方法的.
3.defer.promise.finally([callback])
.finally只接受一个回调函数,而且这个回调函数不接受参数.无论defer发送的通知是成功,失败,进度,这个函数都会被调用.
.finally也返回一个promise对象,和上面两个方法不同的是,它为下一个promise对象发送的通知不一定是成功通知,而是传给finally的通知类型.也就是说,如果defer给promise发送的是失败通知,那么,finally()得到的promise它收到的也会是失败通知,得到的参数也不是finally的返回值,而是第一个defer发出的通知所带的data.
*很早的angualr版本是没有这个方法的.
11、AngularJS $apply vs $digest
- $apply会使ng进入
$digest cycle, 并从$rootScope开始遍历(深度优先)检查数据变更。 - $digest仅会检查该scope和它的子scope，当你确定当前操作仅影响它们时，用$digest可以稍微提升性能。
- 一些不必要的操作，放到
$timeout里面延迟执行。 - 如果不涉及数据变更，还可以加上第三个参数false，避免调用
$apply。 - directive中执行的
$evalAsync， 会在angular操作DOM之后，浏览器渲染之前执行。 - controller中执行的
$evalAsync， 会在angular操作DOM之前执行，一般不这么用。 - 而使用
$timeout，会在浏览器渲染之后执行。 - 对时间有要求的，第二个参数可以设置为0。123456
$http.get('http://path/to/url').success(function(data){$scope.name = data.name;$timeout(function(){//do sth later, such as log}, 0,false);});
详细：https://github.com/atian25/blog/issues/5
12、注意 angular.module('myModule', []) 与 angular.module('myModule') 的使用
angular.module('myModule', []) will create the module myModule and overwrite any existing module namedmyModule.
>>>angular.module('myModule', []) 创建一个新的module，覆盖已经存在的module
Use angular.module('myModule') to retrieve an existing module.
>>>angular.module('myModule') 指向已经存在的module
13、angularjs 指令详解 - template, restrict, replace类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
16、运行块
和配置块不同，运行块在注入器创建之后被执行，它是所有AngularJS应用中第一个被执行的方法。
运行块是AngularJS中与main方法最接近的概念。运行块中的代码块通常很难进行单元测试，它是和应用本身高度耦合的。
运行块通常用来注册全局的事件监听器。例如，我们会在.run()块中设置路由事件的监听器以及过滤未经授权的请求。
假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯一合理的地方就是run方法：
angular.module('myApp', ['ngRoute']).run(function($rootScope, AuthService) { $rootScope.$on('$routeChangeStart', function(evt, next, current) { // 如果用户未登录 if (!AuthService.userLoggedIn()) { if (next.templateUrl === "login.html") { // 已经转向登录路由因此无需重定向 } else { $location.path('/login'); } } });});run()函数接受一个参数。
initializeFn（函数）AngularJS在注入器创建后会执行这个函数。
angular提供了一个可以复制对象的api——copy(source,destination)，它会对source对象执行深拷贝。
使用时需要注意下面几点：
- 如果只有一个参数（没有指定拷贝的对象 destination），则返回一个拷贝对象
- 如果指定了destination,则会深拷贝对象复制给destination
- 如果source是null或者undefined，那么会直接返回source
- 如果source就是desitination，那么会报错。
- Angularjs留存(二)
- Angularjs留存(一)
- Angularjs留存(三)
- 留存
- 留存
- AngularJS(二)
- AngularJS(二)
- AngularJS入门（二）
- angularJS学习笔记二
- AngularJS学习(二) 引导
- AngularJS 教程（二）
- AngularJS学习（二）
- AngularJS学习（二）
- AngularJs教程（二）
- AngularJs自定义服务(二)
- AngularJS学习二
- AngularJS入门（二）
- 【angularJs】--入门实例二
- amabri服务状态监控和PID目录、文件玩法
- Nginx源代码分析之accept细节（十九）
- Redis学习-配置参数说明
- Cocos2d-x3.12 Xcode打包spine\extension.h(89): fatal error C1083: 无法打开包括文件解决方案
- 两个linux设备之间ad-Hoc的通信
- Angularjs留存(二)
- IOS前后台切换检测
- Android当中数据存储之文件存储
- IE兼容模式 下 JSON未定义
- 题目7：用两个栈实现一个队列。
- 渗透测试套件大全
- leetcode 30 Substring with Concatenation of All Words (java)
- windows下删除文件及卸载服务
- 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）
