Angular 快速入門

Angular 快速入門

---

AngularJS 官方網址

Angular：https://www.angular.cn/

Angular官網：https://angularjs.org/

　　

AngularJS 1.X 的困境

1. 飽受詬病的性能問題。
2. 落後當前web的發展理念（如組件開發方式）
3.  對手機端支持不夠友好

Angular 2.x 特性

16年5月正式發佈。

2版本取消了JS的叫法，直接叫作 Angular

2版本不能兼容1版本的代碼。

1. 移除 controller + $scope 設計，改用組件式開發（更易上手）
2. 性能更好（渲染更快，變化監測效率更高）
3. 優先爲移動端應用設計（angular mobile toolkit）
4. 更加貼合將來的標準（如/ES67,WebComponent）

　　

Angular2 的核心概念

　　

組件

　　

組件使用案例

　　

組件要素

 　　

組件的通信機制

　　

組件全生命週期

　　

組件示例

　　

元數據與裝飾器

　　

模板

　　

數據綁定

　　

屬性綁定-[value]  ：把組件類的數據傳遞到組件模板中。

　　

事件綁定-[keyup] ：把模板產生的數據經過函數調用傳遞到組件類。

　　

雙向綁定-[(ngModel)] ：實現數據雙向流動。

　　

組件渲染

 　　

組件樹

　　

 數據流向

　　

指令

 　　

案例

 　　

自定義指令

　　

服務

服務是實現專注目的的邏輯單元，如日誌服務。

　　

依賴注入

組件一如外部構建（如服務）的一種機制。

　　

　　

分層注入

 　　

模塊

1. 框架代碼以模塊形式組織（文件模塊）
2. 功能單元以模塊形式組織（應用模塊）

 文件模塊

　　

文件模塊使用

　　

應用模塊

　　應用模塊就是對應用類零散的組件、指令、服務等按照功能進行歸類包裝。

　　

　　同模塊的指令能夠相互使用同模塊的組件，跨模塊的不能夠。

　　

應用模塊

　　

　　

 

核心概念總覽圖

　　

Angular 快速上手

TypeScript

　　

TypeScript 是微軟開發的編程語言。

　　JavaScript 的超集，兼容 JavaScript。

　　運行前須要預編譯生成 JavaScript 代碼。

　　加入類型判斷，編譯時進行類型檢查。

　　文件擴展名爲 .ts 。

 案例

 　　

　　TypeScript = Type + JavaScript

類與接口

　　

裝飾器

一種特殊的類型的聲明。

可以被附加到類、方法、訪問符、屬性或參數上。

　　

想要了解更多，瀏覽TypeScript官網：https://www.typescriptlang.org

 開發環境的準備

Node.js ：推薦使用6.0以上版本。

webpack：打包工具，能夠使用 npm install -g webpack 安裝。

開發IDE開發工具（VS Code） ：微軟推出的免費跨平臺編輯器，支持TypeScript 語法及高亮提示。

webpack 原理