下载APP 编程狮,随时随地学编程
返回 首页

Angular9 中文教程

Angular9 特性模块

特性模块是用来对代码进行组织的模块。

随着应用的增长,你可能需要组织与特定应用有关的代码。 这将帮你把特性划出清晰的边界。使用特性模块,你可以把与特定的功能或特性有关的代码从其它代码中分离出来。 为应用勾勒出清晰的边界,有助于开发人员之间、小组之间的协作,有助于分离各个指令,并帮助管理根模块的大小。

特性模块 vs. 根模块

与核心的 Angular API 的概念相反,特性模块是最佳的组织方式。特性模块提供了聚焦于特定应用需求的一组功能,比如用户工作流、路由或表单。 虽然你也可以用根模块做完所有事情,不过特性模块可以帮助你把应用划分成一些聚焦的功能区。特性模块通过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合作。

如何制作特性模块

如果你已经有了 Angular CLI 生成的应用,可以在项目的根目录下输入下面的命令来创建特性模块。把这里的 CustomerDashboard 替换成你的模块名。你可以从名字中省略掉“Module”后缀,因为 CLI 会自动追加上它:

ng generate module CustomerDashboard

这会让 CLI 创建一个名叫 "customer-dashboard" 的文件夹,其中有一个名叫 "customer-dashboard.module.ts",内容如下:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CustomerDashboardModule { }

无论根模块还是特性模块,其 NgModule 结构都是一样的。在 CLI 生成的特性模块中,在文件顶部有两个 JavaScript 的导入语句:第一个导入了 NgModule,它像根模块中一样让你能使用 @NgModule 装饰器;第二个导入了 CommonModule,它提供了很多像 ngIfngFor 这样的常用指令。 特性模块导入 CommonModule,而不是 BrowserModule,后者只应该在根模块中导入一次。 CommonModule 只包含常用指令的信息,比如 ngIfngFor,它们在大多数模板中都要用到,而 BrowserModule 为浏览器所做的应用配置只会使用一次。

declarations 数组让你能添加专属于这个模块的可声明对象(组件、指令和管道)。 要添加组件,就在命令行中输入如下命令,这里的 "customer-dashboard" 是一个目录,CLI 会把特性模块生成在这里,而 CustomerDashboard 就是该组件的名字:

ng generate component customer-dashboard/CustomerDashboard

这会在 customer-dashboard 中为新组件生成一个目录,并使用 CustomerDashboardComponent 的信息修改这个特性模块:

Path:"src/app/customer-dashboard/customer-dashboard.module.ts"。

// import the new component
import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CustomerDashboardComponent
  ],
})

CustomerDashboardComponent 出现在了顶部的 JavaScript 导入列表里,并且被添加到了 declarations 数组中,它会让 Angular 把新组件和这个特性模块联系起来。

导入特性模块

要想把这个特性模块包含进应用中,你还得让根模块 "app.module.ts" 知道它。注意,在 "customer-dashboard.module.ts" 文件底部 CustomerDashboardModule 的导出部分。这样就把它暴露出来,以便其它模块可以拿到它。要想把它导入到 AppModule 中,就把它加入 "app.module.ts" 的导入表中,并将其加入 imports 数组:

Path:"src/app/app.module.ts"。

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
// import the feature module here so you can add it to the imports array below
import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    CustomerDashboardModule // add the feature module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在 AppModule 知道这个特性模块了。如果你往该特性模块中加入过任何服务提供者,AppModule 也同样会知道它,其它模块中也一样。不过,NgModule 并不会暴露出它们的组件。

渲染特性模块的组件模板

当 CLI 为这个特性模块生成 CustomerDashboardComponent 时,还包含一个模板 "customer-dashboard.component.html",它带有如下页面脚本:

Path:"src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html"。

<p>
  customer-dashboard works!
</p>

要想在 AppComponent 中查看这些 HTML,你首先要在 CustomerDashboardModule 中导出 CustomerDashboardComponent。 在 "customer-dashboard.module.ts" 中,declarations 数组的紧下方,加入一个包含 CustomerDashboardModuleexports 数组:

Path:"src/app/customer-dashboard/customer-dashboard.module.ts"。

exports: [
  CustomerDashboardComponent
]

然后,在 AppComponent 的 "app.component.html" 中,加入标签 <app-customer-dashboard>

Path:"src/app/app.component.html"。

<h1>
  {{title}}
</h1>

<!-- add the selector from the CustomerDashboardComponent -->
<app-customer-dashboard></app-customer-dashboard>

现在,除了默认渲染出的标题外,还渲染出了 CustomerDashboardComponent 的模板:

目录

Anguler9 中文教程总览

Angular9 简介

Angular9 快速上手

Angular9 搭建环境

Angular9 基本概念

Angular9 架构概览
Angular9 模块简介
Angular9 组件简介
Angular9 服务与 DI 简介
Angular9 技能扩展

Angular9 英雄指南

Hero guide 简介
Hero guide 创建项目
Hero guide 编辑器
Hero guide 显示列表
Hero guide 创建特性组件
Hero guide 添加服务
Hero guide 添加应用内导航
Hero guide 从服务器端获取数据
Angular9 词汇表

Angular9 基础知识

Angular9 组件与模板

Angular9 显示数据
Angular9 模板语法
Angular9 用户输入
Angular9 属性型指令
Angular9 结构型指令
Angular9 管道
Angular9 生命周期钩子
Angular9 组件交互
Angular9 组件样式
Angular9动态组件
Angular9 元素

Angular9 表单与用户输入

Angular9 表单简介
Angular9 响应式表单
Angular9 验证表单输入
Angular9 构建动态表单

Angular9 Observable 与 RxJS

Angular9 Observable 概览
Angular9 RxJS库
Angular9 可观察对象
Angular9 可观察对象用法实战
Angular9 与其他技术比较

Angular9 NgModule

Angular9 NgModules 简介
Angular9 JS 模块与 NgMoudule 比较
Angular9 以根模块启动应用
Angular9 常用模块
Angular9 特性模块分类
Angular9 入口组件
Angular9 特性模块
Angular9 提供依赖
Angular9 单例服务
Angular9 惰性加载
Angular9 共享特性模块
Angular9 NgModule API
Angular9 NgModule 常见问题

Angular9 依赖注入

Angular9 依赖注入
Angular9 多级注入器
Angular9 DI 提供者
Angular9 DI 实战
Angular9 浏览组件树

Angular9 通过 HTTP 访问服务器

Angular9 准备工作
Angular9 请求数据
Angular9 处理请求错误
Angular9 向服务器发送数据
Angular9 配置 URL 参数
Angular9 拦截请求和响应
Angular9 跟踪和显示请求进度
Angular9 防抖优化
Angular9 XSRF 防护
Angular9 测试 HTTP 请求

Angular9 路由与导航

Angular9 生成路由应用
Angular9 定义基本路由
Angular9 获取路由信息
Angular9 设置通配符路由
Angular9 嵌套路由
Angular9 相对路径
Angular9 访问查询参数与片段

Angular9 路由器教程

Route 起步
Route 路由模块
Route特性区
Route 子路由
Route 路由守卫
Route 异步路由
Angular9 LocationStrategy 和浏览器网址样式
Angular9 <base href>
Angular9 路由器参考手册

Angular9 安全

Angular9 防范跨站脚本(XSS)攻击
Angular9 信任安全值
Angular9 HTTP级别漏洞

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }