快速入門Angular(一)：ngModule、Component、Service

Module、Component、service 層級關係

層級：Module > Component > service
一個Module有多個Component組成
一個Component可以注入多個service

@NgModule

• imports：用來放會用到的其他Module
  • 此Module所需用到其他Module，可能Angular提供的或三方提供的Angular資源庫，如FormsModule、HttpModule
• declarations：用來放置Component
  • 此Module內部Components/Directives/Pipes的列表，類似宣告這個Module的內部成員
  • 讓此Module內部其他Components內HTML裡，直接使用其selector
• providers：用來放置service
  • 供此Module使用的service，內部Component要用到時，直接注入service就可以使用
• exports：控制將哪些內部成員公開給外部使用
• bootstrap：只有主要啟動的根模組才需要設定，指定Angular首次啟動後要進入的根Module

@Component

• selector：指定HTML檔中要掛載的class名稱
• templateUrl：指定HTML檔路徑，只有一個
• styleUrls：指定css檔路徑，可以為多個，是一陣列
• providers：用來放置service
  • 僅此Component使用的service，會實例化自己專屬的service

善用@Angular/Cli 來建立元件

會自動把建立出來的元件，加到@NgModule裡面，可以省掉不少功夫，也可以避免自己建好後卻又忘記補在Module裡面
若有自定放置的路徑，則在最後面參數指定
如：ng g component components/User
會在當前目錄下建立components/User，裡面再放html、css、ts檔