Angular2+简单入门

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

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

Angular2+的核心思想

  • 1.快速创建
  • 2.组件
    • 2.1.组件创建
    • 2.2.组件的生命周期
  • 3.路由管理
  • 4.模块语法
  • 5.指令
  • 6.管理数据 (依赖注入)

1.快速创建

打开官网环境搭建

  1. 安装 Angular CLI
npm install -g @angular/cli
  1. 创建项目
ng new my-app
  1. 运行项目
cd my-app
ng serve
  1. 浏览器打开 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,
  ],
  1. declarations则是创建组件时会自动加入声明。

4.模块语法

  1. *ngFor 是一个 “结构型指令”。结构型指令会通过添加、删除和操纵它们的宿主元素等方式塑造或重塑 DOM 的结构。任何带有星号 * 的指令都是结构型指令。
<div *ngFor="let product of products"> 
	...
</div>
  1. 插值 {{}} -> 双向数据绑定的变量
<span> {{ product.name }}</span>
  1. 属性绑定 []
   <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>
  1. 结构型指令: NgIf 、 NgForOf 、 NgSwitch
  2. 组合指令

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
  }
}
  1. 使用,在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
}

你可能感兴趣的:(angular2,前端,javascript,前端,angular.js,Angular2)