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

Angular9 中文教程

Angular9 以根模块启动应用

先决条件

对下列知识有基本的了解:

启动过程

NgModule 用于描述应用的各个部分如何组织在一起。 每个应用有至少一个 Angular 模块,根模块就是你用来启动此应用的模块。 按照惯例,它通常命名为 AppModule。

当你使用 Angular CLI 命令 ng new 生成一个应用时,其默认的 AppModule 是这样的:

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

import { AppComponent } from './app.component';

/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import 语句之后,是一个带有 @NgModule 装饰器的类。

@NgModule 装饰器表明 AppModule 是一个 NgModule 类。 @NgModule 获取一个元数据对象,它会告诉 Angular 如何编译和启动本应用。

  • declarations —— 该应用所拥有的组件。

  • imports —— 导入 BrowserModule 以获取浏览器特有的服务,比如 DOM 渲染、无害化处理和位置(location)。

  • providers —— 各种服务提供者。

  • bootstrap —— 根组件,Angular 创建它并插入 index.html 宿主页面。

Angular CLI 创建的默认应用只有一个组件 AppComponent,所以它会同时出现在 declarationsbootstrap 数组中。


declarations 数组

该模块的 declarations 数组告诉 Angular 哪些组件属于该模块。 当你创建更多组件时,也要把它们添加到 declarations 中。

每个组件都应该(且只能)声明(declare)在一个 NgModule 类中。如果你使用了未声明过的组件,Angular 就会报错。

declarations 数组只能接受可声明对象。可声明对象包括组件、指令和管道。 一个模块的所有可声明对象都必须放在 declarations 数组中。 可声明对象必须只能属于一个模块,如果同一个类被声明在了多个模块中,编译器就会报错。

这些可声明的类在当前模块中是可见的,但是对其它模块中的组件是不可见的 —— 除非把它们从当前模块导出, 并让对方模块导入本模块。

下面是哪些类可以添加到 declarations 数组中的例子:

declarations: [
  YourComponent,
  YourPipe,
  YourDirective
],

每个可声明对象都只能属于一个模块,所以只能把它声明在一个 @NgModule 中。当你需要在其它模块中使用它时,就要在那里导入包含这个可声明对象的模块。

只有 @NgModule 可以出现在 imports 数组中。


通过 @NgModule 使用指令

使用 declarations 数组声明指令。在模块中使用指令、组件或管道的步骤如下:

  1. 从你编写它的文件中导出它。

  2. 把它导入到适当的模块中。

  3. @NgModuledeclarations 数组中声明它。

这三步的结果如下所示。在你创建指令的文件中导出它。 下面的例子中,"item.directive.ts" 中的 ItemDirective 是 CLI 自动生成的默认指令结构。

Path:"src/app/item.directive.ts" 。

import { Directive } from '@angular/core';

@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }

}

重点在于你要先在这里导出它才能在别处导入它。接下来,使用 JavaScript 的 import 语句把它导入到 NgModule 中(这里是 "app.module.ts")。

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

import { ItemDirective } from './item.directive';

同样在这个文件中,把它添加到 @NgModuledeclarations 数组中:

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

declarations: [
  AppComponent,
  ItemDirective
],

现在,你就可以在组件中使用 ItemDirective 了。这个例子中使用的是 AppModule,但是在特性模块中你也可以这么做。

注:

  • 组件、指令和管道都只能属于一个模块。你在应用中也只需要声明它们一次,因为你还可以通过导入必要的模块来使用它们。这能节省你的时间,并且帮助你的应用保持精简。

imports 数组

模块的 imports 数组只会出现在 @NgModule 元数据对象中。 它告诉 Angular 该模块想要正常工作,还需要哪些模块。

列表中的模块导出了本模块中的各个组件模板中所引用的各个组件、指令或管道。在这个例子中,当前组件是 AppComponent,它引用了导出自 BrowserModuleFormsModuleHttpClientModule 的组件、指令或管道。 总之,组件的模板中可以引用在当前模块中声明的或从其它模块中导入的组件、指令、管道。

providers 数组

providers 数组中列出了该应用所需的服务。当直接把服务列在这里时,它们是全应用范围的。 当你使用特性模块和惰性加载时,它们是范围化的。

bootstrap 数组

应用是通过引导根模块 AppModule 来启动的,根模块还引用了 entryComponent。 此外,引导过程还会创建 bootstrap 数组中列出的组件,并把它们逐个插入到浏览器的 DOM 中。

每个被引导的组件都是它自己的组件树的根。 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。

虽然也可以在宿主页面中放多个组件,但是大多数应用只有一个组件树,并且只从一个根组件开始引导。

这个根组件通常叫做 AppComponent,并且位于根模块的 bootstrap 数组中。

目录

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; }