更新至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
