Angular4笔记

Angular4笔记

参考资料：

• Angular 4.0 架构详解
• Angular 4.0 内置指令全攻略
• Angular 4.x 修仙之路

入门

 Angular 与 AngularJS 有什么区别

*   不再有Controller和 Scope
*   更好的组件化及代码复用
*   更好的移动端支持
*   引入了 RxJS 与 Observable
*   引入了 Zone.js，提供更加智能的变化检测

 基于 Angular CLI搭建开发环境

*   安装 Angular CLI (可选)

npm install -g @angular/cli

*   检测 Angular CLI 是否安装成功

ng --version

*   创建新的项目

ng new PROJECT-NAME

*   启动本地服务器

cd PROJECT-NAME
ng serve

架构

官方架构图

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

• 模块 (module)
• 组件 (component)
• 模板 (template)
• 元数据 (metadata)
• 数据绑定 (data binding)
• 指令 (directive)
• 服务 (service)
• 依赖注入 (dependency injection)

1.模块 (module)

Angular 或者 ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使用了模块化来创建应用，包括 AppModule，每个都会存在一个 @NgModule 装饰器的类。我们新建的页面，如果不使用懒加载，都要在 @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 ]
})
export class AppModule { }

• 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 class HeroListComponent implements OnInit {
/* . . . */
}

Component

组件是一个装饰器，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。

• selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找 标签，创建并插入该组件。
• templateUrl：组件 HTML 模板的模块相对地址，如果使用 template 来写的话是用“`”这个符号来直接编写 HTML 代码。
• providers：组件所需服务的依赖注入。

template

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

metadata

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

3.数据绑定 (data binding)

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

//插值表达式    显示组件的hero.name属性的值
<li>{{hero.name}}li>

//属性绑定    把父组件selectedHero的值传到子组件的hero属性中
<hero-detail [hero]="selectedHero">hero-detail>

//事件绑定    用户点击英雄的名字时调用组件的selectHero方法
<li (click)="selectHero(hero)">li>

//双向绑定    数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值
<input [(ngModel)]="hero.name">

1. 双花括号是单向绑定，传递的是值。方向是 组件 -> 模板。
2. 方括号是单向绑定，传递的是属性。方向是 父组件 -> 子组件。
3. 圆括号是事件绑定，处理点击等活动（action）。
4. 方括号套圆括号是双向绑定，方向是 组件 <-> 模板。

4.指令 (directive)

指令有两种类型：结构型 structural 指令和属性 attribute 型指令。

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

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

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

// .ts

this.userInfo = ['张三', '李四', '王五'];

// .html

<div class="ui list" *ngFor="let username of userInfo">
    <div class="item">{{username}}div>
div>

ngSwitch

作用：防止条件复杂的情况导致过多的使用 ngIf。

例子：

// .html

<div class="container" [ngSwitch]="myAge">
    <div *ngSwitchCase="'10'">age = 10div>
    <div *ngSwitchCase="'20'">age = 20div>
    <div *ngSwitchDefault="'18'">age = 18div>
div>

讲解：

[ngSwitch] 先与目标进行绑定，ngSwitchCase 列出每个可能性，ngSwitchDefault 列出默认值。

ngStyle

作用：可以使用动态值给特定的 DOM 元素设定 CSS 属性。

例子：

// .ts
backColor: string = 'red';

// .html
<div [style.color]="yellow">
    你好，世界
div>
<div [style.background-color]="backColor">
    你好，世界
div>
<div [style.font-size.px]="20">
    你好，世界
div>
<div [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size.px': '20'}">
    你好，世界
div>

讲解：

1. 直接设置颜色为 yellow。
2. 设置背景颜色为 backColor，并可以在 .ts 文件中对 backColor 的值进行修改。
3. 设置字体大小，需要注意的是 只写 font-size 会报错，必须在后面加上 .px。当然 .em .% 都是可以的。
4. 前三种都是只设置一个，写 [ngStyle] 可以同时写多个，使用花括号包住里面的内容。需要注意的是连字符 - 是不允许出现在对象的键名当中的，如果使用 background-color 等时需要加上单引号。

ngNonBindable

作用：告诉 Angular 不要绑定页面的某个部分。

例子：

.html

<div ngNonBindable>
    {{我不会被绑定}}
div>

讲解：

使用了 ngNonBindable ，花括号就会被当做字符串一起显示出来。

5.服务 (service)

服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务是用来封装可重用的业务逻辑。

6.依赖注入 (dependency injection)

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

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

constructor(private service: HeroService) { 
    ...
}

这个constructor就是构造函数，依赖注入在 constructor 中进行。

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

意思就是我们必须在 providers 写上才能用，看这段代码：

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})