Angular企业级开发(1)-AngularJS简介

快来打我* 2022-02-02 01:51 315阅读 0赞

![Angular学习脑图][Angular]

#### AngularJS介绍 ####

AngularJS是一个功能完善的JavaScript前端框架，同时是基于MVC(Model-View-Controller理念的框架，使用它能够高效的开发桌面web app和移动端应用。AngularJS由Google公司开发而且开源出来，给所有开发者使用。前端基于Bootstrap+AngularJS框架，后端基于RESTful服务框架开发的应用越来越多。未来后端基于Docker+Microservice部署的应用也会越来越多。

![Angular Logo][]

[AngularJS官方网站][AngularJS]

#### AngularJS特点 ####

1.客户端模板  
传统的web应用:都是多页面，服务器端创建html，把html和数据装配在一起，然后再把生成好的html页面返回给浏览器。

单页应用(Single Page Application):模板和数据都会返回给浏览器中，然后在浏览器中进行装配。服务端仅仅为这些模板提供静态资源，然后为这些模板提供所需的数据。

2.MVC  
M(Model)-V(View)-C(Controller)最早主要是在桌面应用开发中使用，强调的是界面，数据模型和控制器的三者之间的分离。视图会从模型中获取数据，然后展示给用户，当用户通过鼠标或键盘操作或键入与应用进行交互的时候，控制器将会做出响应，并修改模型中的数据，最后模型会通知视图，数据已经发生变化，这样视图就可以刷新其中改变的内容。

3.数据双向绑定  
view层的数据和model层的数据是双向绑定的，其中之一发生更改，另一方会随之变化，这不用你写任何代码。

4.指令  
可以把模板和相关业务逻辑编写成html标签的形式，之所以可以实现这一点，主要是因为AngularJS引入了一款强大的DOM转换引擎，可以用它来扩展HTML语法。生成的新的html标签就是指令，AngularJS内置了非常多的质量，比如：ng-repeat,ng-app,ng-controller等等。当内置指令不够时，开发者可以根据业务需求自定义开发指令。

5.依赖注入  
Dependency Injection是一种设计模式，目的是在配置应用时定义应用所需的依赖。使用依赖注入能避免手动创建应用的依赖。初次启动应用时，AngularJS会使用依赖注入加载模块的依赖。

Java流行框架Spring就是充分使用了依赖注入。依赖注入能提升AngularJS应用的可测试性，而且AngularJS单元测试和集成测试还有专门的测试框架。

6.可测试性  
AngularJS应用借助依赖注入的，大大提升了应用的可测试性。目前Web前端应用，一般会进行两种测试。第一种是单元测试(Unit Test)，单元测试主要测试代码的一个小的单元，能在开发过程中尽早发现软件的缺陷；第二种是端到端测试(End to End,简称:E2E)。端到端测试主要测试软件中各个组件结合在一起的交互行为，从而发现软件的缺陷。

QA主要功能测试，就是开发工程师发布代码之后，测试工程师根据业务需求和功能进行功能测试。

#### AngularJS相比其他框架 ####

目前主要流行的几大框架：

1.jQuery

2.React

3.Vue.js

4.Ember.js

以上四个框架都有自己的开发者，每个框架都有自己的优点和缺点。在实际项目开发者，还是要根据团队成员对框架的掌握程度来决定。但是我们还是推荐大家使用AngularJS。

#### Angular1.x和Angular2 ####

在国内1.5.x版本开发的应用应该较多，但是2.0版本也已经发布了。对于Angular2，很多开发者都觉的要重新学习一遍。因为变动确实太大了，好在提供了从1.x迁移到2.0相关的工具。后面博客中涉及的版本都是基于Angular1.5.X版本。等团队成员对angular1.x相关技术和原理有一定的理解，到时才会考虑使用Angular2.0。

#### 参考资料 ####

1.[https://zh.wikipedia.org/wiki/AngularJS][https_zh.wikipedia.org_wiki_AngularJS]

2.[https://github.com/paddingme/ng-demo/blob/master/slide.md][https_github.com_paddingme_ng-demo_blob_master_slide.md]

本文转自快乐八哥博客园博客，原文链接http://www.cnblogs.com/liminjun88/p/6060157.html如需转载请自行联系原作者

快乐八哥

[Angular]: /images/20220202/54e3fddd1e2f42098251e8f7fca7611c.png
[Angular Logo]: /images/20220202/51580db9bf504ebf8824d7c4b38af9f5.png
[AngularJS]: https://angularjs.org/
[https_zh.wikipedia.org_wiki_AngularJS]: https://zh.wikipedia.org/wiki/AngularJS
[https_github.com_paddingme_ng-demo_blob_master_slide.md]: https://github.com/paddingme/ng-demo/blob/master/slide.md