[Angular2]建立簡單的Angular 2 NgModule與Components

更新至Angular 2.0正式版，router 3.0

關注Angular 2的童鞋可能都注意到了，RC 5中「又」把NgModule的概念引入進來了，至於爲何說是又，相信作過Angular 1.x的童鞋應該都知道吧 凸^-^凸

今天咱們會主要講一下NgModule的基本理念，以及module與component之間的關係，最後咱們會寫兩個簡單的components，但願能夠給你們一點啓發～

@NgModule Angular 2的模塊化

官方版本：Angular 2引入NgModule主要就是爲了實現模塊話，爲了把某塊業務區域相關的一系列組件（component），指令（directive），服務（service）內聚到一個模塊中，便於管理，也便於打包（這纔是重點吧）

個人理解：贊成🙆官方說法，可是我以爲引入NgModule更大的用途是爲了更好的支持Lazy Loading，要想在單頁應用（SPA）中作Lazy loading就要作到很好的做用域的隔離，也就是NgModule的概念，要作到高內聚低耦合。有點扯遠了。。。下面咱們就來看看Angular 2裏NgModule是怎麼用的

從上圖能夠很容易看出來，最主要的就是Root Module也就是根模塊，若是是中小型網站或者App只要一個模塊也就是根模塊其實就夠了，這也是咱們今天主要講的內容，至於多個modules的狀況，我會結合Lazy Loading在以後的博客中介紹，敬請期待～^_^

@Component與NgModule

若是一直關注Angular 2的童鞋可能會注意到，上面的Root Module其實就是RC 5以前的Root Component的概念～ feature component須要依附於root component，而後在RC 5 以後，只是簡單的把component依附在了module下面，因此理解起來仍是很容易的～～～

實戰

既然咱們都說了這麼多關於NgModule與Component的概念，那咱們就動手寫一個簡單的module與component吧～

下面的代碼是在咱們上一篇博客的基礎上開發的，因此沒有搭建起環境的童鞋請先回顧一下上一篇：[Angular2]比Angular2官方更容易理解的Quick Start

目錄變化

今天咱們就寫兩個簡單的components，先來看看與上一次相比咱們的目錄結構變化，咱們主要建立了兩個文件夾：footer 和 header（主要存放咱們的兩個components），還有就是一個Angular 2的LOGO放在了asserts文件夾裏

Header Component

咱們先看一下Header component，直接上代碼：能夠發現其實很簡單，只須要指定簡單的template與style的路徑, selector 就是咱們的header將會顯示的地方，替換<wk-header>標籤

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

@Component({
    moduleId: 'app/common/components/header/',
    selector: 'wk-header',
    templateUrl: `header.html`,
    styleUrls: ['header.css']
})
export default class HeaderComponent { }

header.html

<header>
    <div class="header">
        <img src="app/common/assets/img/angular.png">
    </div>
</header>

header.css

header {
display: block;
min-height: 60px;
padding: 8px 20px 0px 20px;
background: #0273D4;
border: 0;
}

.header {
width: 100%;
padding: 0 0 12px 0;
}

img {
width: 66px;
height: 66px;
}

App Component

Header組件是怎麼加入到入口文件的呢？？？ 下面咱們來看看app.component.ts文件裏咱們都作了什麼：
首先咱們import咱們的兩個組件footer, header
而後用component的selector標籤寫到你想組件出現的地方（只要你的組件是能夠重用的，什麼地方均可以哦~~，是否是很爽~~~）

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

@Component({
  selector: 'wk-app',
  template: `
    <wk-header></wk-header>
    <main>
        <h1>Hello Angular2 !</h1>
    </main>
    <wk-footer></wk-footer>
  `,
  styles: [`
       main {
             height: 300px;
             text-align: center;
            }
`]
})
export default class AppComponent { }

App Module

關於App Component怎麼注入到咱們的Root Module裏，上一篇：[Angular2]比Angular2官方更容易理解的Quick Start 中其實已經牽扯到了， 咱們只須要聲明一下咱們的根模塊AppComponent，並引入到啓動模塊中就搞定了。就是如此簡單～～

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';

import AppComponent from './common/components/app.component';
import HeaderComponent from './common/components/header/header.component';
import FooterComponent from './common/components/footer/footer.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [AppComponent, HeaderComponent, FooterComponent], ／＊＊ 聲明入口component＊／
    bootstrap: [AppComponent],／＊＊ 注入入口component＊／
})

export class AppModule { }

注意事項

若是你仔細觀察會發現，這裏組件裏用了不一樣的方式引入template和style，當咱們用url的方式引入的時候會牽扯到資源的相對路徑問題，固然你能夠選擇用絕對路徑的方式引入（不推薦），另外一種就是用moduleId的方式，也是官方推薦的方式，可是它跟你用什麼方式去編譯有關係，若是是用Typescript編譯完以後運行，咱們能夠直接寫成 moduleId: module.id（官方推薦）， 若是你用SystemJS，你能夠寫成moduleId: _moduleName，若是你是用Webpack，你能夠用require()的方式來引入資源，若是你是用Dart，你能夠徹底不須要特殊處理。。。因此方法是有不少的，你們能夠自由選擇。

結語

好~迴歸正題，經過上面的方式咱們就簡單得把咱們的頁面拆分紅了三個簡單的components了，頂部（Header），內容（main），底部（Footer），是否是以爲其實SO Easy~~~

最後上咱們的戰利品，如今咱們的頁面看上去是這樣的~~~~

代碼已經整理上傳到GitHub： https://github.com/WuKongW/Angular2_POC