angular笔记分析
爱前端—AngularJS_课堂笔记
Angular1.x入门和项目开发第1天课堂笔记班级：全栈前端训练营0219班讲师：邵山欢日期：2017年6月14日邵山欢老师微博：@邵山欢QQ:179427026E-mail:ssh@爱前端官网：目录Angular1.x入门和项目开发 (1)目录 (2)零、框架课程概述 (3)一、通过HelloWorld认识MVVM (3)1.1HelloWorld (3)1.2引入控制器 (5)1.3Angular简介 (7)1.4MV* (10)二、双向数据绑定 (12)三、狠砸思维-只关心数据！不关心DOM！ (13)3.1调色板 (13)3.2微博发布框 (15)3.3小小学生表格 (16)3.4联动下拉框 (18)四、Angular中的脏检查 (22)零、框架课程概述Angular共622个职位满足条件react共1017个职位满足条件vue共819个职位满足条件在中国的市场，Angular有10%的公司使用，React和Vue分掉了剩下的90%，各占60%、40%。
React还会越来越多的公司使用，份额更大。
课程颠覆性极强，彻底颠覆我们做网站的思维。
“MVVM+组件化开发”是一个特别引人入胜的模式。
代码量更大，项目更牛ｘ，要更下功夫。
一、通过HelloWorld认识MVVM1.1HelloWorld在百度静态资源库，可以下载Angular1：/我们引包，然后书写一条js程序，并且在html标签上添加了第一条“指令”。
<!DOCTYPE html><html lang="en"ng-app="app"><head><meta charset="UTF-8"><title>angular学习</title></head><body><h1>{{1+2}}</h1><script type="text/javascript"src="js/angular.min.js"></script><script type="text/javascript">//定义模块，"app"是模块的名字，[]表示当前这个模块的依赖为空。
ANUGLAR1.X学习总结
1 前言
前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接， 紧跟时代潮流，学习掌握新知识自然是不敢怠慢。
AngularJS 是 google 在维护，其在国外已经十分火热，可是国内的使用情况却 有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习 AngularJS 写成 文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。
3 AugularJS 特性
AngularJS 是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的 方式。这种方式利用并且扩展 HTML，CSS 和 javascript，并且弥补了它们的一 些非常明显的不足。本应该使用 HTML 来实现而现在由它开发的动态一些内容。
AngularJS 有五个最重要的功能和特性：
]; } <div ng-controller="AlbumCtrl">
<ul> <li ng-repeat="image in images"> <img ng-src="/142260/{{image.thumbnail}}"
Angular2模板语法总结
NgForTrackBy
• 把NgForTrackBy指令设置为那个追踪函数 • <div *ngFor="let user of users; trackBy:trackByUsers">({{user.id}})
{{user.fullName}}</div> • 追踪函数不会排除所有DOM更改。如果用来判断是否为同一个联
NgStyle
• NgStyle 通过把它绑定到一个key:value控制对象的形式，可以让我们同时设置很多内联样式。 setStyles() { let styles = {
// CSS属性名 'font-style': this.canSave ? 'italic' : 'normal', // italic 'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal 'font-size': this.isSpecial ? '24px' : '8px', // 24px }; return styles; }
事件绑定
• 在事件绑定中，Angular通过监听用户动作，比如键盘事件、鼠标 事件、触屏事件等来响应相对应的数据流向-从视图目标到数据源。
• 事件绑定的语法是由等号左侧小括号内的 目标事件 和右侧引号 中的 模板声明 组成
• <button (click)="onSave()">保存</button>
系人的属性变化了，就会更新DOM元素，反之就会留下这个DOM 元素。列表界面就会变得比较更加平滑，具有更好的响应效果。
Angularjs开发一些经验总结
Angularjs作为html的扩展，旨在建立一个丰富的动态web应用，通过Directive建立一套html扩展的DSL模型，利用PM模式变形MVVM（在网上很多称MVC模式，本人认为在angular0.8是属于经典MVC模式，但在1.0把scope独立注入过后，更倾向于MVVM 模式，这将会后续随笔中写道）简化前端开发和使得前端业务逻辑得以分离，view和表现逻辑的分离，更便于维护，扩展。
Angularjs本来就是采用TDD开发的，提供了一套单元测试组件和End 2 End的测试框架。
Angularjs的的强大之处在于提供了一套内似WPF，Silverlight的强大数据绑定和格式化，过滤组件，这也是MVVM模式所必备的条件；再加之IOC的注入机制，使得不能业务逻辑的分离，服务代码的更大程度抽象重用。
在这节随便中将讨论的angularjs开发的一些基本准则，为什么会有这篇随便呢，因为看见一些项目对于angularjs的乱用。
1：不要一个page一个God似无所不能的controller包含所有页面逻辑。
Angularjsng-controller旨在将业务逻辑的区分，更推荐按照业务逻辑的划分controller，做到业务功能的高内聚，controller的单一原则SRP。
2：View中包含尽量少的逻辑。
就像jsp，asp这类服务端模板引擎一样，我们应该把尽量少的逻辑放在view中，因为这样会导致view和逻辑的紧耦合性，view在软件开发中是最易变化的，而表现层逻辑却相对于view是相对稳定的行为。
同时也导致的view中的逻辑不能被自动化测试，持续集成所覆盖，这将导致以后修改重构和模块的集成的痛苦。
很明显的就是太多的angularjs的ng-switch，ng-when和页面计算表达式等等。
3：注意一些特殊的节点式的angularjs directive，因为在IE7上这是不被认识的，因为IE的严格XML模式。
三大框架知识点总结
三大框架知识点总结一、前端框架知识点总结1. Angular框架Angular是一个用于构建Web应用的开源框架，由Google维护和支持。
Angular框架使用TypeScript编程语言，它提供了一套完整的工具和组件来帮助开发者构建现代化的单页面应用。
Angular框架的特点包括：•数据绑定：支持双向数据绑定，方便对数据进行同步处理。
•模块化设计：通过模块化的设计，让开发者可以轻松地组织和管理应用的代码结构。
•组件化：Angular将应用视为一系列组件的集合，每个组件都有自己的HTML、CSS和逻辑代码，这让开发者可以轻松地重用和维护代码。
•依赖注入：Angular框架提供了依赖注入机制，让开发者可以更方便地管理组件之间的依赖关系。
2. React框架React是一个由Facebook维护和支持的开源JavaScript库，用于构建用户界面。
React框架的主要特点包括：•组件化：React将应用视为一系列组件的集合，通过组件化的设计可以轻松地重用和维护代码。
•Virtual DOM：通过使用虚拟DOM的技术，React可以减少对实际DOM的操作，从而提高应用的性能。
•单向数据流：React框架使用单向数据流的模式，让数据的流动更加可控和可预测。
3. Vue框架Vue是一个由尤雨溪维护和支持的开源JavaScript库，用于构建用户界面。
Vue框架的特点包括：•轻量级：Vue框架体积小，加载速度快，非常适合构建轻量级的应用。
•渐进式框架：Vue框架可以逐步应用到项目中，即使是已有的项目也可以很容易地加入Vue框架。
•响应式：Vue框架支持响应式的设计，当数据发生变化时，视图会相应地进行更新。
4. 前端框架选择建议以上三种前端框架各自具有特点和优势，选择合适的前端框架应该考虑以下几点：•开发者技能和经验：如果团队中已有成员对某个前端框架比较熟悉，那么选择该框架可能会更容易进行开发和维护。
•项目需求：不同的项目对于前端框架的要求可能不同，比如性能要求、支持的功能等，需要考虑项目的实际需求来选择前端框架。
AngularJS笔记
框架：优秀的可以重复使用的代码，单独提取并封装，提高代码的服用了、开发速度，并保证良好的浏览器的兼容性。
angularJS、phoneGap、Ionic、ZeptoJS、React。
判断框架：①它适用的场景②如何使用③遇到了问题怎么解决(维基百科、官网、论坛（stackoverflow）)一、常用的设计原则和设计模式1、设计原则（明确）①YANGI（You aren't gonna need it）不写不需要的代码②KISS（Keep it simple and stupid）代码越简单越好③DRY（Don't Repeat Yourself）封装代码④高内聚低耦合内聚：一个模块内部的不同部分之间的关系耦合：不同模块/组件的关系⑤SRP(single responsibility principle) 单一责任原则⑥OCP（open closed principle）开闭原则对扩展开放对修改关闭⑦LCP（least knownledge principle）最少知识法则2、设计模式（23种了解）总体来说设计模式分为三大类：①创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
②结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
③行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
经常用到的设计模式：工厂方法模式、单例模式、适配器模式、解释器模式、观察者模式MVC、MVVM、MVP。
--》终极目标：模块化和复用MVC：Model（模型数据）、View（视图）、Controller（控制器）遥控器--》控制器：数据的增删改查的操作电视--》View：展示数据光缆--》Model：模型数据why MVC？解耦（降低代码的耦合度）、职责的切分。
angular入门学习文档之一
angular⼊门学习⽂档之⼀⼀、数据双向绑定angular（下⾯统⼀简称ng）强⼤的地⽅莫过于它内置的数据双向绑定功能，下⾯我们通过⼀个简单的例⼦来演⽰ng强⼤的双向绑定数据的能⼒。
代码如下：1、dom结构：1.<!DOCTYPE html>2.<html lang="en" ng-app="myApp">3.<head>4. <meta charset="UTF-8">5. <title>Document</title>6. <script src="js/angular.js"></script>7.</head>8.<body>9. <form ng-controller="userInfoCtrl">10. <input type="text" ng-model="">11. {{}}12. <p ng-bind="userInfo.age"></p>13. </form>14.15.</body>16.</html>2、js代码：1.var app = angular.module('myApp',[]);2. app.controller('userInfoCtrl',function($scope){3. $erInfo = {4. name: '张三',5. age: '18'6. }7. })8. app.controller('userInfoCtrl',['$scope',function($scope){9. $erInfo = {10. name: '张三',11. age: '19'12. }13. }])上⾯的例⼦简单的实现了ng的双向绑定功能，那么到底是怎么实现的呢？1、先加载angular.js⽂件；2、在根节点html上（也可以是其他任何⼀个节点，在哪⾥添加，ng的边界就在哪⾥产⽣）添加ng-app指令，它会告诉浏览器，从这个地⽅开始，⾥⾯的内容都⽤ng去解析渲染；3、给form添加ng-controller，这是添加控制器（也可以叫作⽤域）的指令，它的作⽤是创建⼀个隔离的$scope对象,什么是$scope?提到$scope，还得先从$rootscope说起，$rootScope是ng中最接近全局作⽤域的对象。
angularJs笔记
});
</script>
</body>
5、调用指令的方式
你可以通过以下方式来调用指令：
元素名
<runoob-directive></runoob-directive>
属性
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
3、什么是 AngularJS？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
AngularJS控制器
ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
4、创建自定义的指令
angular学习笔记（二十）-表单验证
angular学习笔记（⼆⼗）-表单验证本篇主要介绍angular中的表单验证:表单验证主要有以下⼀些内容:1. required指令: 相当于html5的required属性,验证不能为空2. ng-maxlength属性: 验证内容的长度最⼤值3. ng-minlength属性: 验证内容的长度最⼩值4. 表单名.$valid : 这个属性⽤来获取表单验证的状态,如果所有的验证都通过了,它就是true,只要有⼀项不通过,它就是false5. ng-disabled属性: 判断按钮是否禁⽤. 值为true时,禁⽤该按钮6. type属性: type="email" , type="number" ,虽然这些都是html5的属性,但是在angular中⽤法⼀致,可以兼容不⽀持html5的浏览器,实现相同的功能下⾯来看⼀个简单的表单验证的例⼦:在还没有填写任何信息的时候,提交按钮是禁⽤的,昵称不能为空 \ 邮箱需要符合邮箱相关格式 \ 年龄在1-3位数之间数字全部通过验证后,提交按钮不禁⽤.提交成功后,显⽰成功提⽰代码如下:<!DOCTYPE html><html ng-app="FormValidation" id="ng-app"><head><title>17.1表单验证</title><meta charset="utf-8"><script src="../angular.js"></script><script src="script.js"></script><style type="text/css">*{font-family:'MICROSOFT YAHEI';font-size:12px}h3 {color:#CB2027}</style></head><body><div><form name="signUp" ng-controller="myform"><h1>注册:</h1><h3 ng-show="message">{{message}}</h3><span>昵称:</span><span><input type="text" ng-model="" required/></span><br><span>邮箱:</span><span><input type="email" ng-model="user.email" required/></span><br><span>年龄:</span><span><input type="number" ng-model="user.age" required ng-maxlength="3" ng-minlength="1"/></span><br><button ng-disabled="!signUp.$valid" ng-click="addUser()">提交</button></form></div></body></html>var formValidation = angular.module('FormValidation',[]);formValidation.controller('myform',function($scope){$er = {name:'',email:'',age:''};$scope.message = "";$scope.addUser = function(){//把数据存⼊数据库$scope.message = "提交成功,欢迎您,"+$;}});下⾯讲解⼀下这段代码:①<form name="signUp" ng-controller="myform"><button ng-disabled="!signUp.$valid" ng-click="addUser()">提交</button>表单需要有⼀个名字,signUp.$valid就是这个表单的验证状态,这个状态决定了button按钮是否禁⽤.当所有的验证都通过时,signUp.$valid值就是true,否则,就是false②<button ng-disabled="!signUp.$valid" ng-click="addUser()">提交</button>ng-disabled属性⽤于绑定元素是否禁⽤,如果是true就禁⽤, false则不禁⽤.③required添加该指令的元素,表⽰需要被验证.<input type="text" ng-model="" required/>普通的text⽂本input,只验证是否为空<input type="email" ng-model="user.email" required/>type为'email'的input,验证是否为邮箱格式<input type="number" ng-model="user.age" required ng-maxlength="3" ng-minlength="1"/>type为'number'的input,验证是否为数字④<input type="number" ng-model="user.age" required ng-maxlength="3" ng-minlength="1"/>ng-maxlength 和 ng-minlength 属性,验证内容的长度⑤<h3 ng-show="message">{{message}}</h3>ng-show的值,不⼀定要是true或者false,这⾥的message为空的时候,就会是false,有值的话就是true.所以,当message不为空的时候,h3就会被显⽰出来打开时的页⾯:当全部正确填写后,按钮不再被禁⽤:点击提交后显⽰成功提⽰:。
angular8大地老师学习笔记
angular8⼤地⽼师学习笔记第⼀课：angular 创建项⽬命令： ng new 项⽬名称创建组件： ng g 可查看所有创建的对象，ng g component components/home 创建组件，后⾯跟的是组件的路径，最后⽣成的⽬录是app/componetns/home/xxxx各种⽂件第四课：[ngClass]="{ 'green' : status==1 , 'red' : status==0 }" 添加类，当status=1的时候添加green，当status=0的时候添加red[ngStyle]="{'background-color':'green'}" 加判断的 [ngStyle]="{ 'background-color' : username === 'zxc' ? 'green' : 'red' }"第五课：在component.ts ⾥⾯获取页⾯表单数据：let username = document.getElementById( 'username' );表单双向绑定需要引⼊的模块有：import { NgModule } from '@angular/forms';import { FormsModule } from '@angular/forms';页⾯中使⽤⽅法：姓名：<input type="text" id="username" [(ngModel)]="ername" value="fonm_input" />-------------------------性别：<input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"> <label for="sex1">男 </label> <input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"> <label for="sex2">⼥ </label>-------------------------城市：<select name="city" id="city" [(ngModel)]="peopleInfo.city"><option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option></select>-------------------------爱好：<span *ngFor="let item of peopleInfo.hobby;let key=index;"><input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"/> <label [for]="'check'+key"> {{item.title}}</label></span>-------------------------在html页⾯中打印对象的⽅法： {{peopleInfo | json}}第⼋课：1、模板中给dom起⼀个名字<div #myBox>我是⼀个dom节点</div>2、在业务逻辑⾥⾯引⼊ViewChildimport { Component, OnInit,ViewChild} from '@angular/core';3、写在类⾥⾯ @ViewChild('myBox') myBox:any;4、ngAfterViewInit⽣命周期函数⾥⾯获取domthis.myBox.nativeElement第九课：⽗⼦组件以及组件之间的通讯。
angular2学习笔记（unittest单元测试）
angular2学习笔记（unittest单元测试）更新 2018-06-03spy object当组件或则服务有对其它服务依赖的时候，我们通常会把这些依赖写成 spy 或则叫 fake.为什么这样做的呢？主要的原因是我们不应该依赖具体的代码，假设具体的代码错了，我们这个服务也会跟着报错.所以单元测试的 "单元"，就是说我们必须把我们要测试的东西独⽴放到⼀个测试环境⾥头，对外部任何依赖都做隔离.如果报错，那么⼀定是它错了，绝对不能是因为被其它⼈影响⽽报错. 所以我们必须把依赖的服务都写成 spy.describe('SecondService', () => {let firstServiceSpy: jasmine.SpyObj<FirstService>; // 定义依赖的服务beforeEach(() => {firstServiceSpy = jasmine.createSpyObj('firstService', ['getValue']); //创建假的服务firstServiceSpy.getValue.and.returnValue('firstValue'); // 直接设定返回的结果 (这样不管这个服务的具体实现正不正确, 我们都不会被影响到)TestBed.configureTestingModule({providers: [SecondService,{ provide: FirstService, useValue: firstServiceSpy } // 替换掉 provide 就可以了]});});it(`getValue should return 'firstValueSecondValue'`, inject([SecondService], (secondService : SecondService) => {expect(secondService.getValue()).toBe('firstValuesecondValue');}));});第⼀次写单元测试.以前⼀直都有听说 TDD 的事情.今天总算是去尝试了⼀下.先说说 TDD 的想法, 是这样的,开发项⽬的流程 : 确定需求 -> 写类,接⼝,⽅法的名字(不写具体实现代码哦) -> 写测试代码 -> 这时测试的话⼀定是全部 fail 因为实现代码还没写嘛 -> 写实现代码 -> 运⾏测试 ...这样的流程适合需要敏捷开发的项⽬, 如果你的项⽬经常需要扩展, ⽽且扩展往往是不在预计范围内的, 那么你必然需要使⽤敏捷开发模式和流程.也只有把测试写好，以后代码修改了以后才不需要⼈⼯的再去测试⼀遍.倒过来看的话，如果你的项⽬逻辑简单，扩展总是在预计范围呢, 那么你硬去搞敏捷开发写测试代码的话，就有点浪费了.angular 框架⽀持测试. 使⽤ karma , jasmine, cli 来跑。
爱创课堂 前端教程angular教程 课堂笔记 复习
爱创课堂前端教程angular教程课堂笔记复习复习$timeout 定时器服务跟setTimeout使用方式一模一样在他的回调函数中，我们可以对作用域定义数据$http 异步请求的服务（支持允诺对象语法，我们可以通过同步书写方式来定义异步请求）参数是一个对象Url定义地址Params定义get请求的参数的参数Date 定义post请求的参数Method定义请求的方法，GET，POSTSuccess 请求成功时候的回调函数参数是一个函数，有四个参数第一个参数表示请求的返回数据第二个参数表示请求的状态码第三个参数是一个函数第四个参数表示异步请求的配置信息Then （允诺对象的标准方法）参数是一个对象对象中的data属性与success方法区别是，定义多个方法时候，then只有第一个定义时候有参数Error 请求失败的时候回调函数Get 对$http服务的get请求的一个简写第一个参数是请求地址第二个参数是请求配置Post 对$http服务的post请求的一个简写第一个参数表示请求地址第二个参数表示携带的数据第三个参数表示请求的配置定义自定义服务（factory，service）第一个参数表示服务名称第二个参数表示处理函数作用域是空对象参数默认没有，必须通过参数注入的方式注入进来Factory 通过返回值定义服务接口的通过this定义的接口是无效的Service 通过this定义接口方法如果通过return时候，this是无效的指令时为元素定义服务视为控制器定义路由ngRoute 为页面定义路由的（前端路由，通常来说是通过hash来定义的）使用路由步骤第一步要引入插件文件第二步在页面中的dom上定义这个指令ng-view第三步在module依赖模块集合中引入进来，ngRoute第三步在config中定义路由的配置Config方法是在整个页面中最先执行（先于run）$routeProvider 提供ngRoute服务的，When 定义路由配置的第一个参数表示路由的地址（必须/开头的）第二个参数是路由对象Template定义模板（templateUrl引入外部文件定义模板）Controller定义控制器Otherwise 定义默认路由，参数是一个对象redirectTo定义重定向的路由路由参数静态参数语法/name动态参数语法/:name动态路由参数是可以在控制器中获取的到的，通过注入$routeParams $routeParams 提供动态路由参数它是一个对象，属性值就是参数的名称（定义路由配置时候定义名称）属性值就是参数的值（页面hash上的真实值）事件作用域的$on方法来定义，通常定义在跟作用域上通过$on注册事件第一个参数表示事件名称，第二个参数表示事件回调函数$routeChangeStart 路由改变之前触发的事件$routeChangeSuccess路由改变成功时候的事件$routeChangeError 路由改变失败时候的事件事件回调函数参数有两个第一个表示事件对象第二个参数表示路由对象$location 提供的是一个路由服务，通过$location我们可以获取路由上的一些信息Js中location对象是包含整个uri上的信息,$location主要负责的是hash上的信息Path 更改或者获取路由地址的传递一个参数，此时是设置路由地址不传递参数，此时是获取路由地址的Ui.router（ui模块上的一个子模块）使用第一步引入uirouter插件第二步在视图中通过ui-view定义路由视图指令第三步在module依赖集合中定义ui.router第四步在config中定义路由配置$stateProvider 提供定义状态的服务State 定义状态的一个方法（一个状态就是一个路由）第一个参数表示状态名称（定义命名空间的）第二个参数表示状态对象Url定义路由地址Template定义模板（templateUrl）Controller定义控制器值是一个函数（就是控制器函数）值是一个字符串（控制器的名称，要定义这个名称的控制器）Views 定义是视图的，它是一个对象对象的属性名称表示页面中ui-view指令的值对象的属性值表示是一个路由对象$urlRouterProvider 定义默认路由，重定向路由When 重定向路由第一个参数表示当前的路由第二个参数表示重定向的路由Otherwise定义默认的路由参数就是默认路由的值路由参数静态参数/name动态参数/:name定义参数类型/{name:type} type既可以是date，string，int，还可以是正则定义query参数?Query1&query2定义query参数类型{query:type}注意动态参数和query参数的区别是：动态参数一定要写在url上Query参数可以写在url上也可以不写$statePrams是一个对象对象的属性表示状态中路由参数名称（动态参数，query参数，包括这两种定义了类型的参数，不能捕获静态参数）子视图在ui路由中可以实现路由的嵌套子路由必须在父路由中，通过ui-view指令定义的是要通过state的命名空间定义$stateChangeStart$stateChangeSuccess$stateChangeError他们的回调函数有5个参数第一个参数表示路由事件第二个参数表示当前路由对象第三个参数表示当前路由参数对象第四个参数表示前一个路由对象第五个参数表示前一个路由参数对象作用域就是window。
ionic+angularjs 学习笔记
属性：ng-click = ”go(“html1”)”; 可直接跳到页面href="#/tab/systemIntro"ui-sref="ers"标签：顶部：<ion-header-bar>...</ion-header-bar><ion-header-bar align-title="center" class="bar-positive" no-top-scroll=”true”><h1 class="title">ion-header-bar</h1></ion-header-bar>以上功能，顶部块标题居中内容不允许点击标题滚动到顶部属性：align-title = ”left/center/right”; 标题显示位置(顶部)no-top-scroll = ”true/false”true:不允许点击标题滚动到顶部false：默认，允许点击标题回到顶部底部：<ion-footer-bar>...</ion-footer-bar><ion-footer-bar class="bar-positive"><h1 class="title">ion-footer-bar</h1></ion-footer-bar>属性：align-title = ”left/center/right”; 标题显示位置(顶部)ion-header-bar和ion-footer-bar经过编译后其样式类将分别被设置为.bar.bar-header 和.bar.bar-footer内容：使用ion-content指令定义内容区域：<ion-content>...</ion-content>占据header和footer以外的剩余区域。
angularjs笔记
AngularJS 扩展了HTMLAngularJS 通过ng-directives扩展了HTML。
ng-app指令定义一个AngularJS 应用程序。
ng-model指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind指令把应用程序数据绑定到HTML 视图。
AngularJS 实例<!DOCTYPE html><html><head><meta charset="utf-8"><script src="/libs/angular.js/1.4.6/angular.min. js"></script></head><body><div ng-app=""><p>名字 : <input type="text"ng-model="name"></p><h1>Hello {{name}}</h1></div></body></html>创建自定义的指令除了AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用.directive函数来添加自定义的指令。
要调用自定义指令，HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，runoobDirective, 但在使用它时需要以-分割, runoob-directive:AngularJS 实例<body ng-app="myApp"><runoob-directive></runoob-directive><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() {return {template : "<h1>自定义指令!</h1>"};});</script></body>验证用户输入AngularJS 实例<form ng-app=""name="myForm">Email:<input type="email"name="myAddress"ng-model="text"><span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span></form><!DOCTYPE html><html><head><meta charset="utf-8"><script src="/libs/angular.js/1.4.6/angular.min.js"></script></head><body><form ng-app="" name="myForm">Email:<input type="email" name="myAddress" ng-model="text"><span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span></form><p>在输入框中输入你的游戏地址，如果不是一个合法的邮箱地址，会弹出提示信息。
angularjs学习笔记—工具方法 - SegmentFault
注意：bind会根据你的参数类型来决定调用call或apply，所以args可以是一个个数据，也可以是 一个数组哦。
angular.copy(source, [destination])
作用：对象的深拷贝
/a/1190000002625738 1/8
2015/9/11ang来自larjs学习笔记—工具方法 - SegmentFault
参数： source ：源对象 destination ：拷贝的对象 返回值：拷贝的对象
v a ro b j={ n a m e :' x x x ' , a g e :5 0 } ;
v a rc o p y O b j=a n g u l a r . c o p y ( o b j ) ; c o n s o l e . l o g ( c o p y O b j ) ;/ / $O b j e c t{ n a m e :" x x x " ,a g e :5 0 }
angular.equals(o1, o2)
作用：正常比较和对象的深比较 参数： o1：比较的对象 o2：比较的对象 返回值：boolean
a n g u l a r . e q u a l s ( 3 ,3 ) ;/ / $t r u e a n g u l a r . e q u a l s ( N a N , N a N ) ;/ / $t r u e a n g u l a r . e q u a l s ( { n a m e : ' x x x ' } , { n a m e : ' x x x ' } ) ;/ / $t r u e a n g u l a r . e q u a l s ( { n a m e : ' x x x ' } , { n a m e : ' y y y ' } ) ;/ / $f a l s e
angular指令笔记ng-options的使用方法
angular指令笔记ng-options的使⽤⽅法1、ng-options指令⽤途：在表达式中使⽤数组或对象来⾃动⽣成⼀个select中的option列表。
ng-options与ng-repeat很相似，很多时候可以⽤ng-repeat 来代替ng-options。
但是ng-options提供了⼀些好处，例如减少内存提⾼速度，以及提供选择框的选项来让⽤户选择。
当select 中⼀个选项被选择，该选项将会使⽤ng-model⾃动绑定到对应数据上。
如果你想设⼀个默认值，可以像这样：$scope.selected = $scope.collection[3]。
1.1 track by的⽤途：track by主要是防⽌值有重复，angularjs会报错。
因为angularjs需要⼀个唯⼀值来与⽣成的dom绑定，以⽅便追踪数据。
例如：items=[“a”,“a”,“b”],这样ng-repeat=“item in items”就会出错，⽽⽤ng-repeat=“(key,value) in items track by key”就不会出现错误了。
1.2 ng-option使⽤注意使⽤时候，必须加 ng-model 指令，否则⽆法使⽤会报错2、select下拉框中label和value分别代表什么先写个最简单最原始的select下拉框<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>label 和 value 具体是什么</title></head><body><select><!--value 是存储到数据库中的值，label是显⽰在页⾯上的值value 就是 1、2、3、4这些数值；lable 是"语⽂" “数学”这些 --><option value="1">语⽂</option><option value="2">数学</option><option value="3">英语</option><option value="4">⽣物</option></select></body></html>现在引⼊ angular 使⽤ ng-options 指令来⽣成⼀个下拉框，看下⽣成页⾯的代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>label 和 value 具体是什么</title><script type="text/javascript" src="../js/angular-1.3.0.js"></script></head><body ng-app="myapp"><div ng-controller="mainCtrl"><select><!--value 是存储到数据库中的值，label是显⽰在页⾯上的值value 就是 1、2、3、4这些数值；lable 是"语⽂" “数学”这些--><option value="1">语⽂</option><option value="2">数学</option><option value="3">英语</option><option value="4">⽣物</option></select><br><br><div>{{ selectedCity }}<br><!-- 这⾥ c.id as c.city for c in obj 我们使⽤ obj 对象的 id作为select的value，使⽤obj 的city 作为 select 的label --><select ng-options="c.id as c.city for c in obj" ng-model="selectedCity"></select></div></div><script type="text/javascript">var myapp = angular.module('myapp', []);myapp.controller('mainCtrl', ['$scope', function($scope) {$scope.selectedCity = "bj";$scope.obj = [{ "id": "bj", "city": "北京" },{ "id": "sh", "city": "上海" },{ "id": "zz", "city": "郑州" }];}])</script></body></html>看下预览的页⾯效果，在后⾯添加的使⽤ ng-options ⽣成的select中，我们使⽤ obj 对象的 id作为select的value，使⽤obj 的city 作为 select 的label3、三种ng-options常⽤⽅法：<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>label 和 value 具体是什么</title><script type="text/javascript" src="../js/angular-1.3.0.js"></script><style type="text/css">.mart30 {margin-top: 30px;border-top: 1px solid #000;}</style></head><body ng-app="myapp"><div ng-controller="mainCtrl"><!--value 是存储到数据库中的值，label是显⽰在页⾯上的值value 就是 1、2、3、4这些数值；lable 是"语⽂" “数学”这些--><option value="1">语⽂</option><option value="2">数学</option><option value="3">英语</option><option value="4">⽣物</option></select><div class="mart30"><h3>演⽰ label 和 value 值的变化</h3> {{ selectedCity }}<!-- 这⾥ c.id as c.city for c in obj 我们使⽤ obj 对象的 id作为select的value，使⽤obj 的city 作为 select 的label --> <select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity"></select></div><div class="mart30"><h3>1. “数组”实现基本下拉</h3><p>语法： laber for value in array</p><select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select><br></div><div class="mart30"><h3>2. “包含对象的数组”实现“label 和 value值不同”的下拉</h3><p>语法： select as label for value in array</p><p>哪位同学你认识？你的选择是：{{selectedStu}}</p><select ng-options=" as c.id for c in obj2" ng-model="selectedStu"></select><br><br><br><p><strong>⾃定义下拉显⽰内容格式</strong></p><p>哪位同学你认识？你的选择是：{{selectedStuString}}</p><p>语法：拼接字符串</p><select ng-options=" as ( +'- 英⽂名：'+c.id) for c in obj2" ng-model="selectedStuString"></select> <br><br><br><p><strong>使⽤group by对下拉菜单分组</strong></p><p>语法：label group by groupName for value in array</p><p>哪位同学你认识？你的选择是：{{selectedStuString2}}</p><select ng-options=" group by c.sex for c in obj2" ng-model="selectedStuString2"></select></div><div class="mart30"><h3>3. “对象”实现基本下拉</h3><p>语法 1： label for (key , value) in object</p><p>哪个城市？你的选择是：{{scity}}</p><select ng-options="key for (key , value) in obj3" ng-model="scity"></select><p>语法 2： select as label for (key ,value) in object</p><p>哪个城市？你的选择是：{{scity01}}</p><select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select></div></div><script type="text/javascript">var myapp = angular.module('myapp', []);myapp.controller('mainCtrl', ['$scope', function($scope) {//定义包含对象的数组 obj1$scope.obj1 = [{ "id": "bj", "city": "北京" },{ "id": "sh", "city": "上海" },{ "id": "zz", "city": "郑州" }];$scope.selectedCity = "bj";// 定义数组$scope.arr1 = ["⼤⽩", "阿狸", "熊猫"];//定义默认为 “⼤⽩”$scope.selectedAnimal = "⼤⽩";//定义包含对象的数组 obj2$scope.obj2 = [{ "id": "lilei", "name": "李雷", "sex": "man" },{ "id": "hanmeimei", "name": "韩梅梅", "sex": "woman" },{ "id": "jack", "name": "杰克", "sex": "man" }];$scope.selectedStu = "韩梅梅";//定义简单对象 obj3$scope.obj3 = {"湖北": "鄂","⼴东": "粤","河南": "豫"};}])</script></body></html>关于对象使⽤⽅法中 key 和 value 的⼀点说明4、ng-options 全部⽤法补充标红部分在代码中已有例⼦，其余的请⾃⾏消化理解测试对于数组：label for value in arrayselect as label for value in arraylabel group by group for value in arraylabel disable when disable for value in arraylabel group by group for value in array track by trackexprlabel disable when disable for value in array track by trackexprlabel for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)对于对象：label for (key , value) in objectselect as label for (key ,value) in objectlabel group by group for (key,value) in objectlabel disable when disable for (key, value) in objectselect as label group by group for(key, value) in objectselect as label disable when disable for (key, value) in object以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
Angular学习笔记（一）
Angular学习笔记（⼀）什么是 Angular：Angular 是⼀个 JavaScript 框架，可通过 <script> 标签添加到 HTML 页⾯，然后通过指令扩展 HTML，且通过表达式绑定数据到 HTML 中Angular 是为了扩展 HTML 在构建应⽤时本应具备的能⼒⽽设计的。
对于静态⽂档，HTML 是⼀门很好的声明式的语⾔，但对于构建动态 WEB 应⽤，它⽆能为⼒。
所以，构建动态WEB应⽤往往需要⼀些技巧才能让浏览器配合我们的⼯作注：粗浅地理解指令就是⼀些附加在 HTML 元素上的⾃定义标记（例如：ng-controller、ng-repeat 等这些原⽣的 HTML 所⽆法识别的语句），表达式是⼀种类似 JavaScript 的代码⽚段，通常在视图中以''的形式使⽤Angular 与其他⼀些模板⽐较：One-Way Data Binding：绝⼤多数模板引擎系统采⽤的是把字符串模板和数据拼接，然后输出⼀个新的字符串，接着在前端将这个新的字符串作为元素的 innerHTML 属性的值==》数据中的改变需重新和模板合并，然后再赋值给 DOM 元素的 innerHTML 属性Two-Way Data Binding：Angular 编译器直接使⽤ DOM 为模板，它的视图和作⽤域数据模型的绑定是透明的==》⽣成了稳定的 DOM 模板注：DOM 元素实例和数据模型实例的绑定在绑定期间是不发⽣变化的，这意味着可以在代码中获取这些 DOM 模板元素并注册相应的事件处理函数，⽽不⽤担⼼这个对 DOM 元素的引⽤会因为数据合并⽽产⽣变化HTML 编译的三个阶段：1、$compile 遍历 DOM 节点，匹配指令： 发现某元素匹配⼀个指令，那么指令就被添加到指令列表中（该列表与 DOM 元素对应），⼀个元素可能匹配到多个指令注：当⼀个页⾯加载时，浏览器⾃动将 HTML 解析为 DOM 树！Angular 的编译是在 DOM 节点上发⽣⽽⾮字符串，当⼿动调⽤ $compile 时，若给它传递⼀个字符串则会报错，需⽤ angular.element 将字符串转化为 DOM2、当所有指令都匹配到相应的元素时，编译器按指令的 priority 属性来排列指令编译顺序： 根据顺序依次执⾏每个指令的 compile 函数，每个 compile 函数有⼀次更改该指令所对应的 DOM 模板的机会，接着，每个 compile 函数 返回⼀个 link 函数，这些函数⼜构成⼀个“合并的”连接函数，它会调⽤每个指令返回的 link 函数3、$compile 调⽤第 2 步返回的连接函数，将模板和对应的作⽤域连接： 依次调⽤连接函数中包含的每个指令对应的 link 函数，进⽽在各个 DOM 元素上注册监听器以及在相应的 scope（作⽤域）中设置 $watch ==》形成⼀个作⽤域和 DOM 绑定的实时视图，任⼀发⽣在已经过编译的作⽤域上的数据模型的变化都反映在 DOM 中注：priority 设置指令的优先级，⼤的先执⾏（默认为 0，⽽ ng-repeat 默认为 1000），$watch 实现页⾯随 model（模型）变化⽽及时更新 DOM 即 Document Object Model（⽂档对象模型）<!doctype html><html><head><meta charset="UTF-8"><script src="https:///angular.js/1.4.6/angular.min.js"></script></head><body><!--设置应⽤名称为 myApp，控制器为 myCtrl--><div ng-app="myApp" ng-controller="myCtrl"><!--ng-model 即为模型，与 scope 中的数据绑定在⼀起-->单价：<input type="number" ng-model="price"><br/>数量：<input type="number" ng-model="nums"><!--{{expression}} 这个就是表达式，它会计算 expression 的值--><br/>应付：<label>{{price * nums}}</label></div><script>var app = angular.module("myApp", []);app.controller("myCtrl", function($scope){$scope.price = 1;$scope.nums = 1;});</script></body></html>View Code初始化： Angular 会找 ng-app 这个指明应⽤开始的指令，若找到，则： 1、加载 ng-app 指令所指定的模块（module） 2、创建应⽤所需的 injector 3、以 ng-app 所在的节点为根节点，开始遍历并编译 DOM 树编译器： Angular 提供的⼀项服务，⽤来遍历 DOM 节点，查找特定的属性 编译过程 2 阶段： 1、编译：遍历 DOM 节点，收集所有的指令，返回⼀个连接函数（link func） 2、连接：将上⼀步收集的每个指令与其所在的作⽤域（scope）连接⽣成⼀个实时视图为什么需要这 2 个阶段： 像 ng-repeat 会为集合中的每个项⽬克隆⼀个 DOM 元素，我们仅需要编译⼀次，再对每个克隆元素进⾏连接，减⼩开销任何作⽤域中的模型改变都会实时地在视图中反映出来，同时任何⽤户与视图的交互则会映射到作⽤域的模型中 ==》作⽤域中的数据模型成为了唯⼀的数据源。
《AngularJS深度剖析与最佳实践》读书笔记模板
3.4脏检查机制
3.4.1浏览器事件循环和Angular的MVW 3.4.2 Angular中的$watch函数 3.4.3 Angular中的$digest函数 3.4.4 Angular中的$apply
3.5指令的生命周期
3.5.1 Injecting 3.5.2 compile和link过程
5.1
1
$timeout的妙
用
5.2
2
ngTemplate
寄宿方式
3 5.3在非独立
作用域指令中 实现scope绑 定
4
5.4表单验证 错误信息显示
5
5.5 Angular 中的AOP机制
5.6 Ajax请求和响 应数据的转换
5.7在代码中注入 Filter
5.8防止Angular表 达式闪烁
5.9实现前端权限控 制
3.9前端安全技术
3.9.1前端攻击的基本原理和类型 3.9.2前端安全与前后端分工 3.9.3移动时代的特殊挑战 3.9.4安全无止境
1
4.1调整开发 协作流程
2
4.2前后端分 离部署
3
4.3样式中心 页
4
4.4 CSS的扩 展语言与架构
5
4.5 HTML的表 意性
4.7测试什么？怎 么测？
精彩摘录
精彩摘录
如今，一个不会Google（以及翻墙），没上过GitHub，不知道Stackoverflow的程序员很难想象会有什么 发展空间。
github/ng-nice/code 让后端只提供跟业务逻辑紧密相关的那部分API，而用户交互等非核心逻辑则交给前端程序来完成。 绝不要先设计你的页面，然后用DOM操作去改变它。❑指令不是封装jQuery代码的“天堂”。 想要获取源码，请执行命令：git clone :ng-nice/code.git， 除下列指令外的内置指令都不需要把值用{{}}包裹起来：ng-src、ng-href以及不太常用的ng-bindtemplate和ng-srcset
Angular项目里angular.json文件内容的学习笔记
Angular项目里angular.json文件内容的学习笔记看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子：•version: The configuration-file version.•newProjectRoot: Path where new projects are created. Absolute or relative to the workspace folder.•defaultProject: Default project name to use in commands, where not provided as an argument. When you use ng new to create a new app in a new workspace, that app is the default project for the workspace until you change it here.•schematics : A set of schematics that customize the ng generate sub-command option defaults for this workspace. See Generation schematics below.•projects : Contains a subsection for each project (library or application) in the workspace, with the per-project configuration options.Angular generation schematics areinstructions for modifying a project byadding files or modifying existing files.Angular 生成原理图是一系列指令，用于通过添加新文件或者修改已有文件的方式来修改一个项目。
Angular6学习笔记——组件详解之模板语法
Angular6学习笔记——组件详解之模板语法angular6.x系列的学习笔记记录,仍在不断完善中,学习地址:系列⽬录(1)(2)(3)(4)(5)章节⽬录1插值语法和表达式2在模板内部定义变量3值绑定,事件绑定,双向绑定4内置结构型指令*ngIf,*ngFor,ngSwitch5内置属性型指令:NgClass,NgStyle6管道与安全导航7导⼊Bootstrap和fontawesomeAngular在模板引擎⾥⾯对这些最基本的东西做了很强的⽀持,所以它的模板表达能⼒是⾮常强的1插值语法和表达式类似前端模板引擎handlebars等的语法能够插⼊定义的变量,简单的加减乘除等数学运算和调⽤⽅法<p>定义的变量:{{str}}</p><p>简单数学运算:1+1={{1+1}}</p><p>调⽤⽅法:{{getValue()}}</p>2在模板内部定义变量我们既可以在组件内部定义变量,也可以模板内部定义变量通过#⾃动⽣成⼀个局部变量,给标签命名,可以在组件内部和模板内部传递<input #inputVal><p>{{inputVal.value}}</p><button class="btn btn-success" (click)="print(inputVal.value)">打印</button>3值绑定,事件绑定,双向绑定值绑定在模板内部,⼀些标签的某些属性不是固定的,会根据不同的情形变化,例如照⽚的src属性,我们可以通过值绑定(⽤[]表⽰),将它绑定到变量上,随着变量值的改变⽽改变事件绑定在模板内部,某些操作会触发事件,例如点击按钮我们可以通过事件绑定(⽤()表⽰),将它绑定到指定事件上<img [src]="imgSrc" /><button (click)="changeImgSrc()">将事件changeImgSrc()绑定到button上来,修改imgSrc变量的值,改变img标签通过值绑定的src属性的值</button>双向绑定什么是双向绑定呢?指的是界⾯的操作能实时反映到数据，数据的变更能实时展现到界⾯。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1、从开发者的角度，jqLite最明显的精简是不支持选择符。
你只能向angular.element 传入一个DOM对象。
看起来AngularJS将这部分功能让位给浏览器原生的支持了，我们可以先使用浏览器的querySelector获得一个DOM对象：如果某种原因你不愿意使用jqLite，也可以在AngularJS之前引入jQuery库。
AngularJS自动地将jqLite升级成jQuery，angular.element等同于$ 。
这样又可以使用熟悉的选择符了。
•扩展的方法jqLite包括一些额外的方法以适应AngularJS框架：•controller(name) - 获得元素对应的控制器对象•injector() - 获得元素对应的注入器对象•scope() - 获得元素对应的作用域对象•isolateScope() - 获得元素对应的隔离作用域对象，如果有的话。
•inheritedData() - 和data()一样，但如果当前元素没有指定的数据，会向上级节点继续找。
•扩展的事件jqLite还提供一个$destroy事件，当DOM对象被从DOM树删除时，AngularJS将触发这个事件，以便指令进行一些善后清理工作。
2、重写示例：模板、指令和视图AngularJS最显著的特点是用静态的HTML文档，就可以生成具有动态行为的页面。
还是前面的小时钟示例，我们使用AngularJS模板来重写，示例已经嵌入→_→：HTML文件看起来像普通的HTML，只是其中多了一些特别的标记（比如：ng-app,ez-clock等等）。
在Angular中，这个HTML文件被称为模板。
ng-app这样的标记我们称之为指令。
模板通过指令指示AngularJS进行必要的操作。
比如：ng-app指令用来通知AngularJS自动引导应用；ez-clock指令用来通知AngularJS 生成指定的时钟组件。
当AngularJS启动应用时，它会通过一个编译器解析处理这个模板文件，生成的结果就是：视图：我们定义了两个部件：模板（包含指令的HTML文件）和指令实现（JavaScript文件），AngularJS将这两部分拼装起来，生成了最终的视图。
使用指令封装JavaScript代码我们在模板中使用了一个自定义的标签ez-clock，而它变成了一个会动的时钟，这期间发生了什么事情?肯定不是浏览器干的，它不认识ez-clock是什么东西。
angular.min.js引入了基本的angularJS库，它会在浏览器载入HTML文档并且建立好DOM树后，执行以下操作：1.找到有ng-app属性的DOM节点2.以这个节点为根节点，搜索自定义指令，发现ez-clock3.调用ez-clock指令的实现函数（指令类工厂）进行展开根据我们的定义，ez-clock的展开操作如下：1.使用一个div元素替换这个自定义标签2.创建一个定时器，在定时器触发时刷新div元素的innerTextez-clock这样的非HTML标准标签，在AngularJS中之所以称为指令/directive，就是指看到它时，基础框架需要对其进行解释，以便展开成浏览器可以理解的东西（HTML元素和脚本），而这个解释的过程被称为：编译。
可见，AngularJS框架要求将HTML文档和JavaScript代码分割的更清晰，通常混杂在HTML文档中的JavaScript代码，需要以指令的形式进行封装，而模板、指令实现代码这两个部件，则由基础框架负责拼装运行。
将指令看做API将DOM操作封装成指令，更容易进行分工与代码复用。
由于AngularJS更清晰地界定了一个WEB应用的组成部分，这样，在一个团队中，可以有人负责实现指令，有人负责开发模板，各自干擅长的事情，效率更高，成本更低。
当然，从编写界面HTML模板的角度看，诸如ez-clock之类的指令比div更具有语义性，使模板更容易维护，使指令的实现升级不影响模板，这也是不小的好处了。
与我们所熟悉的对象、函数这类接口完全不同，指令算是一种新型的API，它提供了在静态化的HTML文件中，植入动态行为的能力：定义自己的指令AngularJS内置的指令不能完全满足实际开发的需要，通常我们需要定义自己的指令：•增强标准DOM元素的行为比如，希望一个DOM元素是可拖拽的，那么可以这样写：1.<p ez-draggable='true'>...</p>通过ez-draggable指令，我们赋予DOM元素可拖拽的能力。
•自定义组件比如，我希望一个图片裁剪功能，那么可以这样写：1.<ez-photoshop src='a.jpg'></ez-photoshop>通过ez-photoshop指令，我们定义了一个包含交互行为的web组件。
•封装其他组件库这不是AngularJS鼓励的方向，但是确实有强劲的需求。
起点：声明化基于前面的示例，我们容易感受到使用AngularJS进行应用开发的一个重要的思维模式：从构造声明式界面入手。
事实上，我猜测这也是Misko开发AngularJS最初的动机。
稍早一些的Flex、WPF 和Firefox 的XUL，或多或少给了Misko启发。
在使用AngularJS进行前端开发时，始终应该从构造声明式界面模板开始，如果现成的指令不够用，那么就定义自己的指令、实现自己的指令。
这是一个迭代的过程。
记住，指令是新型的API，用界面的声明化作为需求，来指导我们的代码封装。
3、作用域/Scope将数据传递给指令一个容易想到的方法，就是给指令ez-namecard增加一个属性，用这个属性的值指定数据对象的变量名称。
这相当于，用属性向指令（解释器）传递参数：这样的话，ez-namecard的解释器只要检查data属性，然后执行一个eval()就可以获得sb的值，从而将其内容填充到展开的div片段中。
作用域/Scope不过，请注意，前面定义的sb变量，默认是挂在window对象（命名空间）上的，即window.sb。
如果所有的数据都挂在window上，保不齐哪天就会出现变量的命名冲突。
AngularJS引入了一个自用的命名空间，也就是$rootScope对象，这样sb变量就可以挂在$rootScope上了，即$rootScope.sb。
引入了scope的代码参见→_→。
在HTML模板中，我们用了两个内置指令：•ng-app指令会在启动引导时创建一个$rootScope对象。
•ng-init指令用来在作用域上初始化变量，这个指令将在$rootScope上建立sb 对象。
在指令的实现代码中，与之前使用eval函数进行表达式估值不同，我们直接使用scope的$eval方法获得sb变量的值。
你可能注意到，这个scope是link函数传入的参数，它和我们说的$rootScope是一个东西吗？？？？层级的作用域在AngularJS中，ng-app开始的DOM子树上，每个DOM对象都有一个对应的scope 对象。
比如，在我们的示例中，body对象对应一个scope对象（因为body元素有ng-app属性，所以这个scope就是$rootScope对象），ez-namecard对象也对应一个scope对象....在默认情况下，一个DOM子元素不会创建新的作用域，也就是说，这个子元素所对应的scope对象，其实就是它的最近一级的祖先对象对应的scope对象。
比如，在我们的例子中，ez-namecard对应的scope对象，就是它的父对象即body对象的scope对象，恰好也就是$rootScope对象；而ez-namecard有3个div子元素对应的scope对象，也是$rootScope对象。
有些指令会导致创建新的作用域，比如ng-controller。
如果在一个DOM对象上创建了新的作用域，那么这个scope对象的原型是其最近一级的组件对象的scope对象比如在我们的例子中，如果在ez-namecard上使用ng-controller指令，那么ez-namecard 对应的scope对象就不再是body对应的$rootScope对象，但是由于是原型继承，所以通过这个scope依然可以访问到sb变量。
4、监听数据的变化我们已经实现了将数据显示到界面上，不过这还不够。
由于编译仅仅在启动引导时执行一次，这意味着我们的link函数只会被调用一次，那么，如果数据变化，在界面上将不会有任何反馈，即界面和数据将变得不同步了。
这需要持续监听数据的变化。
好在AngularJS的scope对象可以使用$watch()方法，对建立在其上的变量的变化进行监听：$watch方法要求传入三个参数：•watchExpression - 要监听的表达式，比如："sb"•listener - 变化发生时的回调函数，AngularJS将向这个函数传入新值和旧值•objectEquality - 如果监听表达式的值是一个对象，应当将这个参数置为true。
→_→是经过改进后的代码，当数据被改变时，界面会自动得到更新。
这时，我们称，建立了从数据到界面的单向绑定。
为了验证这一点，在代码中我们追加了一个定时器自动更新数据的age值。
5、如何修改数据一旦在指令的实现代码中可以访问数据模型，那么使用声明式模板实现数据修改也非常简单了。
我们定义一个新的指令：ez-namecard-editor，意图让其展开成这样：在ez-namecard-editor的指令实现中，为了用input中的值自动更新sb变量中的值，我们需要在给input对象挂接上监听函数（示例中使用keyup事件），在监听函数中实现对sb变量的修改。
最终的效果是，用户在界面上进行的操作，自动地同步到了我们的数据。
这时，我们称，已经建立了从界面到数据的单向绑定。
ev.target.getAttribute获取的是field属性对应的值。
这样，当我们通过ez-namecard-editor修改数据时，可以同步地看到变化后的内容。
parse用于从一个字符串中解析出json对象,如json对象和对象是有一些不同的。
7、数据变化的传播数据绑定有两个方向：•数据→ 界面：我们使用scope对象的$watch()方法监听数据的变化，来更新界面。
•界面→ 数据：我们在界面的DOM对象上监听变化事件，来更新数据，并通过$apply()方法传播变化。
上面的图中，我们把ez-namecard和ez-namecard-editor都绑定到同一个sb对象上，那么在ez-namecard-editor上进行编辑，将导致sb对象发生变化；由于ez-namecard 监听了这个变化，所以，ez-namecard的显示也应该变化。