Angular 常用概念

wind5o 發(fā)布于2019-08-22 14:04 / 2802人閱讀

摘要：模塊與裝飾器設(shè)計(jì)目標(biāo)就是適應(yīng)大型應(yīng)用的開發(fā)，模塊的概念就是來組織不同的組件及服務(wù)。

1.模塊與裝飾器

Angular設(shè)計(jì)目標(biāo)就是適應(yīng)大型應(yīng)用的開發(fā)，模塊的概念就是來組織不同的組件及服務(wù)。一個(gè)大型應(yīng)用的最終形態(tài)就是各種不同的模塊的組合

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent }  from "./app.component";
import { HeroService } from "./hero.service";

//NgModule裝飾器將AppModule類標(biāo)記為Angular組件
@NgModule({ 
   //裝飾器就是一個(gè)函數(shù)，作用是將元數(shù)據(jù)添加到緊跟在后面的類、類成員（屬性、方法）和函數(shù)參數(shù)
  imports:      [ BrowserModule ], //導(dǎo)入本模塊中所需要的其他非自定義的模塊
  providers:    [ HeroService ],  //服務(wù)模塊，并自動加入到全局的服務(wù)列表中
  declarations: [ AppComponent ], //聲明本模塊中的組件，指令和管道
  bootstrap:    [ AppComponent ]  //根組件，
})
export class AppModule { }  //導(dǎo)出的根模塊

2.組件、指令、管道

組件在Angular中處于中心地位，但也是指令的一種，我把組件看做是含有模板的指令，管道就是anuglarjs中的過濾器，具體有哪幾種，可以參考Anugular的官方API Angular內(nèi)置管道
自定義組件

import { Component } from "@angular/core";

@Component({ //@Component裝飾器將HeroDetailComponent類標(biāo)記為Angular組件
    //內(nèi)部的數(shù)據(jù)稱為元數(shù)據(jù)，其它元數(shù)據(jù)裝飾器用類似的方式來指導(dǎo) Angular 的行為。 
    //例如@Injectable、@Input、@Output等
  selector: "hero-detail",
  templateUrl: "../somewhere.html",
  styleUrls: ["./any.css"]
})

export class HeroDetailComponent {
    //僅僅是一個(gè)類，看不到Anugular框架的影子
}

自定義指令

//指令有屬性型指令和結(jié)構(gòu)型指令 和組件
import { Directive, ElementRef, Input } from "@angular/core";

//ElementRef注入到構(gòu)造函數(shù)中，這樣指令才能訪問DOM
//Input 將數(shù)據(jù)傳入指令中
@Directive({ selector: "[appHighlight]" })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = "yellow";
    }
}

自定義管道

The hero"s birthday is {{ birthday | date："yyyy.MM.dd" }}

The current pipe {{ somevalue | paramStrength："number" }}
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({name: "paramStrength"})
export class ExponentialStrengthPipe implements PipeTransform {
//implements是一種類實(shí)現(xiàn)某個(gè)接口的寫法，這樣就可以使用對應(yīng)接口里面的方法，如這里的transform
  transform(value: number, params: string): number {
    //value是輸入值，params是傳入的參數(shù)
    //value對應(yīng)上面的somevalue， params對應(yīng)上面的number
    let exp = parseFloat(exponent);
    return value + exp ;
  }
}

3.服務(wù)

服務(wù)可以為對數(shù)據(jù)的獲取和各種處理，組件就是服務(wù)的消費(fèi)者，通過依賴注入在組件中使用服務(wù)

import { Injectable } from "@angular/core";
import { Logger } from "../logger.service";

@Injectable({})
export class HeroService {
  //服務(wù)里面注入其他的服務(wù)，通過依賴注入，相當(dāng)于執(zhí)行了new的操作，又沒有副作用
  constructor(private logger: Logger){}
}

4.生命周期

就是被Anuglar管理的組件的生命周期鉤子，對應(yīng)的有鉤子里面的方法

import { OnInit, OnDestroy } from "@angular/core";

//OnInit接口里面的ngOnInit方法
export class PeekABoo implements OnInit, OnDestroy {
  constructor() { }

  // implement OnInit"s `ngOnInit` method
  ngOnInit() { 
    console.log("組件初始化");
  }

  ngOnDestroy(){
    console.log("組件退出時(shí)實(shí)現(xiàn)的方法");
  }
}