Angular2 模块入门学习

最近在看Angular2，模块的学习让我有点晕，写个例子供以后入门的同学参考，但是要深入的话还是要看官方文档。

官方的介绍https://angular.cn/docs/ts/latest/guide/ngmodule.html

引用官方的一句话：Angular 模块能帮你把应用组织成多个内聚的功能块。

首先创建我们自己的module文件（我只创建了基本的文件，可以根据自己的需求再丰富）

先上代码

my.module.ts文件

import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
  ],
  exports: [
      MyComponent
  ],
  providers: [],
})
export class MyModule { }

my.component.html文件

<h3>my component loaded</h3>

my.component.ts文件

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

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html'
})
export class MyComponent {
}

app.component.ts文件引用module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MyModule } from './mymodule/my.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html使用my-component标签

<h1> {{title}} </h1>
<my-component></my-component>

 

我们经常需要在我们自己的模块中定义一些页面，如果想在其他模块引用显示就要用exports导出

 

一个应用中只有一个Component中有 bootstrap: [AppComponent]

这里看到我们的标签已经加载出来了，但是还没有实现异步加载。