址：北京清华大学学研大厦 A 座 邮 编：100084 社 总 机：010-62770175 邮 购：010-62786544 投稿与读者服务：010-62776969，c-service@tup.tsinghua.edu.cn 质 量 反 馈：010-62772015，zhiliang@tup.tsinghua.edu.cn 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular 5，其不变的最显著特征就 是其整合性。作为一个一体化框架，Angular 经过精心的前期设计，涵盖了开发中的各个 层面，层与层之间都经过精心调适。开发者借助这个“开箱即用”的框架，就可以完成大 部分的前端开发工作，而不需要费时费力去组合、评估其他前端技术。这可以有效降低开 发者和开发团队的决策成本，有利于项目的快速起步。 的还有肖国尊、胡季红、李辉、马蓉、 李新军、易民全、姚建军、鲍春雷、甘信生、郝雪松、凌栋、王发云、王继云、赵建军、 朱宝庆、朱钱。Be Flying 工作室负责人肖国尊负责本书翻译质量和进度的控制与管理。敬 请广大读者提供反馈意见，我们的邮箱是 215565222@qq.com。我们会仔细查阅读者发来 的每一封邮件，尽快回应读者的问题。 ■ ■ ■ 作 者 简 介

Google Angular Team 编著 北京 • BEIJING 序 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到 端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌 面应用的能力。 i 前言 Web 应用程序的安全涉及到很多方面。针对常见的漏洞和攻击，比如跨站脚本攻击，Angular NgModule 和 JavaScript 的模块 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 第二章 服务与依赖注入 7 2.1 服务 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . CLI 17 索引 19 v PARTI 第一部分 Angular 应用基础 1 第一章 核心知识 Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。Angular 本身使用 TypeScript 写 成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 1.1 架构概览 Angular 的基本构造块是

试。我们选取了同样的组件，规范了测试的流程，以保证测试的结果。 ExtJS 对比 AngularJS: 特性比较 性能比较 框架比较 架构比较 进一步的分析 Sencha Ext JS 强大的企业级开发框架 良好的浏览器兼容性 基于MVC的框架开发 图标插件 Modern UI widgets AngularJS 对于 web apps的HTML的增强 可以与其他的类库协同工作 开源的javascript框架，google维 Bootstrap, K endo (and Angular-Kendo), Wijmo 和其他 的. 3. 开发单页应用 ✔ ✔ 4. 跨浏览器兼容性 ✔ AngularJS 基于jqLite/jQuery实现浏览器 的兼容。但是其集成的第三方组件不一 定支持跨浏览器兼容。 注意： AnugularJS (1.3 及其以上版本) 移除了对IE8的支持。如果需要对于IE8 的支持，请选择ExtJS 5 wModel(MVVM) 8. 依赖注入 Ext JS 能够通过扩展（ Deft JS）增加依赖注入 ✔ 9. 数据绑定 ✔ ✔ 10. 直接操作DOM元素 ✔ ✔ 11. 模块化 ✔ ✔ 测试 测试 12. 自动测试支持 通过扩展工具实现 ✔ 13. 测试框架或者测试工具 许多第三方的测试框架，比如 Siesta (专门为ExtJS优化), Jasmine and Mocha 能够用于ExtJS的测试

企业应⽤用前端的特点 • 独占模式 • 重业务，轻视觉 • 界⾯面规整，模式单⼀一 • 键盘操作 • 逻辑复杂 • 加载速度的侧重不同 • 浏览器版本相对宽松 传统的B/S企业应⽤用前端 • B/S企业软件常⽤用的展现层技术 – HTC 在浏览器端扩展标签 – JSF等 在服务端⽣生成界⾯面 – GWT 编译阶段⽣生成界⾯面 – ExtJS 服务端⾃自定义标签的劣势 • 曾经有过什么浏览器端⾃自定义标签机制 – html components（IE only） • 现在有哪些⽅方式在浏览器端⾃自定义标签 – polymer，angularjs 业务逻辑层 • 在良好的分层机制下，前端可以独⽴立出⼀一层 与界⾯面元素⽆无关的纯逻辑层 • 这⼀一层是与业务相关的，⽐比界⾯面层稳定 • 业务逻辑层可以⽤用单元测试来覆盖 业务逻辑层可以⽤用单元测试来覆盖 • 甚⾄至因为与DOM⽆无关，这个单元测试可以在 NodeJS⾥里做 ⼆二次开发平台 • ⼆二次开发平台是做什么⽤用的？ – 业务⼈人员通过拖拉配置，⽣生成可⽤用的功能。 • 为什么企业会需要⼆二次开发平台？ – ⼈人⼒力与定制化需求的⽭矛盾 • 为什么企业选择⾃自⼰己做⼆二次开发平台？ – 每个⾏行业都有⾃自⼰己的特点 •

(Render & Re-render) • 範本編譯：支援 Template 預先編譯機制 – 更小的 Library Size ( 透過 webpack 自動合併 ) – 支援延遲載入機制與伺服器渲染機制 (Node.js & ASP.NET ) • 學習曲線更低 – 採用 TypeScript 語法更簡潔 ( 類別、介面、屬性、方法 ) – 移除超過 40+ 個 directives • … ) – 可透過 Babel 轉譯器將瀏覽器不支援的語法轉為 ES5 版本 • TypeScript – 此版本為 ES 2015 的「超集合」 – 具有強型別特性、內建 ES5 轉譯器 (Transpiler)、更好的工具支援 • Dart – 非 JavaScript 家族的程式語言 – 具有強型別特性 13 Angular 2 的開發工具 • Visual Studio Code (Directives) 類別 ( Class ) • 建構式 (Constructor) • 屬性 (Properties) • 方法 (Methods) 中繼資料 ( Metadata ) • 裝飾器 (Decorator) • 針對類別 • 針對屬性 • 針對方法 • 針對參數 17 認識 Angular 元件的程式碼結構 import { Component } from '@angular/core';

第一块：集成开发环境@angular/cli 2009年，前端Big Bang! Tool Chains based on NodeJS npm：世界上最糟糕的模块管理器 @angular/cli 把所有零散的Node工具都集成起来多好啊！ @angular/cli @angular/cli >npm install -g @angular/cli >ng --version NgModule 文件体积 请求数量 这里需要取得一个平衡 第三个核心概念：Router 问题：前端为什么需要Router？ 前端为什么需要Router？ 如果没有Router，浏览器的前进后退按钮没法用 如果没有Router，你将无法把URL拷贝并分享给你的朋友 Angular应用中路由形成的Tree形结构 Angular路由用法：静态路由 Angular路由用法：异步路由 第三块：Angular架构特色 依赖注入 依赖注入 Parent Injector Child Injector 注射器（Injector） 也是一个树型结构 依赖注入 依赖注入  每一个HTML标签上面都会有一个注射器实例  注射是通过constructor进行的  @Injectable是@Component的子类 https://vsavkin