angular2学习笔记

demo设计原则：

• 用vscode编辑器。
• 构建原型图原型，想好逻辑。
• 围绕所学的内容。
• ts文件和class的命名规则

angular整体认识

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

下面根据官网Demo介绍知识点

编辑器

• main.ts

platformBrowserDynamic().bootstrapModule(Module);
platformBrowserDynamic在@node_module/angular/platform-browser-dynamic中
应用启动

• module.ts

@NgModule 声明根模块,其中属性有：

1. declarations 声明视图类
2. imports 导入全局组件模块
3. providers 创建服务到全局服务列表中，可用于任何部分
4. bootstrap 指定主视图，是其他视图的宿主，只能根模块设置

• components.ts

  @Component用来把紧随其后的类标记标记成组件类，其中配置项有：

  1. moduleId 为templateUrl提供根地址
  2. selector 组件标签名
  3. templateUrl 为模板提供相对地址
  4. template 页面模板
  5. providers 组件所需服务（依赖注入，提供数据）

• 其他

1. ``实现多行模板,方便编写
2. {{hero.name}} 单向数据绑定的“插值表达式”
3. [(ngModel)]="hero.name"所需FormsModule模块，实现双向绑定
4. *ngFor

主从结构

该部分内容是构建数据数组，展示列表。其中知识点：

1. *ngIf 是否展示数据
2. (click)="onSelect(hero)" cell点击
3. [class.selected]="hero === selectedHero" 属性绑定

多组件

把具有单一职责的组件剥离出来，达到可复用原则，其中知识点：

1. @Input()装饰器
2. 在app.module里声明新增模块，供其他模块引用
3. 在@Component里的selector定义标签名
4. 单一职责原则

服务(数据服务)

1. 基于承诺(Promise)的数据服务
2. mock模拟数据，不要和UI耦合
3. @Injectable()数据注入
4. constructor初始化class
5. OnInit周期

路由

路由器是一个可选的外部Angular NgModule，其包含多条指令（RouterOutlet、RouterLink、RouterLinkActive），在@angular/router中，名叫RouterModule。

1. index.html添加<base href="/">
2. 配置路由

import { RouterModule } from '@angular/router';
NgModule({
   imports: [
       BrowserModule, 
       FormsModule,
       RouterModule.forRoot([
           {
               path: 'heros',
               component: HerosComponent
           }
       ])
   ]
   .
   .
   .
path: 路由器会用它来匹配浏览器地址栏中的地址，如heroes。
component: 导航到此路由时，路由器需要创建的组件（HeroesComponent）。

3. 添加路由链接

template:`
   <h1>{{title}}</h1>
   <a routerLink="/heros">Heros</a>
   <router-outlet></router-outlet>
   `

4. 首页重定向

{
   path: '',
   redirectTo: '/dashboard',
   pathMatch: 'full'
}

5. 共享HeroService(单例)

app.module.ts
@NgModule({
   providers: [HeroService]
})

6. 配置带参数路由

{
   path: 'detail/:id',
   component: HeroDetailComponent
}

7. 跳转路由另一种方式

this.router.navigate(['/detail', this.selectedHero.id]);