Angular在前端开发中的应用

Angular在前端开发中的应用

陈明希

中远海运特种运输股份有限公司 广东广州 510623

摘要：

介绍Angular的重要知识点以及它在前端开发中的应用。

关键字：Angular ，Component ，TypeScript ，RxJs ， MVC， MVVM

前言：

前端开发的历史，可简单分为Web 1.0 、Web 2.0 和 Web 3.0三个阶段。​在1.0时代，围绕Html、Css、JS，前端的交互基本上以一种原生的方式进行； ​2.0时代，Ajax、Prototype、jQuery、Bootstrap，以及各种模板引擎开始出现，前端由此发生了翻天覆地的变化，网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动；​3.0 阶段，随着HTML5、Node.js兴起，要求资深前端工程师熟悉后端技术，并且要在商业模式、代码架构思想等维度去考虑前端布局， Angular、React|、Vue等优秀前端开发框架应运而生。

一、Angular简介：

1、架构图：

图1.Anglar架构图

2、Component(组件)

组件是Angular中最重要的组成部分，Angular应用本质上就是由组件构成的树。组件由注解、视图、控制器三部分组成。注解是对组件进行配置的地方，它与外界的交互在此配置；视图是组件的可视部分，它必须关联一个HTML模板；通过“模板标签”，视图控件与组件内的数据进行单向绑定；通过[(ng-model)]视图元素与将组件的数据进行双向绑定；inputs和outputs是组件公开API的一部分，通过inputs可以向组件传入数据，通过outputs组件可以向外部传递各种对象；通过属性绑定，父组件可向子组件传递数据；通过事件绑定，父组件与子组件可进行通讯。HTML模板中可以嵌入多个组件指令，被嵌入的组件间之间可以是并列关系，也可以是嵌套关系。通过各种组合，小组件可拼装成大组件。

3、Module(模块)

Angular模块是一个由@NgModule装饰器提供元数据的类,元数据包括: 声明属于该模块的组件、指令、管道等，公开一些类让其它的组件模板使用，导入依赖的模块,从所依赖的模块中获得需要的组件、指令、服务等对象。模块是组织扩展应用的最佳途径，它最主要的作用是为其中的所有组件提供编译所需的上下文环境。在系统设计时，可按特性、业务、工作流、服务、通用工具、管道、数据仓等进行模块的规划。

4、TypeScript

TypeScript是微软开发的开源编程语言，它可以使用 JavaScript 中的所有代码和编码概念,它比 JavaScript 的开发容易得多。TypeScript可通过编译成为JavaScript代码，运行在任何浏览器。TypeScript 从核心语言和类概念的模塑方面对 JavaScript对象模型进行扩展，在JavaScript中只有原型对象没有类概念，但TypeScript引入了类对象，其中类的处理方式与Java非常类似。

5、服务

服务是将跨组件共享的数据或逻辑包装出来的类。在组件构造时，由参数定义来获取服务的实例对象，实例对象不需要手工创建，而是通过Angular依赖注入（Dependency Injection）体系来获取。在模块与组件中都可以注册服务提供商去获取服务，在根模块获取到的单一服务实例可为应用中的所有组件共享使用。

6、可观察对象（Observable）与RxJS

可观察对象（Observable）支持在发布者和订阅者之间传递任意类型的数据 (值、消息、事件)，它在Angular的异步处理中大放异彩，比如： HTTP 模块使用它来处理 AJAX 请求和响应；路由器和表单模块使用它来监听用户输入事件；组件中利用Observable的派生EventEmitter类，在Output属性中发布值等等。

RxJS 是基于可观察对象创建的响应式编程库，它使编写异步或基于回调的代码更容易。Angular支持RxJS的使用。

二、Angular的特点

1、数据绑定很简单

Angular内嵌多种数据模型与视图的绑定方式，有单向与双向的。对于表单来说，双向绑定会方便很多。利用ng-model指令，将模型绑定到表单中，其中一方数据发生更改，另一方会自动随之变化。

2、可阅读性强

强大的Directive（指令）可以将很多功能封装成HTML的Tag（标签）、属性，注释等，美化了HTML的结构，增强了可阅读性。

3、代码重用性和灵活性高

引入类以后，通过类包装数据模型、通过类继承提高代码重用性、 通过依赖注入简化类的管理。这种模仿后端语言的设计模式，意味着前端的代码加工效率极大提高。Angular应用设计时，可将很多开发工作放在客户端，服务端只提供数据、安全或只适合服务端完成的操作。

