课程简介
Angular 是目前最为流行的前端框架之一,学会用 Angular 构建应用,可以把这些代码复用在多种不
同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。同时 Angular 借助
Web Worker 和服务端渲染,达到在如今(以及未来)的 Web 平台上所能达到的最高速度。
Angular 让你有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型,能适应海量数据需求。
本课程将介绍如何从无到有的使用 Angular 快速搭建一个跨平台的 Web 应用。
目标收益
掌握 TypeScript 编程技术
掌握 JavaScript 异步编程模型
掌握 Angular 常用的前端开发工具和快速原型搭建工具。
培训对象
希望使用 Angular 的前端开发人员 掌握 Angular 应用框架
课程大纲
Typescript 语法介绍 |
• 类 Classes • 接口 Interfaces • 模块 Modules • 类型注解 Type annotations • 编译时类型检查 Compile time type checking • Arrow 函数 (类似 C# 的 Lambda 表达式) |
Angular 程序架构 |
• 模块 (Modules) • 组件 (Components) • 模板 (Templates) • 元数据 (Metadata) • 数据绑定 (Data Binding) • 指令 (Directives) • 服务 (Services) • 依赖注入 (Dependency Injection) |
Angular 数据显示 |
通过插值表达式显示组件的属性 • 为数据创建实体类 • NgFor 显示数组型属性 • 通过 NgIf 实现按条件显示 |
用户输入 |
• 绑定到用户输入事件 • 通过 $event 对象取得用户输入 • 从一个模板引用变量中获得用户输入 • 按键事件过滤 • 失去焦点事件处理 |
Angular 表单数据处理 |
使用组件和模板构建 Angular 表单 • 用 ngModel 创建双向数据绑定,以读取和写入输入控件的值 • 跟踪状态的变化,并验证表单控件 • 使用特殊的 CSS 类来跟踪控件的状态并给出视觉反馈 • 向用户显示验证错误提示,以及启用/禁用表单控件 • 使用模板引用变量在 HTML 元素之间共享信息 |
Angular 依赖注入 |
为什么需要依赖注入? • Angular 依赖注入 • 注入器提供商 • 依赖注入令牌 • 总结 |
Angular 模板语法 |
HTML • 插值表达式 • 模板表达式 • 模板语句 • 绑定语法 • 属性绑定 • HTML 属性、 class 和 style 绑定 • 事件绑定 • 使用 NgModel 进行双向数据绑定 • 内置指令 • 与 • 模板引用变量 • 输入输出属性 • 模板表达式操作符 |
Angular 测试 |
测试 Angular 组件 • 测试 Angular 的服务 |
Angular 相关工具介绍 |
• Webpack • 安装和使用 • Loaders • 插件 • 概要 • NPM 脚本集成 • Angular Cli • 创建 • 创建新应用程序 • 启动应用 • 创建组件 • 创建路由 • 创建其他东西 • 测试 • Linting • CLI 命令概述 |
Typescript 语法介绍 • 类 Classes • 接口 Interfaces • 模块 Modules • 类型注解 Type annotations • 编译时类型检查 Compile time type checking • Arrow 函数 (类似 C# 的 Lambda 表达式) |
Angular 程序架构 • 模块 (Modules) • 组件 (Components) • 模板 (Templates) • 元数据 (Metadata) • 数据绑定 (Data Binding) • 指令 (Directives) • 服务 (Services) • 依赖注入 (Dependency Injection) |
Angular 数据显示 通过插值表达式显示组件的属性 • 为数据创建实体类 • NgFor 显示数组型属性 • 通过 NgIf 实现按条件显示 |
用户输入 • 绑定到用户输入事件 • 通过 $event 对象取得用户输入 • 从一个模板引用变量中获得用户输入 • 按键事件过滤 • 失去焦点事件处理 |
Angular 表单数据处理 使用组件和模板构建 Angular 表单 • 用 ngModel 创建双向数据绑定,以读取和写入输入控件的值 • 跟踪状态的变化,并验证表单控件 • 使用特殊的 CSS 类来跟踪控件的状态并给出视觉反馈 • 向用户显示验证错误提示,以及启用/禁用表单控件 • 使用模板引用变量在 HTML 元素之间共享信息 |
Angular 依赖注入 为什么需要依赖注入? • Angular 依赖注入 • 注入器提供商 • 依赖注入令牌 • 总结 |
Angular 模板语法 HTML • 插值表达式 • 模板表达式 • 模板语句 • 绑定语法 • 属性绑定 • HTML 属性、 class 和 style 绑定 • 事件绑定 • 使用 NgModel 进行双向数据绑定 • 内置指令 • 与 • 模板引用变量 • 输入输出属性 • 模板表达式操作符 |
Angular 测试 测试 Angular 组件 • 测试 Angular 的服务 |
Angular 相关工具介绍 • Webpack • 安装和使用 • Loaders • 插件 • 概要 • NPM 脚本集成 • Angular Cli • 创建 • 创建新应用程序 • 启动应用 • 创建组件 • 创建路由 • 创建其他东西 • 测试 • Linting • CLI 命令概述 |