[Angular2]创建简单的Angular 2 NgModule与Components

原创
2016/08/27 16:30
阅读数 1.9K

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

 

展开阅读全文
打赏
0
16 收藏
分享
加载中
悟_箜博主
附上第四弹4
[Angular2] Angular 2中NgModule,Lazy Loading与Route
http://my.oschina.net/wukong1988/blog/741255
2016/09/01 23:14
回复
举报
悟_箜博主
该评论暂时无法显示,详情咨询 QQ 群:912889742
悟_箜博主

引用来自“99linzi”的评论

已经解决,index.html 标记镁弄对
89
2016/08/29 21:17
回复
举报
已经解决,index.html 标记镁弄对
2016/08/29 21:15
回复
举报
悟_箜博主

引用来自“99linzi”的评论

<wk-header></wk-header>
<main>
<h1>Hello Angular2 !</h1>
</main>
<wk-footer></wk-footer>
增加了这个,在浏览器里面看不到
你有没有把HeaderComponent,跟FooterComponent引入到这个文件里?directives: [HeaderComponent, FooterComponent]
或者浏览器端有没有错误信息啥的?
2016/08/29 21:12
回复
举报
<wk-header></wk-header>
<main>
<h1>Hello Angular2 !</h1>
</main>
<wk-footer></wk-footer>
增加了这个,在浏览器里面看不到
2016/08/29 20:55
回复
举报
悟_箜博主

引用来自“夏天de思恋”的评论

我在学ng1
加油~4
2016/08/29 18:48
回复
举报
该评论暂时无法显示,详情咨询 QQ 群:912889742
收藏了慢慢看。
2016/08/27 18:59
回复
举报
更多评论
打赏
9 评论
16 收藏
0
分享
返回顶部
顶部