組件
組件就是一個html+css+js的集合體，可以是一個按鈕，一個輸入框，一個彈層，或者一個頁面，每個組件都有它自己外觀和行爲。
其中：
Css定義了組件的樣式：比如字體大小，背景色
Ts定義了組件行爲：比如單擊發生什麼，輸入發生是麼
Html定義了組件的內容：比如有標題或者文章內容
下面的這些都是組件
比如界面上的控件：
也可以是對話框
當然也可以是頁面
由此可以看出，組件本質是頁面上的一個區域，一個功能塊，具有自己的外觀和行爲
並且可以相互嵌套
比如對話框組件由按鈕組件和文本組件構成，頁面組件由表格組件，按鈕組件構成。
基於組件的好處是可以避免提高代碼的重用型
模塊
Angular 應用是模塊化的，它擁有自己的模塊化系統，稱作 NgModule。 一個 NgModule 就是一個容器，用於存放一些內聚的代碼塊，這些代碼塊專注於某個應用領域、某個工作流或一組緊密相關的功能。
根據組件的概念可知， 組件纔是用戶可以看到的，直接操作的對象，模塊就是用來組織和歸類組件的一塊功能。下面是一張系統模塊劃分圖示例
app模塊：整個應用的根模塊，表示整個應用的功能。
訂單模塊：專注於訂單業務和頁面集合
用戶模塊：專注於用戶模塊的頁面集合
重點：一個組件必須且只能屬於一個模塊
這裏面有兩層含義：
（1）組件必須屬於一個模塊，如果這個組件不屬於任何模塊，則它無法被angular加載並顯示在界面上
（2）組件只能屬於一個模塊，比如上面的訂單頁面組件，屬於訂單模塊，就不能再把他劃給用戶模塊。
下面來看看ngModule的用法
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
imports: 導入其他模塊，表示該模塊依賴其他模塊的組件
declarations: 聲明哪些組件屬於該模塊
exports: 聲明哪些組件可以被導出，其他模塊引入該模塊時，可以使用該模塊導出組件
providers：申明該模塊使用哪些service（service後面將會講解）
bootstrap：模塊的啓動組件（這個一般在app根模塊纔會使用，後面會講解）
模塊起到的作用：
（1）將系統的不同功能的組件分門別類
（2）確定不同模塊的依賴關係，可以實現懶加載，提高啓動速度
（3）可以避免組件重名帶來的問題，只要保證同一個模塊名字一致就行
服務
服務本質上是實現一定內聚功能的代碼塊，它常常表現爲一個class
（類似於java中service層實現類，其實這部分的和spring用的同一種思想-依賴注入）
1 先定義service
@Injectable()
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}
這個@injectable()表示這個類可以被其他組件引用
（java中相當於@Service註解）
2 在模塊中聲明，表示該模塊使用此service
@NgModule({
.......
providers: [ Logger ],
.....
})
3 在需要的組件中通過constructor構造器注入
export class HelloComponent {
constructor(
private logger: Logger) { }
show() {
this.logger.warn("這是一個警告");
}
}