标签：混合 响应 模块 tar 包括 扩展 for 导航 技术
1. 一些概念：
（1）元数据：描述的是装饰器
@Component({
selector: ‘app-hero-list‘,
templateUrl: ‘./hero-list.component.html‘,
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
所以后面看到什么 【@NgModule 的元数据】其实说的就是 这个装饰器配置对象的 属性
（2）模块
通常称之为（angular 模块 / ngModule）
作用：
一个 app 一定有且只有一个 根模块
作为容器，用于存放一些内聚的代码块
任何模块都能包含任意数量的其它组件
NgModule 为 该模块中的 组件 提供了 一个 编译上下文环境
（3）组件
控制了视图的一小部分区域
包括 html、css、js
在类中定义组件的应用逻辑，为视图提供支持
组件通过一些由属性和方法组成的 API 与视图交互
当用户使用 app 时，会引发 angular 组件的创建、更新、销毁
可以在 诸如 onInit() 这样的 生命周期钩子 中执行逻辑
@Component({
selector: ‘app-hero-list‘,
templateUrl: ‘./hero-list.component.html‘,
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
}
（4）视图 = 模板 + 组件
其实就是看的见的网页：
都是视图，分为：
就是一个 html，作为父亲的存在
可以写普通 html，也可以放 angular 定义的组
也是一个 html，作为子的存在
所谓宿主视图，是指在定义一个组件时，@Component 装饰器元数据之 templateUrl 指定的 html 资源
（5）模板
很像标准的 HTML，但是它还包含 Angular 的模板语法，
（可以在 其组件的层面上，称之为 宿主视图
也可以在 包含子组件 的层面上，称之为 模板视图）
模板语法：
可以根据你的 组件逻辑、组件状态 和 DOM 数据 来修改这些 HTML
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
*ngFor 指令告诉 Angular 在一个列表上进行迭代
{{hero.name}}、(click) 和 [hero] 把程序数据绑定到及绑定回 DOM，以响应用户的输入。更多内容参见稍后的数据绑定部分
模板中的 <app-hero-detail> 标签是一个代表新组件 HeroDetailComponent 的元素。
HeroDetailComponent（代码略）定义了 HeroListComponent 的英雄详情子视图。 注意观察像这样的自定义组件是如何与原生 HTML 元素无缝的混合在一起的
（6）双向数据绑定
<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>
从组件到 DOM / 从 DOM 到组件 / 双向
（7）管道
（
作为之前开发过 vue 的我，感觉就是 vue 中的 过滤器 {{ timeStick | diyTimeShow }}
）----→
声明 显示值 的转换逻辑
带有 @Pipe 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值
angualr 自带了很多管道 ，比如
完整的列表参见 Pipes API 列表。你也可以自己定义一些新管道
可以把管道串联起来，把一个管道函数的输出送给另一个管道函数进行转换
管道还能接收一些参数，来控制它该如何进行转换。比如，你可以把要使用的日期格式传给 date 管道：
<!-- Default format: output ‘Jun 15, 2015‘-->
<p>Today is {{today | date}}</p>
<!-- fullDate format: output ‘Monday, June 15, 2015‘-->
<p>The date is {{today | date:‘fullDate‘}}</p>
<!-- shortTime format: output ‘9:43 AM‘-->
<p>The time is {{today | date:‘shortTime‘}}</p>
（8）指令
指令就是一个带有 @Directive() 装饰器的类
在模板中，指令通常
分类：
从技术角度上说 组件就是一个指令，但是由于组件对 Angular 应用来说非常独特、非常重要，
因此 Angular 专门定义了 @Component() 装饰器，它使用一些面向模板的特性扩展了 @Directive() 装饰器。
通过添加、移除或替换 DOM 元素来修改布局
<li *ngFor="let hero of heroes">{{ hero.name }}</li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>
*ngFor 是一个迭代器，它要求 Angular 为 heroes 列表中的每个英雄渲染出一个 <li>
*ngIf 是个条件语句，只有当选中的英雄存在时，它才会包含 HeroDetail 组件。
会修改现有元素的外观或行为。
在模板中
看起来就像普通的 HTML 属性一样，因此得名“属性型指令”
ngModel 指令就是属性型指令的一个例子，它实现了双向数据绑定
ngModel 修改现有元素（一般是 <input>）的行为：设置其显示属性值，并响应 change 事件
<input [(ngModel)]="hero.name">
（9）
（10）
（11）
（12）
（13）
（14）
（15）
（16）
（17）
（18）
11
1
1
1
1
11
标签：混合 响应 模块 tar 包括 扩展 for 导航 技术
原文地址：https://www.cnblogs.com/tianxiaxuange/p/13515258.html
