Angular 2 網站開發框架 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/ 適用 Angular 2.0.0-rc.5 版本 我們所認識的前端技術都是假的 千萬不要執著你之前學會的任何技術 忘掉一切的業障 才有重生的機會 今天我們要來 重新認識 Angular 2 開發框架 記得：今天是來消除業障的！ 記得：今天是來消除業障的！ ANGULAR 2 簡介 Angular 2 Introduction Angular 2 從框架轉向平台 10 前端工程的夢幻逸品：Angular 2 開發框架介紹 Angular 2 比 Angular 1 更好 • 速度更快 – 偵測變更：比 ng1 快 10 倍 – 渲染速度：比 ng1 快 5 倍 (Render & Re-render) • 範本編譯：支援 Template YouTube • TypeScript - JavaScript that scales. • TypeScript Handbook (中文版) • 前端工程的夢幻逸品：Angular 2 開發框架介紹 • Angular 2 Fundamentals | AngularClass (免費 ng2 課程) 聯絡資訊 • The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享

和AngularJS 是两种企业级的富 UI设计框架。 这篇文章从优势、架构、测试、性能等各个方面比较了 ExtJS 和 AngularJS 我们用ExtJS和AngularJS开发了一个简单测试的应用程序，进行完整的性能测 试。我们选取了同样的组件，规范了测试的流程，以保证测试的结果。 ExtJS 对比 AngularJS: 特性比较 性能比较 框架比较 架构比较 进一步的分析 Sencha Sencha Ext JS 强大的企业级开发框架 良好的浏览器兼容性 基于MVC的框架开发 图标插件 Modern UI widgets AngularJS 对于 web apps的HTML的增强 可以与其他的类库协同工作 开源的javascript框架，google维 护 声明式的编程方法 Sencha ExtJS 和 和 AngularJS对比 对比 序号 序号 Features ExtJS 企业应用中已经足够 AngularJS D3 绘图组件是基于亚马逊提 供的D3 绘图组件。详情请见D3 charts a t D3.js. 6. 学习成本 高 中等 架构 架构 7. 应用程序设计框架 ExtJS 5 支持 MVC (Model-View-Controller) 和 MVVM (M odel-View-ViewModel) MVW (Model-View-Whatever). 它支持流行的设计模式，比如

在欣欣向荣的 Web 前端领域，新的框架层出不穷，如此多的选择给开发者带来极大的 痛苦：学习难度如何？开发效率如何？运行性能如何？可维护性高吗？还有开发社区、发 展前景等因素需要考虑。评估任何一个框架不仅要看其优势，还要看它给开发者挖的坑有 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular 5，其不变的最显著特征就 是其整合性。作为一个一体化框架，Angular 经过精心的前期设计，涵盖了开发中的各个 经过精心的前期设计，涵盖了开发中的各个 层面，层与层之间都经过精心调适。开发者借助这个“开箱即用”的框架，就可以完成大 部分的前端开发工作，而不需要费时费力去组合、评估其他前端技术。这可以有效降低开 发者和开发团队的决策成本，有利于项目的快速起步。 Angular 5 是构建动态 JavaScript 应用程序的领先框架，而想讲清楚这个包罗万象的一 站式框架的各项强大功能是一项很大的挑战。Adam Freeman 撰著的《Angular 和复杂的功能，深入讲解开发者所需要掌握的所有知识。本书讲解 Angular 框架的面面俱 到，同时也不放过任何有用的细节，特别是对于一些最重要的 Angular 功能，本书都给出 了常见问题以及解决办法。 即便是一位希望从事 Web 前端开发工作的新手，考虑到 Angular 框架陡峭的学习曲线， 也不要担心，本书由易到难的循序渐进式风格可以极大地降低学习 Angular 框架的门槛， 降低学习痛苦指数。而对于经验丰富的前端老兵，尽管具有

CLI 17 索引 19 v PARTI 第一部分 Angular 应用基础 1 第一章 核心知识 Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。Angular 本身使用 TypeScript 写 成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。 1.1 架构概览 Angular 的基本构造块是 @Injectable 装饰器来表明一个组件或其它类（比如另一个服务、管道或 NgModule）拥 有一个依赖。依赖并不必然是服务，它也可能是函数或值等等。 依赖注入（通常简称 DI）被引入到 Angular 框架中，并且到处使用它，来为新建的组件提供所需的服务 或其它东西。如图2.1。 • 注入器是主要的机制。你不用自己创建 Angular 注入器。Angular 会在启动过程中为你创建全应用级 注入器。