mvc:

View 传送指令到 Controller

Controller 完成业务逻辑后，要求 Model 改变状态

Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

Angular它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

组成部分Model、View、ViewModel

View：UI界面

ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；

Model：数据访问层

bootstrap是一个快速开发的响应式框架，主要是为了快速搭建ui界面，bootstrap 的web组件和js插件对pc端开发比较友好，尤其是栅格化系统可以良好兼容浏览器， 低版本浏览器可以使用bootstrap一responsive的插件兼容，js插件有各种回调机制，可以满足自己的多样开发需求，而且bootstrap使用css属性来操作样式，免去了手写原生代码的痛苦，使用angular进行数据绑定，bootstrap来搭建界面，提升开发效率

个人心得：

我在实际开发中使用ace admin这套基于boostrap的框架，可以更快速的开发，数据项通过json结构进行配置，几乎不用手写代码，提升开发效率

1．ng一if 在后面表达式为 true 的时候才创建这个 dom 节点，ng一show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不显示。

2．ng一if 会（隐式地）产生新作用域，ng一switch .ng一include 等会动态创建一块界面的也是如此。

个人心得：

ng一if添加删除节点，那么肯定回创建作用域，而ng一show/hide则不会

 ng一click和原生事件完成的功能是一样的，但是ng一click做了优化，而且ng一click里面可以写表达式，运算过程，click则要单独处理，手写功能。

个人心得：

如果不在作用域里添加函数，可以配合ng一init初始化属性值，在ng一click里添加算 法或者某一功能，虽然ng一inK不推荐使用，但是侧面说明ng一click的优势

ng 内置的 filter 有九种：

date（日期）

currency（货币）

limitTo（限制数组或字符串长度）

orderBy（排序）

lowercase（小写）

uppercase（大写）

number（格式化数字，加上千位分隔符，并接收参数限定小数点位数）

json（格式化 json 对象）

filter（处理一个数组，过滤出含有某个子串的元素）

filter有两种使用方法，一种是直接在页面里：

<p>{{now | date : 'yyyy一MM一dd'}}</p>

另一种是在 js 里面用：

// $filter('过滤器名称')(需要过滤的对象, 参数1, 参数2,...)

$filter('date')(now, 'yyyy一MM一dd hh:mm:ss');

在模块下挂在一个filter()方法，第一个参数传入过滤器的名字，第二个参数是回调函数，处理过滤方法的详细内容，最后返回结果，这样外部就可以根据过滤器的名字调用了

例如

使用：name丨reverse通过管道符调用

factory , service , provider都是angular 提供的服务

factory就是原生js里的方法，一个简单的函数

service类似原生里构造函数的过程，拥有一个构造器constructor，也就是说有 new的过程，追加属性和方法都是在this上追加的

provider是服务商当service需要配置的时候，需要使用provider提供服务，例如当使用angular进行跨域访问，需要配置jsonp信息的时候，就可以使用provider进行config的配置，简单理解是service的高级版本，provider提供一个$get的属性来返回 $provider的实例

他们都是单例模式，只实例化一次

个人理解 ：

provider > service > factory

  factory用来配置简单的服务

service是在factory的基础之上加入了面向对象的思想，提供更多功能的服务

provider是在service的基础上进一步改进配置信息

factory与service在底层代码上都来源于provider

例子介绍：

我可以在factory里写一个$http( )请求，不做任何配置，参数写死

我可以在service里写一个$http( )请求，传入请求的参数可以先配置在this的属性上传入方法

我可以在provider里写一个请求，然后在config上传入要配置的参数，URL， method，data等信息，通过config来修改provider的参数，再将服务商提供的服务注入控制器controller

注意事项：

config里传入的参数是nameProvider而不是name，也就是说你的叫做 myProvider, config 里传入的参数就是myProviderProvider而不是myProvider

通过$watch来监听每一次dom的变化，然后$digest来遍历循环所有的$watch 队列，发现与原来不同的值，也就是脏值则进行修改，最后通知$apply , $apply会进入angular context的执行环境，通知浏览器拿回控制权，修改相应的dom节点

