2019.07.31 丨 msup

入门篇:一文读懂Angular2 框架

2019.07.31 丨 msup


背景与概念


  • AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。

  • AngularJS2 是 Angular 1.x 的升级版本,性能上得到显著的提高,能很好的支持 Web 开发组件。

  • AngularJS2 发布于2016年9月份,它是基于ES6来开发的。



Angular2.x与Angular1.x 的区别


Angular2.x与Angular1.x 的区别类似 Java 和 JavaScript 或者说是雷锋与雷峰塔的区别,所以在学习Angular2.x时大家需要做好重新学习一门语言的心里准备。



开工前的准备工作


学习AngularJS2前,你需要具备:


1、有AngularJS 1.x使用经验的开发者
2、有其它前端框架使用经验的开发者(如jQuery、ExtJS、Adobe Flex、React、Vue等均可)
3、有后端编程经验(如Java、.NET、PHP等均可),希望学习前端技术的开发者



Angular 架构


我们来看看Angular2的核心概念,了解这些,有助于我们理解一个Angular应用是怎么工作的,从而帮助我们更好的利用框架,开发出更高质量的应用。


Angular 2 应用程序应用主要由以下 8 个部分组成:

  • 组件        

  • 元数据    

  • 模版      

  • 数据绑定 

  • 服务     

  • 指令      

  • 依赖注入 

  • 模块         


组件


组件是 Angular 框架最核心的组成,其他概念都是组件的延伸,都是为组件提供服务的。


1、组件拆分


应用程序中的页面可以拆分出多个组件,组件层层嵌套,自上而下会形成一颗组件树。


2、组件的通讯机制


组件之间有着一套完善的通讯机制,每个组件都可以定义自己的输入输出属性,这些属性称为组件的对外接口。


3、组件的生命周期


当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法,每个组件都有完成的生命周期钩子,这些钩子让我们清楚的知道组件的变化。

前边提到的都是组件的基本特性,是不是觉得很抽象,现在我们结合代码继续介绍。


4、组件示例


我们可以看到,组件分为两个部分:一个是装饰器,另一个是组件类,组件的业务逻辑都是在组件类中实现的。


5、组件渲染


程序运行时,元数据中的 selector 属性定义了一个 “app-root”,这是一个css3 选择器,它作为自定义标签来使用 <app-root></root>(Anuglar 遵循Web Component API )。模版中的变量最后会替换成正确的值。如下:


6、组件树


多个组件会形成一颗组件树,它们之间的关系如下:


元数据


元数据就是在定义模块、组件、服务的时候,Decorator方法里面的参数内容,例如一个AppComponent的元数据,就是 @Component 里面的参数,如下:


在Angular2中,Decorator被大量使用,当我们定义模板、组件、服务、指令时,都是使用Decorator来定义。顾名思义,Decorator(装饰器)就是在一个类上面添加一些额外的属性或方法。


@Component 中的配置项说明:


  • selector - 一个 css 选择器,它告诉 Angular 在 父级 HTML 中寻找一个 <mylist> 标签,然后创建该组件,并插入此标签中。

  • templateUrl - 组件 HTML 模板的地址。

  • directives - 一个数组,包含 此 模板需要依赖的组件或指令。

  • providers - 一个数组,包含组件所依赖的服务所需要的依赖注入提供者。



模板


组件的模版分为内联模版和外联模版。内联模版使用 template 字段,外联模版使用的是 templateUrl 字段,如下:



数据绑定 


数据绑定使用常用的差值表达式双大括号 {{}},数据绑定的语法中可以直接使用组件类中的成员变量。如下:


插值:在 HTML 标签中显示组件值。

<h3>

{{title}}

<img src="{{ImageUrl}}">

</h3>


属性绑定:把元素的属性设置为组件中属性的值。

<img [src]="userImageUrl">


事件绑定: 在组件方法名被点击时触发。

<button (click)="onSave()">保存</button>


双向绑:使用Angular里的NgModel指令可以更便捷的进行双向绑定。

<input [value]="currentUser.firstName"

(input)="currentUser.firstName=$event.target.value" >



服务


服务是实现专一目的的逻辑单元,狭义的服务是一个明确定义了用途的类,它应该做一些具体的事,并做好。


Angular 把组件和服务区分开,以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开,你可以让组件类更加精简、高效。Angular 会通过依赖注入来帮你更容易地将应用逻辑分解为服务,并让这些服务可用于各个组件中。


把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中。如日志服务:


指令


Angular模板是动态的 。当 Angular 渲染它们时,它会根据指令对 DOM 进行修改。指令是一个带有"指令元数据"的类。在 TypeScript 中,要通过 @Directive 装饰器把元数据附加到类上。


在Angular中包含以下三种类型的指令:

  • 属性指令:以元素的属性形式来使用的指令

  • 结构指令:用来改变DOM树的结构

  • 组件:作为指令的一个重要子类,组件本质上可以看作是一个带有模板的指令


<li *ngFor="let site of sites"></li>

<site-detail *ngIf="selectedSite"></site-detail>

*ngFor 告诉 Angular 为 sites 列表中的每个项生成一个 <li> 标签。

*ngIf 表示只有在选择的项存在时,才会包含 SiteDetail 组件。



依赖注入


从Angular1的版本开始,依赖注入就是一个很核心的概念,在版本2中,主要是用于管理service实例的注入。


在传统的开发模式中,调用者负责管理所有对象的依赖,循环依赖一直是梦魇,而在依赖注入模式中,这个管理权交给了注入器(Injector),它在软件运行时负责依赖对象的替换,而不是在编译时。这种控制反转,运行注入的特点即是依赖注入的精华所在。


Angular 能通过查看构造函数的参数类型,来得知组件需要哪些服务。例如, SiteListComponent 组件的构造函数需要一个 SiteService:


constructor(private service: HeroService) { }


当 Angular 创建组件时,会首先为组件所需的服务找一个注入器( Injector )。


注入器是一个维护服务实例的容器,存放着以前创建的实例。如果容器中还没有所请求的服务实例,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular 。


当所有的服务都被解析完并返回时, Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。



模块


模块由一块代码组成,可用于执行一个简单的任务。Angular 应用是由模块化的,它有自己的模块系统:NgModules。每个Angular 应该至少要有一个模块(根模块),一般可以命名为:AppModule。Angular 模块是一个带有 @NgModule 装饰器的类,它接收一个用来描述模块属性的元数据对象。


几个重要的属性如下:


  • declarations (声明) - 视图类属于这个模块Angular 有三种类型的视图类:组件、指令和管道 。

  • exports - 声明( declaration )的子集,可用于其它模块中的组件模板 。

  • imports - 本模块组件模板中需要由其它导出类的模块。

  • providers - 服务的创建者。本模块把它们加入全局的服务表中,让它们在应用中的任何部分都可被访问到。

  • bootstrap - 应用的主视图,称为根组件,它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。


一个最简单的根模块,eg:


import{NgModule}from'@angular/core';

import{BrowserModule}from'@angular/platform-browser'; 

@NgModule({imports: [BrowserModule], 

providers: [Logger], 

declarations: [AppComponent], 

exports: [AppComponent], 

bootstrap: [AppComponent]})exportclassAppModule{}


接下来通过引导根模块来启动应用,开发过程通常在 main.ts 文件中来引导 AppModule:


import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';

import{AppModule}from'./app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);



它们之间的关系


为了描述这几个功能之间的关系,先看看下面这张图(图片摘自官网):


这张图就比较清楚的说明了组件、服务、模板、Directive(指令)、数据绑定和依赖注入的相互关系。结合这张图和上面说的开发一个Angular2的应用的基本过程,这样就更容易理解了。


下面,我们来看一下Angular应用的工作流程:


1、我们定义一个根模块和一个根组件,然后在main.ts里面用这个根模块启动应用。


2、根据组件里面的一个html标签如果匹配了某一个组件的’selector’,这个组件就会被加载在这个标签里面。这样,整个应用就是一个组件树。


3、我们定义的Component信息,也就是类和Metadata(元数据),Angular会根据这个组件定义将组件中定义的模板显示到selector对应的标签上,将样式应用到模板页面上。组件和模板之间又通过数据绑定联系起来,组件中的变量通过数据绑定展示到模板上,模板又通过事件绑定,对应到组件里的方法上。Directive的工作原理也跟上面类似。


4、最后,我们定义的service被Angular的Injector保存在一个树形结构的容器里,在某个组件中当我们需要使用这个service时,就可以在构造函数中直接获得这个service的实例,而不用手动创建。这样,多个组件,或者模块都可以共用一个service的实例。所以,service除了提供业务方法,也能提供共享数据、数据传输等功能。


了解了这些知识,并不能称为你真正的了解了Angular2高级开发。具体关于Angular2的实例及经验,还是要和大咖大漠穷秋学。他可以帮助大家扫平在开发过程中遇到的一些坑,举几个典型的例子:


  • 很多开发者抱怨说,在 Windows 平台上安装 @angular/cli 会报很多 error,那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和 Visual Studio 环境,而很多开发者的机器上并没有安装这些东西。

    为什么要依赖这些环境?因为某些 npm 包需要在你本地进行源码编译。

  • node-sass 模块被墙的问题,强烈推荐使用 cnpm 进行安装,可以非常有效地避免撞墙。

  • 一些开发者来抱怨说 @angular/cli 在打包的时候加上 --prod 参数会报错,无法编译。

    这是一个很常见的问题,因为 @angular/cli 最新的版本经常会有 bug,只要在项目的 package.json 里面降低一个小版本号就 OK 了。

    另外,加 --prod 参数之后,编译器会进行更加严格的检查,如果存在无用的组件或者配置错误,则编译过不去。

  • @angular/cli 默认生成的 karma.conf.js 配置文件里面采用了一个有 bug 的 HTML 报告生成器,导致 ng test 运行报错,我们需要把这个 reporter 改成 mocha(摩卡),具体的配置和实例请参考“第10课:自动化测试”中的讲解。

  • 还有的开发者说,本地开发的时候运行得很好,上线之后所有请求 404。这也是一个常见的坑,因为你需要给 Web 容器配置一下处理 HTTP 请求的规则,把前端路由扔回去交给 Angular 处理。


诸如此类的坑还有不少,相信你也能踩过来,但是从节约时间的角度来看,跟着大咖的思路走一遍岂不是更快?



面对面公开课


讲师简介



大漠穷秋,Google China Angular Developers PM in China

1、精通jQuery/Backbone/Underscore/Bootstrap

2精通Angular

3精通Extjs3.0

4精通Flex3.5 和ActionScript3.0


价值收获



1、掌握Angular框架的核心概念和设计思想

2、熟练使用Angular进行业务开发

3、基础好的同学可以达到封装UI Library的水平


培训对象



1. 有AngularJS 1.x使用经验的开发者

2. 有其它前端框架使用经验的开发者(如jQuery、ExtJS、Adobe Flex、React、Vue等均可)

3. 有后端编程经验(如Java、.NET、PHP等均可),希望学习前端技术的开发者



课程大纲



本次课程总计16小时,针对Angular新版本,案例以Clarity组件库为基础编写。如果你有意向,不妨戳此处”报名,即可有机会获取半天体验票!

媒体联系

票务咨询:赵丹丹 15802217295

赞助咨询:郭艳慧 13043218801

媒体支持:景    怡 13920859305

提交需求