4、客户端路由

Angular已经内置了功能完善的RootModule、Root路由模块，所以在应用中只要配置好组件与路由的映射关系，即可在视图中通过简单的指令设置路由，而且可以避免页面的重载。还内置了ActivatedRoot模块，可以实现路由中参数的传递。

5、利用激活器提高安全

通过CanLoad 接口的实现，在模块的路由中配置canLoad 属性可控制模块是否允许被载入；通过CanActivate接口的实现，在组件的的路由中配置canActivate属性来控制组件是否允许被激活。

三、Angular在前台开发中的应用

目前MVC(Model-View-Control)模式在前后端开发都非常盛行，Angular在多次重构和改善后，越来越接近于MVVM (Model-View-ViewModel）模式，MVVM模式利用框架内置的双向绑定技术引入了特殊的ViewModel（视图模型）来实现View和Model层进一步解耦。MVVM模式有以下四点优势：

1. 低耦合：可以做到View和Model的变化互不影响，View的修改可以独立于Model。

2. 可重用性：可以把多个视图的共同逻辑放在ViewModel层，让多个View共享。

3. 独立开发：开发人员可以在ViewModel层专注于数据与业务逻辑的开发，界面设计人员专注于UI(View)的设计。

4. 可测试性：清晰的View分层，使得针对表现层业务逻辑的测试更容易，更简单。

在Angular中MVVM模式的应用：

1. View：它专注于界面的显示和渲染，在早期的AngularJs中View层主要是包含一堆声明式Directive的视图模板，在Angular中View层是HTML模板，它现在是组件的一部分。

2. ViewModel：它是View和Model的中间粘合体，负责View和Model的交互和协作，除了给View提供显示的数据外，还提供View中各事件操作Model的途径；在AngularJs中利用$scope对象进行ViewModel的操作，在Angular中利用各种绑定方式在组件内将数据绑定到HTML模板上。

3. Model：Model是业务领域的对象，是封装应用程序业务逻辑数据的载体。在Web页面中， Model中数据主要来自通过Ajax方式从服务端获取到的数据或者是全局配置的对象；在Angular中，处理与Model相关的业务逻辑的类可被封装成Service类，Service类可以互相调用，也可以被组件内的Controller类调用。

4. Controller：控制层的主要功能是响应用户的行为和调度后台的数据。当视图上发生的行为或事件被控制层监听到后，控制器判断业务与逻辑处理，调用Service获取业务数据并放在ViewModel对象上。在Angular中，Component（组件）中的TypeScript类充当了Controller角色。

数据模型是数据库的核心。在利用Angular进行信息系统的开发中，首先需要考虑数据模型的设计，从数据结构、数据操作、数据约束条件三方面入手。在数据结构出来后，先设计出简单的实体类对象，简单实体类可进一步封装成各种数据模型以便于映射到UI层控件上。数据操作基本上围绕着CRUD展开，不管什么类型的数据操作，都是通过异步HTTP的调用实现的，区别只在于请求头、请求体的不同，可把与服务器异步交互的行为封装成Service类。

视图设计中，表单是常见的。Angular有两种表单，一种是模板驱动表单，另一种是响应式的表单。模板驱动的表单采用隐式方式绑定控件的属性，制作简单，适合于固定样式的模板，常用[(ngModel)]命令方式将类实例化后的数据与视图进行双向绑定。响应式的表单是在组件初始化中通过FormBuilder创建出 FormGroup、FormControl对象并将它们绑定到表单控件中。响应式表单的创建依赖ReactiveFormsModule模块，在控制层中通过代码创建的方式，虽然增加了代码量，但可扩展性、可复用性和可测试性都更高。Angular内置非常强大的表单验证，还可以通过自定义实现更为复杂的校验。

组件是Angular的核心与灵魂，类、依赖注入等概念的引入，为Angular组件的制作注入强大的动力。组件可以继承自Directive标记的类，建议将许多组件用到的共同特性与方法封装成Directive标记的类，供子组件依靠继承方式共享。Angular组件调用Service类的方式非常简单，只需在构造函数的参数中注明类型即可。

四、结束语

Angular 框架有完整的开发工具包，丰富的UI 组件库，流行的MVVC的架构模式，非常适合开发桌面、移动和 Web 应用程序。

参考文献

Ar iLerner , Nate Murray Angular权威教程