Angular2学习笔记—

　　在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。

　　模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Rc5之后，Angular2将许多常用功能都分配到一个个的模块中，如:FormModule、HttpModule、RouterModule。

　　NgModule的主要属性如下：

declarations：模块内部Components/Directives/Pipes的列表，声明一下这个模块内部成员

providers：指定应用程序的根级别需要使用的service。（Angular2中没有模块级别的service，所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中）

imports：导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。

exports：用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。

bootstrap：通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。

entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用，一般是bootstrap组件或者路由组件，ng会自动把bootstrap、路由组件放入其中。除非不通过路由动态将component加入到dom中，否则不会用到这个属性。

　　每个Angular2的应用都至少有一个模块即跟模块。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-borwser';
import {AppComponent} from './AppComponent';@NgModule({declarations: [AppComponent],imports: [BrowserModule],bootstrap: [AppComponent]
})
export class AppModule{}

　　随着程序的壮大，单一的根模块已不能清晰的划分职责，这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样，所有的模块共享一个运行期上下文和依赖注入器。

　　功能模块与根模块的职责区别主要有以下两点：

根模块的目的在于启动app，功能模块的目的在于扩展app
功能模块可以根据需要暴露或隐藏具体的实现

　　Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件，目的是为了提高应用的流畅性，但是如果是运行在mobile中的app，加载一个大文件可能会过慢，所以rc5提供了一种延迟加载方式。

template: `<app-title [subtitle]="subtitle"></app-title><nav><a routerLink="contact" routerLinkActive="active">Contact</a><a routerLink="crisis"  routerLinkActive="active">Crisis Center</a><a routerLink="heroes"  routerLinkActive="active">Heroes</a></nav><router-outlet></router-outlet>
`

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';export const routes: Routes = [{ path: '', redirectTo: 'contact', pathMatch: 'full'},{ path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },{ path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

　　其中，path指明路径，loadChildren指明使用延迟加载，'app/crisis/crisis.module#CrisisModule'指明了模块的路径，和模块的名称。

Angular2学习笔记——NgModule相关推荐

angular2 学习笔记 ( Http 请求)
更新 : 2017-06-08 总觉得 angular 的 http 怎么就多了 Request, Headers, Response 这些麻烦东东呢. 原来这些都是游览器的"新特性&qu ...
Angular2学习笔记——在子组件中拿到路由参数
工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...
Angular2学习笔记(六) Angular2 依赖注入
2019独角兽企业重金招聘Python工程师标准>>> 在java的世界中我们有spring的DI神器,而在angular的世界中我们同样有DI,由于这里文章篇幅偏大,只捡主要的讲解 ...
angular2 学习笔记 ( unit test 单元测试 )
更新 2018-06-03 spy object 当组件或则服务有对其它服务依赖的时候,我们通常会把这些依赖写成 spy 或则叫 fake. 为什么这样做的呢 ? 主要的原因是我们不应该依赖具体的代码 ...
ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用
ng bootstrap是一个angular UI bootstrap库,里面包含了一些基本的UI组件(日期选择组件,按钮,下拉框等).目前的版本为v1.0.0-alpha.14,基于angular2 ...
angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )
Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...
angular2学习笔记之服务和http
现在应用开发多为spa的前后分离,前后端通讯则使用http的接口通过json进行交互.angular2-demo 一. 效果图 1. 展现出来的效果 2. mysql的数据二.代码实例 1. 服务 ...
《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记腾讯课堂:米斯特吴视频讲座二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
Angular 服务器端渲染的学习笔记(二)
官网地址:https://angular.io/guide/universal I have mainly used angular universal for SEO purposes. In th ...

Angular2学习笔记——NgModule

Angular2学习笔记——NgModule相关推荐

最新文章

热门文章