AngularJS

AngularJS第一课 AngularJS AngularJS指的是angular1.x框架，Angular一般指的是2、4 angularjs是什么 logo angularjs是一个javascript framework，一个js的框架，帮助我们创建WebApplication AngularJs是由谷歌公司创建，遵循MIT协议，开源开放。 网址：https://angularjs.org/ 中文网：http://www.apjs.net/ 中文社区：http://www.angularjs.cn/ cdn：www.bootcdn.cn/angular.js/ AngularJs这套js框架针对于SPA应用以及商业业务流程应用的开发具有特别的优势。 比较难学，学习途径比较陡峭，因为用到了很多的后台逻辑代码的思维 适用和不适用的项目： SPA（singel page app）应用：单页面应用 --路由机制 CRUD应用： 增加(Create)、查询(Retrieve)(重新得到数据)、更新(Update)和删除(Delete)，例如后台管理系统。购物车逻辑---数据双向绑定 不适用： 游戏、图形界面编辑器，这种频繁DOM操作也很复杂的应用 版本介绍： 1.3版本是一个分水岭，最稳定的是1.5.4-1.5.8的版本，这个时候就更新的很少了，这里使用1.5.7版本 ps：ionic .，这个是要和angular配合使用的，因为angular并没有自己的一个样式组件，并且在移动端有很多水土不服的地方，于是，ionic横空出世把移动端一些个angular做的不好的地方全部克服掉，抢占了部分市场和用户。 angular的特性： 1. MVC模式 model（模型） view（视图） controller（控制器） 2. 模块系统 3. 指令系统 4. 依赖注入 5. 数据双向绑定 angular缺点 1. 对dom操作支持较弱，当然也可以使用jq； 2. Html中过多指令、事件绑定的操作，耦合度较高 为什么需要MVC,js模块化？ 代码规模越来越大，切分职责是大势所趋 为了复用代码，很多逻辑都是一样的，封装 为了方便后期的维护，修改一块功能不影响其他功能 AngularJS第二课 安格拉小姐 类似于黄蓉 机灵古怪 侠骨丹心 善良 有脾气 1.表达式： ng-app 就是angular的一个入口，划分领域，只有在有ng-app属性的标签内部才可以进行表达式计算哟 并且每个项目或页面只能有一个入口，其他的不起作用 {{10+20}} ==》30 内部包含表达式来进行计算结果的显示，加减乘除都可以 {{[0,1,2][2]}} ---》 2 {{{name:"kervin"}.name}}==>kerwin angular的表达式很随意、自然，这样的写法也可以呈现 angualr应用只能有一个ng-app指令（注意，这个玩意属于一条指令，带ng-的就是指令哟,directive），也就说只有一个入口。 2.表达式定义变量 {{'myname'}}==》myname 相当于定义一个字符串 {{myname}}==》不显示 相当于一个变量，因为没有值，所以不显示 {{myname =‘allen’}}==》allen 给变量赋值，所以显示了 但是这样好不爽啊，还是js去定义变量好玩~ 其实还可以通过ng-init在指令作用域上定义变量 还有个小东西，大家发现表达式经常会出问题呀，有时候刷新页面的时候大括号会暴露出来，那么这个时候用ng-bind就可以咯 3.控制器 给ng-app赋值哟，不然js里找不到 angular.module("appName",[]); 获取主模块，第二个参数[]，代表依赖的模块，后面再说哟 html中定义一个controll ng-controller myapp.controller("myController",function($scope){ $scope.name="allen" }) 这样把数据挂到一个叫$scope的东西的身上，就可以{{name}}去用了 哇，666，这样就可以把变量搞到js里了 说到这里，来研究一下angular的MVC M：model 数据模型 V：view 视图 C：controller 控制器 通过C把M和V联系了起来，就叫MVC模式 咱们上面的这个小东西 数据挂在$scope下。那么这个货就是个M {{name}}这一块是要显示数据，那当然就是个V咯 那么通过controller把他们联系起来，那他理所当然就是个C咯 比如去饭店吃夹肉饼，夹肉饼是数据，把肉饼吃到肚子里，那么肚子就是视图，那么什么是控制器呀，当然是钱咯，钱买来夹肉饼，把它送到肚子里，这，就是mvc的模式 那么$scope好像是函数里的形参，那咱们能乱改吗？不能！必须这么写，写什么，js就会给控制器下注入什么，别的angular不认识，只能注入咱们这个可爱的$scope了 这就是依赖注入的特性 咱们把$scope叫做一个作用域，就是咱们这个控制器的一个作用域，里面的数据只能在这个域里生存 控制器是可以写多个的，每个控制器里都可以绑定一些个数据 注意：只要html里写了controller，那么如果不在js里也去写一下的话，就会报错.. 只要html里给ng-app起了名字，那么如果不在js里也去写一下的话，就会报错.. 4.作用域 action scope controller可以嵌套，那么就会出现在里面的controller能用到外面controller绑定的数据 就像js函数套函数一样 就近原则，谁离得我进，我就找谁，啦啦啦~ 这个时候里面定义的作用域$scope代表的就是局部作用域 angular有全局作用域么，当然有啦，就是$rootScope 可以注入到任何一个控制器的回调里，然后就可以 $rootScope.XX=XX； 如果多个控制器都注入了 $rootScope，并且挂的数据键一样，那么就按照代码执行顺序去覆盖 但是大家可能发现了哈，介个时候定义全局作用域下的变量的话需要控制器，如果我的项目中没有控制器怎么办，咱们可以把它用run来挂载 myapp.run(function($rootScope)){ $rootScope.aaa=123; }） 5.ng-click 通过给控制器作用域内部的dom元素的标签上添加ng-click指令，去执行某个方法（在表达式内需要加{{}}，在标签的ng-属性里面不需要加哟）来改变数据，视图层的数据显示会马上发生变化，这就是angular的魅力所在。 那么有个疑问了，既然数据改变，视图改变，那我在控制器js里去添加一个seTimeout去改变数据，视图能改变吗？并不能！！数据确实可以改变，但是视图并不能改变，因为并咩有人去报信，通知视图去改变，那么这就尴尬了，刚才去ng-click报信，现在木有人报信了... 不怕，在setTimeout里改变数据后执行 $scope.$apply（）； 去报信，这个就可以了，那么这个执行了玩意是什么呢，专业名称叫脏数据检验，什么叫脏数据？数据改变了就叫数据脏了，啊哈哈哈哈哈，神奇。 不想这么做？可以，那就别用setTimeout这种原生方法，用$timeout，这是angualr提供的哟，注意要注入。