Angualr基础入门

Angular的概述

一、Angular是什么

Angular 是由谷歌开发与维护一个开发跨平台应用程序的Web前端开发框架，同时适用于手机与桌面。

二、发展史

1.      Angular是Google推出的Web前端开发框架，从12年发布起就受到了强烈的关注，他首次提出了双向绑定的概念，让人耳目一新，就在2016年9月中旬，时隔4年，Google正式发布了Angular的第二代开发框架Angular2，2017年3月推出了Angular4。

Angular的故事：

首先是Angular的发家史，首先在09年的时候，这两位帅哥Misko和Adam在业余时间创造了Angular，当时Misko接受了一个叫做Feedback的项目，经过6个月的迭代，代码量已经达到了17000行，维护起来非常的艰难，所以Misko就想用他手上的Angular去重写这个项目，那么重写的结果怎么样呢？代码量从17000行，惊人的减少到了1500行，并且前后也只花了3周的时间。所以可以看出这个Angular的开发效率是非常非常的高。那么这次事件之后呢，Misko的主管就十分看好这个项目，决定正式立项，并且组件专职的团队来开发和维护，而且把Angular这个开发框架正式命名为AngularJS。从这里，Angular就开始进入了快速迭代。

 

 

2.      AngularJS的痛点

 

3.      Angular 2特性

 

 

令人兴奋的是，早在14年3月份，官方博客就有提及新Angular的开发计划，而且很快，就在同年的9月份，在NG-Europe大会上，Angular 2 正式亮相。这里值得一提的是，官方不再用AngularJS来命名新的的框架，而是直接采用Angular，把后面的JS去掉了。Angular 2经过两年的迭代开发，经过了α版本，也经过了β版本，在2016年9月正式对外发布了，真的是千呼万唤始出来。

Angular的版本更新的非常快，2017年3月发布了Google团队又发布了最新的Angular4，现在Angular 4的热乎气还没过呢，Angular 5 又要出来了，不过你也不用太过担心，因为不论是Angular 4 还是Angular 5，其内核依然是Angular 2。

三、SPA

单页应用（SinglePage Application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

Angular是一款优秀的前端js框架，用它可以轻松构建SPA(Single Page Application，单页面应用程序) ，它的特征是：具有mvc的架构模式，便于模块化开发，自动化双向数据绑定和特有的指令系统。它最大限度的解放了Dom操作，让js代码更专注于业务逻辑的实现，通过简单的指令，结合页面结构和逻辑数据，通过自定义指令，实现组件化编程，代码结构更合理，维护成本更低。

 

四、Angular 架构概览

Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言（例如 Dart 或者 TypeScript ），来构建客户端应用的框架。

该框架包括一系列库，有些是核心库，有些是可选库。

我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML 模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。

然后，我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

当然，这只是冰山一角。后面我们将学习更多的细节。不过，目前我们还是先关注全景图吧。

 

这个架构图展现了 Angular 应用中的 8 个主要构造块：

·        模块 (module)

·        组件 (component)

·        模板 (template)

·        元数据 (metadata)

·        数据绑定 (data binding)

·        指令 (directive)

·        服务 (service)

·        依赖注入 (dependency injection)

接下来我按顺序并结合图来讲解一下。

1.      模块 (module)

Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。

Angular 或者 Ionic新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类(虽然他很像 java 中的注解，但是他的官方命名叫装饰器)。我们新建的页面，如果不使用懒加载，都要在 @NgModule 中先声明后使用。

下面举个例子，简单介绍一下 @NgModule 中的内容

//app.module.ts

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

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

