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"是模块的名字，[]表示当前这个模块的依赖为空。
不需要依赖别人。
var app=angular.module("app",[]);</script></body></html>所有的angular程序，都是通过angular.module()定义一个模块开始的。
模块的定义有两个参数，第一个参数是模块名字（字符串），第二个参数是依赖项（数组）。
在html上书写ng-app="app"这个ng表示angular，所有ng-开头的html标签属性，我们称为“指令”。
在body里面，写上<h1>{{1+2}}</h1>我们叫做angular表达式，和模板引擎特别像，你会发现，算术被计算了：我们说，app.module("app",[]);的声明的名字，一定要和ng-app="app"要一致，否则抛出一个错误：一个页面上只能出现一个ng-app指令，这就是angular运行的地盘。
用我们的案例说明，angular的地盘已经大到了整个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"是模块的名字，[]表示当前这个模块的依赖为空。
不需要依赖别人。
var app=angular.module("app2",[]);</script></body></html>1.2引入控制器angular中有四大金刚：控制器、服务、路由、指令。
他们都是通过“装饰器模式”来定义的。
比如命令小明现在穿上红裙子，普通语句：小明.衣服=红裙子但是在装饰器模式下是：小明.衣服(红裙子)注意这里的方法，和我们之前认为的方法名字应该是动词不同，比如小明.唱歌()。
这里不是命令小明做“衣服”这个事儿，而是程序采用了装饰器的模式语法，让小明穿上红裙子。
angular用下面的语句来定义控制器：app.controller();例子：<!DOCTYPE html><html lang="en"ng-app="app"><head><meta charset="UTF-8"><title>angular学习</title></head><body><h1>{{1+2}}</h1><div ng-controller="MainCtrl as mainctrl"><h1>{{mainctrl.a}}</h1></div><script type="text/javascript"src="js/angular.min.js"></script><script type="text/javascript">//定义模块，"app"是模块的名字，[]表示当前这个模块的依赖为空。
不需要依赖别人。
var app=angular.module("app",[]);//定义控制器，控制器使用“装饰者模式”来定义。
注意，定义的是控制器的类。
app.controller("MainCtrl",[function(){this.a=100;}]);</script></body></html>我们定义了一个控制器叫做MainCtrl，这是一个控制器类，所以名字我们采用首字母大写的方式。
第一个参数就是类的名字。
第二个参数是一个数组！Angular采用了“依赖注入”的模式定义所有的四大金刚。
在明天，我们将学习“服务”，定义的服务就是写在数组内被“依赖注入”到了函数中。
注入项可以无限多个，所以这里使用了数组。
所有的服务将依次罗列在数组中，而我们定义的控制器类的构造函数，必须出现在数组的最后一项。
app.controller("MainCtrl",["aService","bService",function(aService,bService){ this.a=100;}]);接下里就可以在HTML页面上用ng-controller=""指令，来实例化一个控制器。
<div ng-controller="MainCtrl as mainctrl"><h1>{{mainctrl.a}}</h1></div>实例化的语法：ng-controller="类名as实例名";此时这个控制器能“控制”的范围就是这个div标签。
出了这个div，就不行了。
{{mainctrl.a}}表示读取mainctrl对象身上的a属性！由于你的控制器中定义的this.a=100，所以在构造函数中为实例添加了a属性值为100。
于是：我们增加两个按钮，分别是减少、增加功能：<div ng-controller="MainCtrl as mainctrl"><h1><button ng-click="mainctrl.minus()">-</button>{{mainctrl.a}}<button ng-click="mainctrl.add()">+</button></h1></div>监听我们通过ng-click来添加，这是一个新的指令。
点击之后做的事情是mainctrl身上定义的minus函数和add函数。
于是要在控制器中定义这两个函数：<script type="text/javascript">//定义模块，"app"是模块的名字，[]表示当前这个模块的依赖为空。
不需要依赖别人。
var app=angular.module("app",[]);//定义控制器，控制器使用“装饰者模式”来定义。
注意，定义的是控制器的类。
app.controller("MainCtrl",[function(){this.a=100;var self=this;this.minus=function(){self.a--;}this.add=function(){self.a++;}}]);</script>1.3Angular简介网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。
MV*迫在眉睫……AngularJS应运而生，它是一个优秀的MVVM前端框架，诞生于2009年，由Misko Hevery等人创建，后为Google收购，已经被用于Google的Google Docs、Google Mail等产品中。