Angularjs企业级开发

云计算开发部-李敏军

时间：2015.10

目录

1. 企业级开发的定义

2. Angularjs的优点和缺点
3. 框架整体认识
4. 前端框架
5. 基于Angularjs的组件化
6. 构建工具
7. QA

1.1企业级开发特点

企业级应用是面向商业组织，大型企业，或事业单位机构等构建的应用系统。用于企业或组织日常业务处理、协同工作以及与外部企业或组织协同合作。财务软件、ERP、CRM等都是最常见的企业级应用，同时还包括很多面向不同行业的解决方案，如制造业，零售业，医药业等。企业级应用最大的特色就是业务逻辑复杂、数据量大、安全要求高。

从用户界面的角度，企业级应用大多更像桌面应用，界面比较规整，页面往往由操作按钮、表格、表单、图表组成。操作人员通过操作界面与服务器交互来完成复杂的业务流程。如今的很多企业级Web应用都被设计为单页面应用（Single Page Application）。

1.2SPA的定义

 

单页面应用是近几年出来的一种新的Web界面组织和交互方式。不同于传统的Web界面，单页面应用中所有的用户操作都在一个页面中完成。不需要通过刷新和重新载入来发送或获取数据，而是使用Ajax的方式与后台进行交互，然后根据数据局部刷新页面内容。这种方式能带来更好的用户体验，同时也提高了前后台交互的性能。

2.1AngularJS的优点

 

1. 模块化开发
2. MVVM
3. 双向数据绑定
4. 指令
5. REST接口
6. 依赖注入
7. 可测试性
8. 开发工具集

2.2模块化

AngularJS中对模块有特定的定义，一个模块是容器，它将不同组件包装到一起——控制器、服务、过滤器、指令等。AngularJS以模块来指定应用如何启动，并定义应用中模块间的依赖关系。

2.3 MVVM

AngulaJS的作者将Angular定义为MVW(或MV*)框架，这里的W是Whatever，开发者可以根据自己的应用使用合适的模式（MVC，MVVM，MVP等）。

AngularJS发展至今，更接近于MVVM的模式。MVVM也是由MVC衍生而来。主要的区别在于使用一个ViewModel来封装显示逻辑和数据。同时使用双向的数据绑定来保持view和data之间的同步和更新。

2.4 双向绑定

双向数据绑定是AngularJS的一个很重要的功能，它充分解放了生产力，将开发人员从繁杂的DOM操作中释放出来，将更多的时间和精力放在数据和业务逻辑上。有了双向数据绑定，我们再也不需要监听用户输入事件（input, onchange等），不需要在手动获取用户输入值并保存到相应的JS对象中。当JS数据发生变化时，也不再需要获取DOM元素，并将新的数据更新到DOM元素上。所有你需要考虑和关心的就是数据本身，更新数据，页面便会自动被更新。

2.5 AngularJS的缺点 

1. 验证功能错误信息显示比较薄弱，需要写很多模板标签，没有jQuery Validate方便，所以我们自己封装了验证的错误信息提示。
2. ngView只能有一个，不能嵌套多个视图。目前使用ui-router来解决
3. ng提倡在控制器里面不要有操作DOM的代码，对于一些jQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装插件
4. IE浏览器必须是IE9及以上
5. 学习成本
6. SEO(SPA应用的通病)

3.框架整体认识 

第一部分、前端

HTML：Bootstrap

CSS：Less

JavaScript：jQuery,Angularjs

第二部分：AngularJS组件

UI-Bootstrap

Smart-Table

EChart

第三部分：构建工具

目前：npm、gulp

未来：Yeoman、Bower

4.前端框架

1. HTML-bootstrap

2. CSS-Less

3. JavaScript-jQuery和AngularJS

5.组件化

demo演示

6.构建工具

npm:

npm命令运行时会读取当前目录的 package.json 文件和解释这个文件，这个文件基于 Packages/1.1 规范。通过npm安装gulp需要使用的对应插件

gulp：

gulp 是一个基于Nodejs的任务运行器(合并、压缩、编译等任务)，类似Grunt，但gulp的原则是保持简单，使任务文件更像代码而不是配置。

7.Q&A

参考网址：

1. http://campus.codeschool.com/courses/shaping-up-with-angular-js/wrap-up
2. http://www.zhihu.com/question/22284218
3. http://angularjs.cn/T006
4. http://www.infoq.com/cn/articles/msh-using-npm-manage-node.js-dependence
5. http://segmentfault.com/a/1190000000372547