Angular2学习笔记——详解NgModule模块

2024-10-25 21:02:12

在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开发——组件规划篇

本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型.其中写在css类以及注释中的组件想必多数人都不会去使用,而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一.在ng2中,标签型指令干脆被分离出来,追随vue等新兴势力的风格升级并称为组件,并用来处理所有与视图(DOM)打交道的事情,包括展示数据与动画.而属性型指令则用于完善组件的功能,比如接收用
Angular2入门教程之模块和组件详解

本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.初步了解模块和组件之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件. app文件夹下有五个文件,其中,app.component.spec.ts应该是和模块测试有关的文件,目前不用管它.剩下的四个文件就是典型的模块+组件的文件组成模式. Angular2应用由模块和组件构成,每个模块这样明明name.module.ts,组件则是name.compo
Angular2利用组件与指令实现图片轮播组件

前言如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的"生物"还需要有感觉器官,用来感知外界与其的交互,这就是指令要做的事情. 本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件,继续上文打的比方的话这就像是一个"器官",功能是呈现图片,并感知用户的点击或手势来切换图片. 一.创建组件结束上文
Angular2 NgModule 模块详解

Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Directives.Pipes,引入Service,并控制外部组件对内部成员的访问权限. angular2 具有了模块的概念,响应了后台程序的号召,高内聚低耦合.模块就是用来进行封装,进行高内聚低耦合的功能. 其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须
Angular2学习笔记——详解NgModule模块

在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们. 模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule.HttpModule.RouterModule. NgModule的
Angular2学习笔记——详解路由器模型（Router）

Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa
python文本数据处理学习笔记详解

最近越发感觉到限制我对Python运用.以及读懂别人代码的地方,大多是在于对数据的处理能力. 其实编程本质上就是数据处理,怎么把文本数据.图像数据,通过python读入.切分等,变成一个N维矩阵,然后再带入别人的模型,bingo~跑出来一个结果.结果当然也是一个矩阵或向量的形式. 所以说,之所以对很多模型.代码束手无策,其实还是没有掌握好数据处理的"屠龙宝刀",无法对海量数据进行"庖丁解牛"般的处理.因此,我想以一个别人代码中的一段为例,仔细琢磨文本数据处理的精妙之
Javascript学习笔记-详解in运算符

一.判断语法 prop in objectName 如果objectName指向的对象中含有prop这个属性或者键值,in运算符会返回true. 复制代码代码如下: var arr = ['one','two','three','four']; arr.five = '5'; 0 in arr;//true 'one' in arr; //false,只可判断数组的键值 'five' in arr;//true,'five'是arr对象的属性 'length' in arr;//true 原
详解Angular2学习笔记之Html属性绑定

简介基本HTML属性 <td [attr.colspan]="tableColspan"></td> Css 类绑定  <div [class]="divClass">CSS 类绑定,[class] 全部替换的例子</div>  <div [class.a]="isS
Docker(黑马spring cloud笔记)详解

目录介绍和安装安装启动镜像加速 Docker基本操作镜像操作容器操作数据卷操作 Dockerfile 镜像结构 Dockerfile Docker-Compose 安装基本命令 Docker 私服搭建练习练习1:save和load 练习2:docker部署nginx 练习3:部署MySQL 练习4:基于Ubuntu构建一个新镜像,运行一个java项目练习5:部署微服务集群问题:微服务注册失败介绍和安装 Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从
Bootstrap框架的学习教程详解(二)

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.bootcss.com/getting-started/#download PS:其实我们不用下载bootstrap也可以使用
Angular2学习笔记之数据绑定的示例代码

简介使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1> 使用方括号将HTML标签的一个属性值绑定到一个表达式上 <img [src]="imgUrl" alt=""> 使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上 <button (click)=&
详解Python_shutil模块

import shutil 高级的文件,文件夹,压缩包的处理模块,也主要用于文件的拷贝 shutil.copyfileobj(fsrc,fdst[,length]): 将文件的内容拷贝到另一个文件(可以指定length长度进行拷贝) import shutil shutil.copyfileobj(open('old.txt','r'),open('new.txt','w')) shutil.copyfile(src,dst): 拷贝文件 import shutil shutil.copyfil
python3中_from...import...与import ...之间的区别详解(包/模块)

目录前言 1.import ... 2.from ... import ... 3.引用也有区别 4.引用优化总结前言 [以下说明以tkinter模块为例进行说明] [下图为安装后在python解释器路径下lib(库)文件夹下的tkinter文件夹下的内容] 1.import ... [语法]import tkinter [说明] import引入的是包中根目录下__init__.py中的全部内容,包括其中的类.类内部的公有属性.类内部的公有方法.方法等内容.(该种方式导入包的本质就是执行

Angular2学习笔记——详解NgModule模块

相关推荐

随机推荐