■ ■ ■ 译 者 序 在欣欣向荣的 Web 前端领域，新的框架层出不穷，如此多的选择给开发者带来极大的 痛苦：学习难度如何？开发效率如何？运行性能如何？可维护性高吗？还有开发社区、发 展前景等因素需要考虑。评估任何一个框架不仅要看其优势，还要看它给开发者挖的坑有 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular 5，其不变的最显著特征就 (Microsoft Certified Professional， 微软认证专家)等多项认证，而且还是一位多产的作家和技术评审员。十多年来，他为多家 意大利和国际杂志撰写了大量文章，与人合著了十多本关于各类计算机主题的书籍。 ■ ■ ■ 目 录 第 1 章 准备工作 .....................................1 路由在应用程序中进行导航，以及在应用程序的状态 发生变化时如何使 HTML 元素具有动画效果。 1.3 大量示例 本书包含大量示例。学习 Angular 的最好方法就是通过示例，本书已经将尽可能多的 示例打包进来。为使本书中的示例尽可能多，本书采用一个简单的约定来避免反复地列出 文件的内容。当在某一章中首次使用一个文件时，将列出该文件的完整内容，就像在代码 清单 1-1 中所示的那样。代码清单的标题中将包含文件的名称，以及应该在哪个文件夹中

快快樂樂學會 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 樣板與元件屬性、方法可以進行綁定

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

完整的组件体系，能够大大的减少开发时间 坏处： 坏处： ExtJS的组件会生成冗长的DOM代码，这样会影响效率 AngularJS： AngularJS 并不具有一个完整的组件库 但是，这里有非常多的第三方组件，比如 AngularUI Bootstrap, Kendo (an d Angular-Kendo), Wijmo 等等 路由： 路由： ExtJS： ExtJS 5 支持路由 ExtJS