@NgModule({

  imports:      [ BrowserModule ],

  providers:    [ Logger ],

  declarations: [ AppComponent ],

  exports:      [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

exportclassAppModule { }

·        imports 本模块声明的组件模板需要的类所在的其它模块。

·        providers 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。

·        declarations 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。

·        exports declarations 的子集，可用于其它模块的组件模板。

·        bootstrap 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。

在图中的意义：看图左上角，模块是用来接收一个用来描述模块属性元数据对象的。

2.      组件 (component)、模板 (template)、元数据 (metadata)

这次我们把这三点一起来讲，先看一下这段代码

//hero-list.component.ts

@Component({

selector:    'hero-list',

templateUrl:'./hero-list.component.html',

providers:  [ HeroService ]

})

export classHeroListComponentimplementsOnInit {

/* . . . */

}

 

组件是构成整个Angular应用的基础单元，而且这些组件层层嵌套，自上而下的形成一个组件树，大家对组件有了一个感性的认识，那么一个组件里面到底包含什么东西？

组件内部包含有JavaScript逻辑，还自带有JavaScript和CSS的渲染自己，所以每个组件都能独自的完成各自的功能。虽然每个组件各司其职，但组件以树的形式来组织，意味着组件之间不可能是孤立的存在，他们之间有着完善的通信机制。每个组件都可以定义自己的输入、输出属性，这些属性称为了组件对外的接口，负责与上下游的组件进行交互。

组件就是一个类，是Angular的核心。@Component 是组件元数据装饰器，用来修饰一个组件，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。

·        selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找 <hero-list> 标签，创建并插入该组件。

·        templateUrl：组件 HTML 模板的模块相对地址，如果使用 template 来写的话是用“`”这个符号来直接编写 HTML 代码。

·        providers：组件所需服务的依赖注入。

template 
模板就是那段 HTML 代码，可以用templateUrl 引入外面的，也可以用 template`` 直接写。

metadata 
元数据装饰器用类似的方式来指导 Angular 的行为。例如 @Input、@Output、@Injectable等是一些最常用的装饰器，用法就不在这里展开了。

在图中的意义：看图中间那一块，模板、元数据和组件共同描绘出这个视图。

3.      数据绑定 (data binding)

这里一共展示四种数据绑定，看一下示例代码：

1)          //插值表达式    显示组件的hero.name属性的值

<li>{{hero.name}}</li>

2)          //属性绑定    把父组件selectedHero的值传到子组件的hero属性中，也可以把组件中的属性绑定到模板中元素的dom属性上。

<hero-detail [hero]="selectedHero"></hero-detail>

3)          //事件绑定    用户点击英雄的名字时调用组件的selectHero方法

<li (click)="selectHero(hero)"></li>

4)          //双向绑定    数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值

<input [(ngModel)]="hero.name">

可能大家对各种括号看的眼花了，总结一下：

1.    双花括号是单向绑定，传递的是值。方向是 组件 -> 模板。

2.    方括号是单向绑定，传递的是属性。方向是 父组件 -> 子组件。

3.    圆括号是事件绑定，处理点击等活动（action）。

4.    方括号套圆括号是双向绑定，方向是 组件 <-> 模板。

在图中的意义：看图中间那一块，数据绑定给模板和组件提供数据交互的方式。

4.      指令 (directive)

严格来说组件就是一个指令，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。
我们这里提到的指令有两种类型： 
结构型 structural 指令和属性 attribute 型指令。 
放一下原文证明一下组件确实算是一个指令：

While a component is technically adirective, components are so distinctive and central to Angular applicationsthat this architectural overview separates components from directives. 
Two other kinds of directives exist: structural and attribute directives.

1)     结构型指令是 ngFor、ngIf 这种的，通过在 DOM 中添加、移除和替换元素来修改布局。

2)     属性型指令是 ngModel 这种的，用来修改一个现有元素的外观或行为。

Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch ），或者修改 DOM 元素和组件的各个方面（例如 ngStyle 和 ngClass）。

在图中的意义：看图右上角那一块，组件是一个带模板的指令，只是扩展了一些面向模板的特性。

5.      服务 (service)

官方文档的概念： 
服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务没有什么特别属于 Angular 的特性。Angular 对于服务也没有什么定义，它甚至都没有定义服务的基类，也没有地方注册一个服务。

这就像你在 iOS 或者 Android 里单独建了一个类叫httpService ，封装了网络请求服务一样，不是具体的什么东西，就是一个概念了解下就行。

在图中的意义：看图左下角角那一块，服务是用来封装可重用的业务逻辑。

6.      依赖注入 (dependency injection)

依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

比如我们要给某组件导入 HomeService 这个服务，看这段代码：

constructor(private service: HeroService){ 

    ...

}

这个constructor就是构造函数，依赖注入在 constructor 中进行。你也许会觉得前面写上 private、public（在构造函数内写上public会自动创建类的成员变量） 之类的很怪，这是 TypeScript 语法比较特殊，习惯就好。

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器injector。我们必须先用注入器 injector 为 HeroService 注册一个提供商 provider（服务）。

看一下下面的代码，意思就是我们必须在 providers 写上才能用（如果不在组件中注册，则需要在模块中注册）

@Component({

  selector:    'hero-list',

  templateUrl: './hero-list.component.html',

  providers:  [ HeroService ]

})

在图中的意义：看图左下角角那一块，依赖注入主要用来导入服务。

下一节我们将一步步搭建Angular官方文档中的《英雄指南》来进一步深入了解Angular。

注：本文面向的对象是Angular的初学者，欢迎各路大牛批评点错。

最后给大家推荐一些学习资源

《Angular权威教程》 
书内容不错，由浅入深，从网上买的正版纸质书，习惯PDF的朋友可以搜索一下电子书资源。

Angular2.0视频教程 
大漠穷秋出的教程，必看。

Angular中文文档 
官方文档，内容很全，需要一定的时间进行阅读。

TypeScript中文文档 
官方文档，至少要把 TS 的基本语法要去掌握了。

Rxjs官方文档中文翻译 
翻译质量不错，值得一看。

Angular 现在出到4.0 了，大家有可能会担心网上 Angular2.0 相关的内容会过时，其实不必有这种担心。 
按照官方的说法，从 2.0 版本开始出的新版本会保持向后兼容，不会出现 1 到 2 这么大的变化了，大家可以放心学习。