Angular Note

1.双向绑定

在需要使用的HTML中使用[(ngModel)]进行数据绑定：

name: {{hero.name}}

name:

如果直接使用会报错，需要在app.module.ts中导入‘FormsModule’：
import {FormsModule} from “@angular/forms”;
然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中，这里是该应用所需外部模块的列表：
@NgModule({
…
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
…
})

2.Pipe

https://blog.youkuaiyun.com/xnh_565175944/article/details/82115710

3.Appmodule.ts

https://www.jianshu.com/p/99f52d363693

• Appmodule.ts

定义 AppModule，这个根模块会告诉 Angular 如何组装该应用。 目前，它只声明了AppComponent。 稍后它还会声明更多组件。

//Angular 模块类描述应用的部件是如何组合在一起的。 每个应用都至少有一个 Angular 模块，也就
是根模块，
// 用来引导并运行应用。 你可以为它取任何名字。常规名字是 AppModule。 也就是 app.module.ts
文件
/*引入组件*/
import { BrowserModule } from '@angular/platform-browser'; /*BrowserModule，浏览器解
析的模块*/
import { NgModule } from '@angular/core'; /*angualrjs 核心模块*/
import { FormsModule } from '@angular/forms'; /*表单数据绑定 表单验证需要的模块*/
import { HttpModule } from '@angular/http'; /*数据请求模块*/
import { AppComponent } from './app.component'; /*根组件*/
/*@NgModule 装饰器将 AppModule 标记为 Angular 模块类（也叫 NgModule 类）。
@NgModule 接受一个元数据对象，告诉 Angular 如何编译和启动应用。*/
@NgModule({
 declarations: [ /*引入当前项目运行的的组件*/
 AppComponent
 ],
 imports: [ /*引入当前模块运行依赖的其他模块*/
 BrowserModule,
 FormsModule,
 HttpModule
 ],
 providers: [], /*定义的服务 回头放在这个里面*/
 bootstrap: [AppComponent] /* 指定应用的主视图（称为根组件） 通过引导根 AppModule 来启动
应用 ，这里一般写的是根组件*/
})
/*根模块不需要导出任何东西， 因为其它组件不需要导入根模块。 但是一定要写*/
export class AppModule { }

• 创建新组件

ng g component components/header

• 新组件内容

import { Component, OnInit } from '@angular/core'; /*引入 angular 核心*/
@Component({
 selector: 'app-header', /*使用这个组件的名称*/
 templateUrl: './header.component.html', /*html 模板*/
 styleUrls: ['./header.component.css'] /*css 样式*/
})
export class HeaderComponent implements OnInit { /*实现接口*/
 constructor() { /*构造函数*/
 }
 ngOnInit() { /*初始化加载的生命周期函数*/
 }
}