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

Angular9 中文教程

Angular9 常用模块

Angular 应用至少需要一个充当根模块使用的模块。 如果你要把某些特性添加到应用中,可以通过添加模块来实现。 下列是一些常用的 Angular 模块,其中带有一些其内容物的例子:

NgModule 导入自 为何使用
BrowserModule @angular/platform-browser 当你想要在浏览器中运行应用时
CommonModule @angular/common 当你想要使用 NgIfNgFor
FormsModule @angular/forms 当要构建模板驱动表单时(它包含 NgModel )
ReactiveFormsModule @angular/forms 当要构建响应式表单时
RouterModule @angular/router 要使用路由功能,并且你要用到 RouterLink,.forRoot().forChild()
HttpClientModule @angular/common/http 当你要和服务器对话时

导入模块

当你使用这些 Angular 模块时,在 AppModule(或适当的特性模块)中导入它们,并把它们列在当前 @NgModuleimports 数组中。比如,在 Angular CLI 生成的基本应用中,BrowserModule 会在 "app.module.ts" 中 AppModule 的顶部最先导入。

/* import modules so that AppModule can access them */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ /* add modules here so Angular knows to use them */
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

文件顶部的这些导入是 JavaScript 的导入语句,而 @NgModule 中的 imports 数组则是 Angular 特有的。

BrowserModule 和 CommonModule

BrowserModule 导入了 CommonModule,它贡献了很多通用的指令,比如 ngIfngFor。 另外,BrowserModule 重新导出了 CommonModule,以便它所有的指令在任何导入了 BrowserModule 的模块中都可以使用。

对于运行在浏览器中的应用来说,都必须在根模块中 AppModule 导入 BrowserModule,因为它提供了启动和运行浏览器应用时某些必须的服务。BrowserModule 的提供者是面向整个应用的,所以它只能在根模块中使用,而不是特性模块。 特性模块只需要 CommonModule 中的常用指令,它们不需要重新安装所有全应用级的服务。

如果你把 BrowserModule 导入了惰性加载的特性模块中,Angular 就会返回一个错误,并告诉你要改用 CommonModule

目录

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