簡介

由angular的cli（腳手架）創建出來的專案可知，angular專案由模組(module)構建成，每個angular應用都至少有一個根模組,通常我們預設為AppModule模組。然後每個模組由元件+服務組成。

目錄

1. angular模組分析
2. angular元件分析
3. angular服務分析

angular模組分析

angular模組是由裝飾器@ngModule來修飾，裡面包含的元資料有：

1. declarations 宣告本模組所用到的元件，管道以及指令
2. imports 引入本模組需要的其他模組
3. providers 全域性模組的服務建立器，註冊之後，在任何模組都可以使用
4. bootstrap 應用的主檢視，只有根模組才需要使用。也就是程式的主入口宣告模組
5. exports 匯出本模組的元件可供給其他模組使用

通常我們建立專案預設的根模組在app.module.ts檔案中，引導這個根模組就可以啟動我們自己的應用了。
如圖：

注：exports屬性一般不會匯入根元件(AppComponent)，因為其它模組永遠不需要匯入根模組。

angular元件分析

angular元件元件是由裝飾器@Component來修飾，裡面包含的元資料物件屬性有:

1. selector css的選擇器，一旦在html中找到所對應的標籤，就會例項化該元件。
2. templateUrl 顯示元件檢視頁面HTML的所在位置。
3. styleUrls 顯示元件檢視樣式的地址。
4. providers 當前元件所需的依賴注入提供商的資料

如圖:

注：你還可以用 template 屬性的值來提供內聯的 HTML 模板。 這個模板定義了該元件的宿主檢視。

  template : `<h1>hello</h1>
               <div>...</div>`

angular服務分析

angular把元件和服務給分離開是為了程式更好的擴充套件性，以及複用性，服務由裝飾器@Injectable修飾。

如圖:

圖中建立了一個LoggerService服務，其中用@Injectable所修飾。那麼我們可以在元件中來呼叫該服務：
1.首先我們在app.component.html建立3個按鈕，構造它們的點選事件：

<button (click)="onclik(1)">提示</button>
<button (click)="onclik(2)">提示1</button>
<button (click)="onclik(3)">提示2</button>

注：（click）在angular中屬於點選事件。
2.我們繼續在app.component.ts的構造方法傳入該service：

@Component({
  selector: 'app-root',//css的選擇器，一旦在html中找到所對應的標籤，就會例項化該元件。
  templateUrl: './app.component.html',//該元件檢視頁面HTML的地址。
  styleUrls: ['./app.component.css'],//該元件檢視樣式的地址.
  providers: []//當前元件所需的依賴注入提供商的資料
})
export class AppComponent{

  constructor(private service:LoggerService) {
  }
  onclik(data: number) {
    if (data === 1) {
      this.service.log("log");
    } else if (data === 2) {
      this.service.warn("warn");
    } else if (data === 3) {
      this.service.error("error");
    }
  }
}

如果用上面方式開啟ng serve開啟專案會報以下錯誤：

AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: StaticInjectorError(AppModule)[AppComponent -> LoggerService]: 
  StaticInjectorError(Platform: core)[AppComponent -> LoggerService]: 
    NullInjectorError: No provider for LoggerService!
    at _NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10854)
    at NgModuleRef_.get (core.js:12087)
    at resolveDep (core.js:12577)

上述錯誤是我們沒有在provider中注入LoggerService，我們應該把所有的服務中注入到provider中，在這裡程式啟動會自動幫我們例項化該服務物件。

修改之後：

@Component({
  selector: 'app-root',//css的選擇器，一旦在html中找到所對應的標籤，就會例項化該元件。
  templateUrl: './app.component.html',//該元件檢視頁面HTML的地址。
  styleUrls: ['./app.component.css'],//該元件檢視樣式的地址.
  providers: [LoggerService]//當前元件所需的依賴注入提供商的資料
})

@Injectable（）

@Injectable（）修飾器是否必須要？
首先我們把上面LoggerService中的修飾器@Injectable刪除之後，發現程式依舊可以執行起來。

猜想：LoggerService是獨立執行起來的，根本沒有依賴別的物件，相當於一個簡單的類。那我們試試在LoggerService注入別的Service看看。

新建一個Service：

export class HeroService {
  heros: { id: number; name: string } =
    { id: 11, name: 'Mr. Nice' }
  getHeros() {
    return this.heros;
  }
}

import { Injectable } from '@angular/core';
import { HeroService } from './hero.service';

export class LoggerService {

  constructor(heroService:HeroService){

  }

  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

這次我們在LoggerService中沒有新增@Injectable（），在構造方法傳入HeroService,然後把HeroService注入到Provider中避免出現上面錯誤。執行程式：

compiler.js:485 Uncaught Error: Can't resolve all parameters for LoggerService: (?).
    at syntaxError (compiler.js:485)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15700)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15535)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js:15515)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15875)
    at eval (compiler.js:15786)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15746)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:15007)
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15848）

上面異常資訊說明無法解析 LoggerService的所有引數，加上@Injectable之後專案可以執行起來。

總結：

@Injectable() 是必須的麼？

如果所建立的服務不依賴於其他物件，是可以不用使用 Injectable 類裝飾器。但當該服務需要在建構函式中注入依賴物件，就需要使用 Injectable 裝飾器。不過比較推薦的做法不管是否有依賴物件，在建立服務時都使用 Injectable 類裝飾器。