Angular 2 模块(Modules)

Angular 应用是模块化的,Angular 有自己的模块系统,叫做 Angular 模块 or NgModules

模块

. 每个 Angular 应用至少有一个模块——根模块,通常叫做 AppModule

小规模的应用程序中也许只有一个根模块 , 大多数应用有许多功能模块,每个耦合的代码块作用于程序域、工作流或是密切相关的功能。

一个Angular模块,无论是还是功能性,都是一个 使用@NgModule修饰符的类。

修饰符(decorators )是修改JavaScript类的功能函数。Angular有许多的修饰符,通过给类附加元数据可以知道这些类的的意义,它们如何工作。学习更多 关于网页元数据。

NgModule 是一个描述符函数,描述模块的单一元数据对象。最重要的属性是:

  • declarations - 属于这个模块的 视图类(view classes)。Angular 有三种视图类: components, directives, and pipes.
  • exports - 声明的一部分,对于其他模块的组件模板是可见和可用的。
  • imports - 声明这个模块的组件模版需要的、其他模块声明导出的类。
  • providers - 这个模块的服务创建器,是全局服务集合的一部分,可以被应用的任意部位访问到。
  • bootstrap - 主应用视图, 叫做 根组件(root component), 承载其他的应用视图。 只有 根模块(root module) 需要设置此引导属性。

这里是一个简单根模块:

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

看 export 属性 AppComponent 就展示了如何export; 这里仅举例,并不实际需要。根模块没有理由export任何东西,因为其他组件不需要import根模块。

通过引导一个根模块启动一个应用。开发中你可以在main.ts中引导AppModule,如下所示:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Angular 模块 对比 JavaScript 模块

The Angular module — 一个类修饰符使用@NgModule — 是 Angular 的基础功能。 JavaScript 同样也有自己的模块系统,管理Javascript对象集。这完全不同也和Angular 模块系统无关。 在 JavaScript 中, 每个 文件就是一个模块,所有定义在文件中的对象都属于模块。模块定义公有对象通过关键词export标记这些对象。其他的JavaScript模块使用 import statements来从其他模块访问这些共有对象。

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
export class AppModule { }

在网上学习更过关于Javascript模块系统的知识。 这是两种不同的和完整的模块系统,在应用中同时使用它们。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏各种机器学习基础算法

如何通过jq和php实现返回父级页面(附带记忆功能)

在开发项目的时候,往往会有一些父级页面,例如这样: ? 点击即可返回上一层目录,可是这样是返回到父级页面的首页,我们原本的操作记录清空了(比如说我们翻到第3页博...

3706
来自专栏王磊的博客

微信分享JSSDK-invalid signature签名错误的解决方案

核对官方步骤,确认签名算法。 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapi...

87211
来自专栏Golang语言社区

Go语言基于Socket编写服务器端与客户端通信的实例

在golang中,网络协议已经被封装的非常完好了,想要写一个Socket的Server,我们并不用像其他语言那样需要为socket、bind、listen、re...

9865
来自专栏java相关

dotfiles项目

832
来自专栏知晓程序

开发 | 只需 10 分钟,教你做一款查询类小程序

在全局配置文件中,我们定义了一个页面。保存之后,将会自动生成 index 页面的基本目录。

1113
来自专栏Golang语言社区

转--Go语言基于Socket编写服务器端与客户端通信的实例

在golang中,网络协议已经被封装的非常完好了,想要写一个Socket的Server,我们并不用像其他语言那样需要为socket、bind、listen、re...

2875
来自专栏Golang语言社区

Go语言基于Socket编写服务器端与客户端通信的实例

在golang中,网络协议已经被封装的非常完好了,想要写一个Socket的Server,我们并不用像其他语言那样需要为socket、bind、listen、re...

2925
来自专栏编程坑太多

自己总结的,苦心总结的linux命令

1684
来自专栏编程直播室

html的base标签为什么不起作用

1622
来自专栏JetpropelledSnake

Python入门之PyCharm的快捷键与常用设置和扩展(Mac系统)

1. 快捷键 2 . PyCharm的常用设置和扩展 -----------------------------------------------------...

1.4K8

扫码关注云+社区

领取腾讯云代金券