[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