angular4学习笔记（一）

一：架构
1、模块
Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。

每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。Angular 模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。

ngModule是一个装饰器函数，接受一个用来描述模块属性的元数据对象。其中最重要属性是：

a、declarations–声明本模块中拥有的视图类：组件、指令、和管道。
b、exports–declarations的子集，可用于其他模块的组件模板。
c、imports–本模块声明的组件模板需要的类所在的其他模块
d、providers–服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
e、bootstarp–指定应用视图的主视图，是所有其他视图的宿主（称为根组件）。只有根模块能设置bootstrap属性。

2.组件

组件负责控制屏幕上的一小块区域，我们称之为视图。

当用户在这个应用中漫游时， Angular 会创建、更新和销毁组件。 应用可以通过生命周期钩子在组件生命周期的各个时间点上插入自己的操作，例如上面声明的ngOnInit()。

3.模板：templates
模板以 HTML 形式存在，告诉 Angular 如何渲染组件。通过组件的自带的模板来定义组件视图。

4.元数据：Metadata
元数据告诉大家如何处理一个类。

在TypeScript中，我们用装饰器 (decorator) 来附加元数据。 下面就是HeroListComponent的一些元数据。

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

这里看到@Component装饰器，它把紧随其后的类标记成了组件类。

@Component装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。@Component里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。

@Component的配置项包括：
（1）selector： CSS 选择器，它告诉 Angular 在父级 HTML 中查找标签，创建并插入该组件。

（2）templateUrl：组件 HTML 模板的模块相对地址，如前所示。

（3）providers - 组件所需服务的依赖注入提供商数组。 这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以从服务中获得英雄数据。

5.数据绑定：

据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。

<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

（1）{{hero.name}}插值表达式在

• 标签中显示组件的hero.name属性的值。
  （2）[hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。
  （3）(click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。
  （4）双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能

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

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

  6.指令：directive
  (组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。)

  (1)属性 (attribute) 型指令:修改一个现有元素的外观或行为。
  往往像属性 (attribute) 一样出现在元素标签中， 偶尔会以名字的形式出现，但多数时候还是作为赋值目标或绑定目标出现。

  (2)结构型指令通过在 DOM 中添加、移除和替换元素来修改布局。

  <li *ngFor="let hero of heroes"></li>
  <app-hero-detail *ngIf="selectedHero"></app-hero-detail>

  解析：
  *ngFor告诉 Angular 为heroes列表中的每个英雄生成一个<li>标签
  *ngIf表示只有在选择的英雄存在时，才会包含HeroDetail组件。

  7.服务
  服务是一个广义范畴，包括：值、函数，或应用所需的特性。

  典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。

  8.依赖注入
  大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。Angular 通过查看构造函数的参数类型得知组件需要哪些服务。

  当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 (injector)。

  constructor(private service: HeroService) { }

  注入器维护了一个服务实例的容器，存放着以前创建的实例。 如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时，Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

  二、模板与数据绑定
  1.显示数据
  使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如{{myHero}}。

  当我们通过main.ts中的AppComponent类启动时，Angular 在index.html中查找一个元素， 然后实例化一个AppComponent，并将其渲染到标签中。

  变量赋值的方式初始化组件，你还可以使用构造函数来声明和初始化属性。

  2.模板语法
  （1）插值表达式：{{…}}

  插值表达式可以把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值。

  （2）模板表达式：{{1 + 1}}
  模板表达式产生一个值

  （3）attribute、class 和 style 绑定
  attribute绑定：

    <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  

  style 绑定：

  <button [style.color]="isSpecial ? 'red': 'green'">Red</button>
  <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

  NgStyle 指令
  <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
This div is x-large or smaller.
</div>

  class 绑定：

  <div [class.special]="isSpecial">The class binding is special</div>
  

  （4）事件绑定

  <button (click)="onSave()">Save</button>

  （5）内置型属性型指令：
  ngClass.ngStyle.ngModule

  <div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
  
  <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
    This div is x-large or smaller.
  </div>
  
  <input [(ngModel)]="currentHero.name">
  

  （6）内置结构型指令
  NgIf - 根据条件把一个元素添加到DOM中或从DOM移除
  NgSwitch - a set of directives that switch among alternative views
  NgSwitch - 一组指令，用于切换一组视图
  NgForOf - 对列表中的每个条目重复套用同一个模板

  （7）模板引用变量
  使用井号 (#) 来声明引用变量。#phone的意思就是声明一个名叫phone的变量来引用元素。

  <input #phone placeholder="phone number">