基于angular开发第二代应用

angular背景

背景
angularjs是什么?

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入、等等。

angularjs 为何会火?

AngularJS是为了克服[HTML]在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。

angular 解决了什么问题？

AngularJSWEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用中的一个小部分，还是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD（增加Create、查询Retrieve、更新Update、删除Delete）的应用时显得非常强大， 可以这么认为web端90%的产品都是crud应用。

理论意义和应用价值

angularjs
优点：

1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；
2. 是一个比较完善的前端MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；
3. 自定义Directive，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的项目从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动。
5. 补充：Angular支持单元测试和e2e-testing。

缺点：

1. 验证功能错误信息显示比较薄弱，需要写很多模板标签，没有jQuery Validate方便，所以我们自己封装了验证的错误信息提示，详细参考 why520crazy/w5c-validator-angular · GitHub** ；
2. ngView只能有一个，不能嵌套多个视图，虽然有 angular-ui/ui-router · GitHub** 解决，但是貌似ui-router 对于URL的控制不是很灵活，必须是嵌套式的（也许我没有深入了解或者新版本有改进）；
3. 对于特别复杂的应用场景，貌似性能有点问题，特别是在Windows下使用chrome浏览器，不知道是内存泄漏了还是什么其他问题，没有找到好的解决方案，奇怪的是在IE10下反而很快，对此还在观察中；
4. 这次从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG，具体详细信息参考官方文档 AngularJS** ，对应的中文版本：Angular 1.0到1.2 迁移指南**5. ng提倡在控制器里面不要有操作DOM的代码，对于一些jQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装插件，但是现在有很多插件的版本已经支持Angular了，如：jQuery File Upload Demo**6. Angular 太笨重了，没有让用户选择一个轻量级的版本，当然1.2.X后，Angular也在做一些更改，比如把route，animate等模块独立出去，让用户自己去选择。

国内外研究现状及发展趋势

<p>

angular的欢迎程度

angularjs 开源在 github上https://github.com/angular/angular.js
angualr已经拥有17377的fork 和 40360的start.
这在业界框架欢迎程度来说基本可以排前5

angular的社区

angularjs在git上面 已经有66183个开源的项目

Paste_Image.png

社区非常的完善 各种组件及其丰富。

angular的现状与未来

目前angular1.0的最新版本为1.4。
在ng2015大会上面(2014年10月) 公布了angular2.0 的计划

AngularJS团队表示“AngularJS 2.0是移动应用的框架”。该框架将继续支持桌面，但其主要关注点变成了移动领域。它的目标还包括通过转译器支持EcmaScript 6（因为浏览器还不支持ES6）。
为了从开发者那里得到反馈，一篇关于"AngularJS 2.0"的文章中列出了计划中的更改，以及指向设计文档的链接。
下面简要介绍一下这些计划中的更改：
支持ES6和Traceur转移器。开发者也可以选择继续编写ES5。
更快速的变化检查
通过整个Angular范围内的日志服务diary.js进行监控
更好的模块化
更简化的依赖注入，包括声明优于命令、通过ES6模块进行模块加载、通过子注入器延迟加载部分JS。这些设计大部分已经实现。
模板和指令改进，包括简化的指令API、使用Web标准与其他组件框架集成、增强的性能以及允许IDE分析和验证模板。
更好的触摸动画，使用浏览器后退的原生特性，能够达到60+FPS的性能。
增强的路由，包括基于状态的路由、与认证和授权进行集成以及可以选择对保留某些视图的状态。
更好的持久化，在于服务器同步时，支持“永久脱机”模式，这对移动设备来说非常有用。
仅支持能自动更新的现代浏览器，包括Chrome、FireFox、Opera、Safari和IE11。对于移动设备，包括Android、iOS 6+、Windows Phone 8+的Chrome，和FireFox Mobile。也“有可能”支持旧版本的Android。

使用angularjs国外公司

google体系
下面的链接列取了国外使用angular开发的项目地址
https://github.com/angular/angular.js/wiki/Projects-using-AngularJS

使用angularjs国内公司

1. 知乎 (知乎专栏)
2. 阿里云
3. 青云
4. 苏宁公有云平台
   等等.....

技术关键与创新点

angular中技术关键点:

数据的双向绑定

Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。
http://www.html-js.com/article/Using-Angular-to-develop-web-application-of-AngularJS-twoway-data-binding-secret

依赖注入

一般来说，一个对象只能通过三种方法来得到它的依赖项目：

我们可以在对象内部创建依赖项目
我们可以将依赖作为一个全局变量来进行查找或引用
我们可以将依赖传递到需要它的地方
在使用依赖注入时，我们采用的是第三种方式（另外两种方式都会引起其他困难的挑战，例如污染全局作用域以及使隔离变得几乎不可能）。依赖注入是一种设计模式，它移除了硬编码依赖，因此使得我们可以在运行中随时移除并改变依赖项目。

在运行过程中能够修改依赖项目的能力允许我们创建隔离环境，这对于测试来说是非常理想的。我们可以用测试环境中的一个冒牌对象来替换生产环境中的一个真实对象。

从功能上来说，这种模式通过自动提前查找依赖以及为依赖提供目标，以此将依赖资源注入到需要它们的地方。

在我们编写一个依赖于其他对象或库的组件时，我们会描述它的依赖项目。再运行过程中，一个注入器将会创建依赖的实例并将它们传递给一个依赖消费者。
http://www.html-js.com/article/Injection-with-Angular-development-web-application-AngularJS-explain-only-dependence

mvvm

Model View ViewModel - MVVM
MVVM核心：Model(模型)，View(UI)，ViewModel(视图模型)
Model：数据展现的对象模型
View：页面UI
ViewModel：实现Model和View的双向绑定

它们的工作模型应该是：Model<=>ViewModel<=>View

让人比较困惑的是：MVVM中的Controller是什么？
ng和avalon都提供了名为Controller的方法，其实它们的意义和MVC一致：处理/加工Model。
http://www.tuicool.com/articles/bEf6N3I

模块化

在AngularJs中，应用可以拆分为一个个的小模块，模块之间可以相互依赖，这样各个功能可以非常方便重用和测试。在HTML中使用ng-app指令即可定义一个Module:

指令

指令"是什么?
简单点说，指令就是一些附加在HTML元素上的自定义标记（例如：属性，元素，或css类），它告诉AngularJS的HTML编译器 ([$compile

](http://docs.ngnice.com/api/ng.$compile)) 在元素上附加某些指定的行为，甚至操作DOM、改变DOM元素，以及它的各级子节点。
Angular内置了一整套指令，如ngBind
, ngModel
, 和ngView
。 就像你可以创建控制器和服务那样，你也可以创建自己的指令来让Angular使用。 当Angular 启动器引导你的应用程序时， HTML编译器就会遍历整个DOM，以匹配DOM元素里的指令。
对于HTML模板来说，"编译"意味着什么? 对于AngularJS来说，“编译”意味着把监听事件绑定在HTML元素上，使其可以交互。 我们使用"编译"这个术语的原因就在于，把指令关联到DOM上的这种递归操作非常类似于 编译式语言编译源代码的过程。

http://docs.ngnice.com/guide/directive

测试驱动

测试驱动开发，angularjs一开始就以此为目标，使用angular开发的应用可以很容易地进行单元测试和端对端测试，这解决了传统的js代码难以测试和维护的缺陷

参考这篇文章更好
http://www.chinaz.com/design/2012/0725/264318_2.shtml

方案和可行性分析