前端框架AngularJS

Angular核心概念

（1）本质：设计动态web应用的结构框架。

web应用与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。Angular官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用

（2）核心：对HTML标签的增强

就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令。

（3）是MVC还是MVVM？

官网有提到ng的设计采用了MVC的基本思想，但它并不是MVC，因为在书写代码时确实是在用ng-controller这个指令，但这个controller处理的业务基本上都是与view进行交互，所以angular**更接近MVVM**。

简单介绍一下MVVM：即Model-View-ViewModel,它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

具体MVC.MVP,MVVM的比较可以参考这篇博客： 
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

（4）适用于？

AngularJS是一个MVVM 框架，最适于开发客户端的单页面应用。如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不适合AngularJS了。

(5)工作原理

HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的.

（6）优点

1.引入了依赖注入与双向绑定，不需写大量代码就能实现复杂功能

2.不用像jQuery操作复杂的dom代码，只需要改变数据模型就可以

AngularJs特性

(1)数据双向绑定

一个web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定使得代码极大的减少，开发者可以更专注于应用的数据交互方面。

在我们使用jQuery的时候，代码中会大量充斥类似这样的语句：var val = (‘#id’).val();(‘#id’).html(str);等等，即频繁的DOM操作（读取和写入），其实我们的最终目的并不是要操作DOM，而是要实现业务逻辑。ng的绑定将让你摆脱DOM操作，只要模板与数据通过声明进行了绑定，两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。

什么是数据双向绑定？ 
HTML中呈现的view与AngularJS中的数据是一致的. 修改其一, 则对应的另一端也会相应地发生变化.

双向绑定原理：

AngularJS**在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同，脏治检查允许AngularJS监视那些存在或者不存在的变量。**

最简单的说法，50ms为一个心跳，去判断一个controller里所有对象的变化，如果有变化，那么更新相关的元素

详细原理可以参考这篇博客：AngularJS 数据双向绑定揭秘：http://sentsin.com/web/779.html

（2）依赖注入（DI）

什么是依赖注入?

wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

一句话 — 没事你不要来找我，有事我会去找你。

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入： 
value:一个简单的 JavaScript 对象，用于向控制器传递值（配置阶段） 
factory:一个函数用于返回值。在 service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值。 
service 
provider:AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory 
constant:constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

AngularJs常用指令

1.ng-app: 初始化一个 AngularJS 应用程序。 
2.ng-init: 初始化应用程序数据。 
3.ng-model: 把数据模型元素值（比如输入域的值）绑定到应用程序。 
4.ng-repeat:循环输出指定次数的 HTML 元素,集合必须是数组或对象。 
5.ng-controller:绑定控制器。 
6.ng-if与ng-show/hide:都是控制dom元素的显示或隐藏，ng-if指令根据表达式的值在DOM中生成或移除一个元素（false为移除，反之生成），ng-show/hide只是隐藏或显示，不移除。 
7.ng-submit:在表单提交后执行指定函数。 
8.ng-disabled:设置表单输入字段的disabled属性(input, select, 或textarea),ng-disabled中的表达式返回 true 则表单字段被禁用。 
9.ng-checked:设置复选框(checkbox)或单选按钮(radio)的 checked 属性, 该属性返回 true，复选框(checkbox)或单选按钮(radio)将被选中。 
10.ng-src:绑定文件资源路径 
11.ng-href:覆盖原生的 <a> 元素 href 属性。如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 而非 href。ng-href 指令确保了链接是正常的，即使在 AngularJS 执行代码前点击链接。 
12.ng-class:给 HTML 元素动态绑定一个或多个 CSS 类。 
13.ng-selected:设置<select>列表中的<option>元素的selected属性,ng-selected属性的表达式返回true则选项被选中 
14.ng-change:ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作，需要搭配 ng-model 指令使用，不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都执行。

AngularJs实现原理

1双向绑定原理

Angular的数据观测采用的是脏检查（dirty checking）机制。每一个指令都会有一个对应的用来观测数据的对象，叫做watcher；一个作用域中会有很多个watcher。每当界面需要更新时，Angular会遍历当前作用域里的所有watcher，对它们一一求值，然后和之前保存的旧值进行比较。如果求值的结果变化了，就触发对应的更新，这个过程叫做digest cycle。

脏检查有两个问题：

任何数据变动都意味着当前作用域的每一个watcher需要被重新求值，因此当watcher的数量庞大时，应用的性能就不可避免地受到影响，并且很难优化。

当数据变动时，框架并不能主动侦测到变化的发生，需要手动触发digest cycle才能触发相应的DOM 更新。Angular通过在DOM事件处理函数中自动触发digest cycle部分规避了这个问题，但还是有很多情况需要用户手动进行触发。

对于这个问题，Vue.js给出了不一样的解决方法：基于依赖收集的观测机制，有兴趣的话可以研究一下Vue.js。

AngularJs常用插件

1 图片视频类 
angular-maxonry 图片墙效果插件，可以将图片组织成类似于瀑布流的效果，依赖于jQuery、imageloaded和Masonry 
angular-deckgrid 另一个照片瀑布流解决方案 
ngImgCrop 图片剪裁工具 
ngVideo 播放器，直接播放指定地址的mp4，控制按钮美观度远甩朝内99.99%的视频站 
2 输入控件类 
ngDraggable 控制元素拖动的控件，Demo 
angular-umeditor 百度umeditor的AngularJS扩展，umeditor从界面上讲并不够现代化，但却总有人喜欢它 
ngAutocomplete 喜闻乐见的自动补完 
textAngular 文本编辑器，更简洁，更漂亮 
ngTagsInput 以标签的方式来组织输入 
Angular-slider 以拖动方式输入值的控件 
Angular Slidezilla 与Angular-slider功能一样，只不过设计风格不一样 
3 界面类 
ui-bootstrap 官方扩展，在AngularJS中方便的以指令的方式使用Bootstrap 
ui-map 用于在页面中集成Google Maps 
NG-Grid 官方提供的表格插件，支持表格的主题、排序、直接编辑、多行选择等操作，而且使用非常简单，只需要一行HTML代码，但是，比较难看，适合于不讲究外观但要求功能强大的场合，像后台工具、管理系统之类 
angular-table 第三方表格工具，适合于需要对表格进行高度定制的场合 
ng-table 在易用性和外观上对上面两个进行折衷的解决方案 
AngularUI 上面的ui-bootstrap、ui-map就是它的一部分，官方提供的常用扩展集，除了这两个，还有ui-router、ui-select等，注意，它使用的是Bootstrap 2.x 
Adapt-Strap 第三方Bootstrap插件，而且是基于扁平化的Bootstrap 3，更美观 
ng-polymer-elements Polymer风格的AngularJS指令，Material Design设计，值得尝试 
Angular Loading Bar 可用于在页面顶部增加一个漂亮的进度条 
angular-busy 与Angular Loading Bar有点类似，主要用于处理http通信时候的动画ngInfiniteScroll从名字可以看出来，它是一个用于组织瀑布流和时间线的扩展ngScrollTo页内滚动工具，可以将页面滚动到指定id的元素位置ngDialog比Bootstrap更简单，更好用，更漂亮的网页对话框AngularTreeview树状目录组织扩展，使用相当方便，而且不依赖于jQueryangular−growl用于在页面上显示警告框，可以设置显示时间，还可以直接显示http中收到的警告 
angular-truncate 当文字过多过长时，显示部分文字的插件，可以按文字总长度来控制，也可以按单词数量来控制

4 调试工具

Batarang:专门为angular设计的一款调试工具，在chrome插件中心可以进行安装

5 其它工具类 
angular-translate AngularJS的i18n扩展 
Satellizer 可以方便的在AngularJS中集成第三方账号登陆，支持国际主流社交网站账号，支持协议有OAuth 1.0/2.0 
ngStorage 本在存储插件，用于处理localStorage和sessionStorage 
ng-csv 导出csv的扩展