■ ■ ■ 译 者 序 在欣欣向荣的 Web 前端领域，新的框架层出不穷，如此多的选择给开发者带来极大的 痛苦：学习难度如何？开发效率如何？运行性能如何？可维护性高吗？还有开发社区、发 展前景等因素需要考虑。评估任何一个框架不仅要看其优势，还要看它给开发者挖的坑有 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular 5，其不变的最显著特征就 (Microsoft Certified Professional， 微软认证专家)等多项认证，而且还是一位多产的作家和技术评审员。十多年来，他为多家 意大利和国际杂志撰写了大量文章，与人合著了十多本关于各类计算机主题的书籍。 ■ ■ ■ 目 录 第 1 章 准备工作 .....................................1 1.5 如何搭建开发环境.....................4 1.6 联系作者.....................................4 1.7 本章小结.....................................4 第 2 章 第一个 Angular 应用程序 ..........5 2.1 准备开发环境..............

结论： ExtJS 比 AngularJS慢3倍 ExtJS: AngularJS: If we use ext-all, then the stats are: 两种框架的具体使用环境 两种框架的具体使用环境 使用 ExtJS： 你想使用强大的ExtJS组件。这会节约很多的时间。 你不想担心兼容性问题。这是一大亮点 你和你的客户需要一个专门的许可或者需要专门的支持 如果桌面应用和移动应用是两套程序。 完整的组件体系，能够大大的减少开发时间 坏处： 坏处： ExtJS的组件会生成冗长的DOM代码，这样会影响效率 AngularJS： AngularJS 并不具有一个完整的组件库 但是，这里有非常多的第三方组件，比如 AngularUI Bootstrap, Kendo (an d Angular-Kendo), Wijmo 等等 路由： 路由： ExtJS： ExtJS 5 支持路由 ExtJS

成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 1.1 架构概览 Angular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境。NgModule 会把相关的代码 收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的。应用至少会有一个用于引导应用的根 模块，通常还会有很多特性模块。 • 组件定 (1.1) 1.1.1 模块 Angular 定义了 NgModule，它和 JavaScript（ES2015）的模块不同而且有一定的互补性。NgModule 为一 个组件集声明了编译的上下文环境，它专注于某个应用领域、某个工作流或一组紧密相关的能力。NgMod- ule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。 每个 Angular 应用都有一个根模块，通常命名为 的标记（markup）组合起来，这些标记可以在 HTML 元素显示出来之前修 改它们。模板中的指令会提供程序逻辑，而绑定标记会把你应用中的数据和 DOM 连接在一起。 • 事件绑定让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。 • 属性绑定让你将从应用数据中计算出来的值插入到 HTML 中。 在视图显示出来之前，Angular 会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式， 以修改 HTML

快快樂樂學會 Angular 2 網站開發框架 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/ 適用 Angular 2.0.0-rc.5 版本 我們所認識的前端技術都是假的 千萬不要執著你之前學會的任何技術 忘掉一切的業障 才有重生的機會 今天我們要來 重新認識 Angular 2 開發框架 記得：今天是來消除業障的！ { title = 'app works!'; } 18 Angular 2 結構剖析 19 Angular 2 結構剖析 • Module 應用程式被切分成許多「模組」 • Component 每個模組下有許多「元件」 • Template 每個元件都可能有自己的「樣板」 • Metadata 每個元件都可以標示「中繼資料」 • Data Binding 樣板與元件屬性、方法可以進行綁定

第一块内容：集成开发环境@angular/cli  第二块内容：Angular三大核心概念 Component,Module,Route  第三块内容：Angular架构特色 依赖注入、数据绑定  第四块内容：UI库 Angular-Material,Prime-NG,ng2-bootstrap,ionic  第五块内容：参考资源推荐 第一块：集成开发环境@angular/cli

在服务端⽣生成界⾯面 – GWT 编译阶段⽣生成界⾯面 – ExtJS ⽤用JS封装界⾯面组件 – Flex等 脱离HTML体系，另辟蹊径 • 业务逻辑 – 放后端⽐比放前端的多。。。 流⾏行过什么样的技术 单页应⽤用 • 传统企业应⽤用 – 通过iframe加载菜单 – 每个功能菜单都是独⽴立界⾯面 – 各功能菜单包含完整的公共库（JS，样式） •