angular 学习笔记
angular 学习笔记
一颗星星变了心 发表于5个月前
angular 学习笔记
  • 发表于 5个月前
  • 阅读 173
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

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

 

 

 

根模块 (root module)

每个应用都至少有一个根模块用来引导并运行应用。根模块通常命名为 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。 所以每个这样的应用都在其根 AppModuleimports 数组中包含 BrowserModule

NgIf 是在来自 @angular/commonCommonModule 中声明的。
CommonModule 提供了很多应用程序中常用的指令,包括 NgIfNgFor 等。
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 compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app/app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

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

AOT, ahead-of-time

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

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

引导预编译的 AppModuleNgFactory

// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';

// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app/app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

说明:由于整个应用都是预编译的,所以我们不用把 Angular 编译器一起发到浏览器中,也不用在浏览器中进行编译。

无论是 JIT 还是 AOT 编译器都会从同一份 AppModule 源码中生成一个 AppModuleNgFactory 类。 JIT 编译器动态地在浏览器的内存中创建这个工厂类。 AOT 编译器把工厂输出成一个物理文件,也就是我们在静态版本 main.ts 中导入的那个。

通常,AppModule 不必关心它是如何被引导的。AppModule 会随着应用而演化,但是 main.ts 中的引导代码不会变。

Ng模块 (NgModule)

特性模块

特性模块是带有 @NgModule 装饰器及其元数据的类,就像根模块一样。 特性模块的元数据和根模块的元数据的属性是一样的。

根模块和特性模块还共享着相同的执行环境。 它们共享着同一个依赖注入器,这意味着某个模块中定义的服务在所有模块中也都能用。

它们在技术上有两个显著的不同点:

  • 我们引导根模块来启动应用,但导入特性模块来扩展应用。
  • 特性模块可以对其它模块暴露或隐藏自己的实现。

特性模块用来提供了内聚的功能集合。 聚焦于应用的某个业务领域、用户工作流、某个基础设施(表单、HTTP、路由),或一组相关的工具集合。

虽然这些都能在根模块中做,但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。

当前模块不会继承其它模块中对组件、指令或管道的访问权。根模块与特性模块的 imports 互不相干。如果某一个模块要绑定到 [(ngModel)] 就必需导入 FormsModule


参考链接

http://www.jianshu.com/p/317f0e4b7284

https://www.cnblogs.com/dojo-lzz/p/5878073.html

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 9
博文 27
码字总数 12517
×
一颗星星变了心
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: