Angular2+简单入门

工作多年，难免会被问及Vue, React 和 Angular的区别，记录下本人的个人见解，也是总结多年的工作心得！

阅读文本之前，建议使用过Angular1.x或Vue或者React的小伙伴查看，因为部分术语，如指令、依赖注入等术语不做过多解释，具体可以查看Angular1.xx文档了解更多！

1.快速创建

打开官网环境搭建

1. 安装 Angular CLI

npm install -g @angular/cli

2. 创建项目

ng new my-app

3. 运行项目

cd my-app
ng serve

4. 浏览器打开 http://localhost:4200/ 即可。

2.组件

2.1.组件创建

ng generate component product-list

自动生成 product-list 文件夹

- app
|- product-list.component.html // html 模块
|- product-list.component.scss // css 模块
|- product-list.component.spec.ts // unit test 模块
|- product-list.component.ts // ts 模块

2.2.组件的生命周期

参考官网

1 ngOnChanges // 如果组件绑定过输入属性，那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。
2 ngOnInit // 第一次初始化指令/组件。
3 ngDoCheck // 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应
4 ngAfterContentInit // 当初始化完组件视图及其子视图或包含该指令的视图之后调用。
5 AfterContentChecked // 每当 检查完被投影到组件或指令中的内容之后调.ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
6 ngAfterViewInit // 当初始化完组件视图及其子视图或包含该指令的视图之后调用。第一次 ngAfterContentChecked() 之后调用，只调用一次。
7 ngAfterViewChecked // 每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。 ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。
8 ngDoCheck // 紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。
9 ngAfterContentChecked // 每当 Angular 检查完被投影到组件或指令中的内容之后调用。ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
10 ngAfterViewChecked // 每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。
11 ngOnDestroy // 每当 Angular 每次销毁指令/组件之前调用并清扫。

3.路由管理

1.需要手动配置 RouterModule.forRoot

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([ // 路由配置
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
    ])
  ],
  declarations: [ // ng generate component xxx后会自动加入声明列表
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductDetailsComponent,
  ],

2. declarations则是创建组件时会自动加入声明。

4.模块语法

1. *ngFor 是一个 “结构型指令”。结构型指令会通过添加、删除和操纵它们的宿主元素等方式塑造或重塑 DOM 的结构。任何带有星号 * 的指令都是结构型指令。

<div *ngFor="let product of products"> 
	...
</div>

3. 插值 {{}} -> 双向数据绑定的变量

<span> {{ product.name }}</span>

4. 属性绑定 []

   <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>```

5. 事件绑定 ()

```javascript
<div *ngFor="let product of products">
  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>
  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>
  <button (click)="share()">
    Share
  </button>
</div>

更多模块语法可以查阅官网

5.指令

1. 内置指令：NgClass，NgStyle， NgModel
2. 属性型指令：
   如创建myDirective 属性指令，如下：

ng generate directive myDirective

自动创建 指令文件
app/my-directive.directive.ts

import { Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
  // 自定义指令的内容
  constructor(private el: ElementRef) {
       this.el.nativeElement.style.backgroundColor = 'yellow';
    }
}

使用，如在product-list.component.html中使用

<p [appMyDirective]="color">text will backgroudColor is yellow</p>

3. 结构型指令： NgIf 、 NgForOf 、 NgSwitch
4. 组合指令

6.管理数据 （依赖注入）

1. 创建一个service

ng generate service myService

在app目录下会自动创建文件my-service.service.ts

import { Injectable } from '@angular/core';
@Injectable({  // 在项目根节点下以来注入
  providedIn: 'root'
})
export class MyServiceService {
  constructor() { }
  addItem(){
  // add item action
  }
  deleteItem(){
   // delete item action
  }
}

2. 使用，在product-list.component.ts 中

import { Component } from '@angular/core';
import { MyServiceService } from '../services/my-service.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent {
  constructor(
    private route: ActivatedRoute,
    private MyServiceService: MyServiceService // 注入自定义的service
  ) { }
// MyServiceService.addItem(xxx) // call MyServiceService function
}