文档章节

angular 学习笔记

一颗星星变了心
 一颗星星变了心
发布于 2017/12/19 09:01
字数 2161
阅读 175
收藏 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

 

本文转载自:https://www.cnblogs.com/dojo-lzz/p/5878073.html,http://www.jianshu.com/p/317f0e4b7284

共有 人打赏支持
一颗星星变了心
粉丝 9
博文 28
码字总数 12517
作品 0
成都
网页/平面设计
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
AngularJs学习笔记--bootstrap

一、总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。...

武文海
2015/02/05
0
0
AngularJs学习笔记--expression

一、Angular表达式 vs. Js 表达式   这很容易让人将angular视图表达式联想为javascript表达式,但这并不完全正确,因为angular不是通过javascript的eval()对表达式进行求值。你可以将angul...

武文海
2015/02/06
0
0
AngularJs学习笔记--I18n/L10n

一、I18n and L10n in AngularJS 1. 什么是I18n和L10n?   国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化...

武文海
2015/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
40分钟前
1
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
1
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
1
0
利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
昨天
1
0
Android SELinux avc dennied权限问题解决方法

1. 概述 SELinux是Google从android 5.0开始,强制引入的一套非常严格的权限管理机制,主要用于增强系统的安全性。 然而,在开发中,我们经常会遇到由于SELinux造成的各种权限不足,即使拥有“...

TreasureWe
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部