angular 学习笔记-白红宇

angular 学习笔记

阅读量：5998 次

发布时间：2019-06-20

本文共 5661 字，大约阅读时间需要 18 分钟。

　在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: `  
      
        
     Contact    
     Crisis Center    
     Heroes  
    
  
    `

复制代码

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'指明了模块的路径，和模块的名称。

每个应用都至少有一个根模块用来引导并运行应用。根模块通常命名为 AppModule。

示例 src/app/app.module.ts

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

imports 数组

注意：不要在 imports 数组中加入 NgModule 类型之外的类。

如果有两个同名指令都叫做 HighlightDirective，我们只要在 import 时使用 as 关键字来为第二个指令创建个别名就可以了。

import {  HighlightDirective as ContactHighlightDirective} from './contact/highlight.directive';

关于 BrowserModule

每个浏览器中运行的应用都需要 @angular/platform-browser 里的 BrowserModule。所以每个这样的应用都在其根 AppModule 的 imports 数组中包含 BrowserModule。

NgIf 是在来自 @angular/common 的 CommonModule 中声明的。

CommonModule 提供了很多应用程序中常用的指令，包括 NgIf 和 NgFor 等。

BrowserModule 导入了 CommonModule 并且重新导出了它。最终的效果是：只要导入 BrowserModule 就自动获得了 CommonModule 中的指令。

declarations 数组

你必须在一个 NgModule 类声明每一个组件，否则浏览器控制台会报错。

不要在 declarations 添加组件、指令和管道以外的其他类型。

不要把 NgModel（或 FORMS_DIRECTIVES）加到 AppModule 元数据的 declarations 数据中！这些指令属于 FormsModule。

组件、指令和管道只能属于一个模块。

永远不要再次声明属于其它模块的类。

bootstrap 数组

通过引导根 AppModule 来启动应用。在启动过程中，其中一步是创建列在 bootstrap 数组的组件，并将它们每一个都插入到浏览器的DOM中。

You launch the application by bootstrapping the root AppModule. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.

每个被引导的组件都是它自己的组件树的根。插入一个被引导的组件通常触发一系列组件的创建并形成组件树。

Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.

虽然你可以将多个组件树插入到宿主页面，但并不普遍。大多数应用只有一个组件树，它们引导单一根组件。

While you can put more than one component tree on a host web page, that's not typical. Most applications have only one component tree and they bootstrap a single root component.

根组件通常命名为 AppComponent。

在 main.ts 中引导

引导应用的方法很多。它们取决于你想如何编译应用以及应用将在哪儿运行。

通过即时 (JIT) 编译器动态引导

JIT, just-in-time

使用即时 (JIT) 编译器动态编译应用 src/main.ts

// The browser platform with a compilerimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';// The app moduleimport { AppModule } from './app/app.module';// Compile and launch the moduleplatformBrowserDynamic().bootstrapModule(AppModule);

使用预编译器 (AOT) 进行静态引导

AOT, ahead-of-time

静态方案可以生成更小、启动更快的应用，建议优先使用它，特别是在移动设备或高延迟网络下。

使用静态选项，Angular 编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是 AppModuleNgFactory。

引导预编译的 AppModuleNgFactory：

// The browser platform without a compilerimport { platformBrowser } from '@angular/platform-browser';// The app module factory produced by the static offline compilerimport { AppModuleNgFactory } from './app/app.module.ngfactory';// Launch with the app module factory.platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);