个人心得：

每一个ng指令的触发都在内部触发了一个$Watch的队列，加入一组标签

<li ng一repeat="item in items">

{{ item }}

</li>

循环了 10次，那么就触发了10个item与1个ng一repeat的11个$watch的队列，

$digest会遍历循环这些队列，比较值的变化，有变化的即为脏值过程叫做dirty一checking，$digest修改完对应的值就会通知$apply()准备进入angular context的执行阶段修改dom，没有变化则不修改。也就是说我们在页面每次触发的操作，每次输入一个文字都会触发$watch，可见于react相比angular的劣势出现了

1．通过a的子controller将事件使用$emit传递给父controller再将事件用 $broadcast传递给b controller实现数据传递

2．也可以通过service服务，将数据保存在service之内，然后在b中调用service

个人心得：

像这种数据传递的方式其实有很多种，本质是不同作用于之间的数据传递，只要 掌握住这一点思想有很多方式解决，比如我可以尝试挂在$rootScope之上进行共 享，也可以用本地存储来存储数据，实现数据共享。方法不重要，关键是如何解决的思路。

目录结构的划分

对于小型项目，可以按照文件类型组织，比如：

css

js

controllers

models

services

filters

templates

但是对于规模较大的项目，最好按业务模块划分，比如：

css

modules

account

controllers

models

services

filters

templates

disk

controllers

models

services

filters

templates

modules下最好再有一个common目录来存放公共的东西

ng一router，ui一touter，ui一router可以嵌套子视图

隔离作用域，ng一指令的作用域传递

可能会遇到不同模块之间的冲突。比如一个团队所有的开发在moduleA下进行， 另一团队开发的代码在moduleB下

会导致两个module下面的serviceA发生了覆盖。

个人心得：没有太好的解决方案，只能约定命名规范

不适合做交互过多的项目，因为没有选择器的存在，

导致学习成本较高，对前端不友好。但遵守AngularJS的约定时，生产力会很高，对Java程序员友好

因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取

为angular添加this作用域链，使得angular更加像原声写法

依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。

AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖 constant value factory service provide 核心组件。

通过$compile进行处理，任何指令的生效都需要compile，这一步在app启动的时候angular先帮你做了，但你插入的html是没有经过compile这个步骤的，所以你手动 compile下即可。

Error: [ngRepeat:dupes]这个出错提示具体意思是指数组中有2个以上的相同数字。 ngRepeat不允许collection中存在两个相同Id的对象

对于数字对象来说，它的id就是它自身的值，因此，数组中是不允许存在两个相同的数字的。为了规避这个错误，需要定义自己的track by表达式。

例如：在ng一repeat="itme in items "中加入rack by item.id 或者track by fnCustomld(item)。 嫌麻烦的话，直接拿循环的索引变量$index来用item in items track by $index——>ng一repeat="itme in items track by $index"

一句话总结：因为angular不允许数组中出现重复的值，所以会报错dupes错误，意思是重复的参数错误

见上题

angular有自己的一个上下文，所有与angular有关的代码执行（如双向数据绑定）都在这个上下文中进行，因此如果你用第三方插件或者原生的js进行操作时，此时代码是在javascript的上下文中执行，angular无法知道你是否修改model或者view的值，自然也就无法进行双向数据绑定。

解决方案是在操作之后执行$scope.$apply( )或者将操作的代码放在$scope.$apply(function( ){//操作的代码...})

因为压缩过后的 JavaScript 代码重命名了函数的参数名。在压缩js代码的时候尽量不要用推断式注入，最佳是用内联式注入的方式。

相比Angularl.x，Angular2的改动很大，几乎算是一个全新的框架。

基于TypeScript (可以使用TypeScript进行开发），在大型项目团队协作时，强语言类型更有利。

组件化，提升开发和维护的效率。

还有module支持动态加载，new router，promise的原生支持等等。

迎合未来标准，吸纳其他框架的优点，值得期待，不过同时要学习的东西也更多了 (ES next、TS、Rx等）

详细参考：

http://www.tuicool.com/articles/ymmq2mf