Angular js 2 概論
0 likes115 views
本文件介绍了Angular 2的特点，强调其支持跨平台开发并基于TypeScript进行开发，从而提升前端的严谨性和性能。与Angular 1相比，Angular 2在数据绑定、指令和依赖注入等方面具有显著的改进，并引入了ES6模块化系统。此外，TypeScript作为一种静态类型的JavaScript扩展，具有强类型和减少重复代码等优势，使得开发变得更加高效。
![數據綁定
Angular 2保留留Angular 1中的單向綁定，⼜又細分了了屬性綁定、事件
綁定，並修改了了雙向綁定的使⽤用⽅方式。
9
雙向綁定
有⼈人說這叫香蕉表達式 banana in a box [()]](https://image.slidesharecdn.com/angularjs2-161004072636/85/Angular-js-2-9-320.jpg)
Angular js 2 概論
- 2. Agenda • 為什什麼要有Angular 2 • Angular 2特性 • Angular 1 v.s. Angular 2 • TypeScript簡介 2
- 4. Angular 2特性 • 預設就以TypeScript來來做開發 強型別的開發⼤大⼤大強化了了前端的嚴謹性 • 更更快的效能 • 任何寫完的View，都是可以重複利利⽤用的Component • Angular 2.0推出了了Native Script，可以直接寫Angular 2.0來來⾃自 動轉換成native，產出native app⽽而不是hybrid • 横跨瀏覽器和Mobile 4
- 5. Angular 1 v.s. Angular 2 5
- 6. 數據綁定 Angular 2保留留Angular 1中的單向綁定，⼜又細分了了屬性綁定、事件 綁定，並修改了了雙向綁定的使⽤用⽅方式。 6 單向綁定
- 7. 數據綁定 Angular 2保留留Angular 1中的單向綁定，⼜又細分了了屬性綁定、事件 綁定，並修改了了雙向綁定的使⽤用⽅方式。 7 屬性綁定
- 8. 數據綁定 Angular 2保留留Angular 1中的單向綁定，⼜又細分了了屬性綁定、事件 綁定，並修改了了雙向綁定的使⽤用⽅方式。 8 事件綁定
- 9. 數據綁定 Angular 2保留留Angular 1中的單向綁定，⼜又細分了了屬性綁定、事件 綁定，並修改了了雙向綁定的使⽤用⽅方式。 9 雙向綁定 有⼈人說這叫香蕉表達式 banana in a box [()]
- 10. 控制器／組件(Controller/Components) Angular 1 ： Directive + Controller Angular 2 ： Component 10
- 11. 11 指令(Template Directives) Angular 2 細分以下兩兩種指令： "結構指令"（Structural directives） *ngFor、*ngIf等結構指令，會透過新增、刪除、替換Dom元素来修改⾴頁⾯面佈局 "屬性指令"（Attribute directives） ngStyle等屬性指令，可以同时修改元素的多种样式。
- 12. 12 依賴注入(Dependency Injection) Angular 1中，我们可以在Controller等⽅方法中透過名字注入依賴 Angular 2中，我们需要在constructor 中，以參參數的形式注入。
- 14. TypeScript 簡介 • TypeScript 是什什麼 • TypeScript 的優點 14
- 15. TypeScript 是什什麼 15 • 完全基於JavaScript的語法 有點像是「擴充版的 JavaScript」。 • 可執⾏行行於任何瀏覽器，開發於任何作業系統（OS）。 • 可使⽤用 ES6 語法開發，執⾏行行於不⽀支援 ES6 的瀏覽器。 TypeScript 由微軟開發，出⾃自C#之⽗父 Anders Hejlsberg 之⼿手！
- 16. TypeScript 的優點 16 • 強型別 幫助檢查「是否打錯字」或是「型別對應不正確」的問題。 • 減少重複的 code ⼀一次學習，到處書寫 • 限制存取範圍 可以⽅方法利利⽤用 public / private / protected 來來限制存取權限 變數可以利利⽤用 let 來來使⽤用區域變數。
- 18. TypeScript 怎麼辦到的 18 TypeScript最終還是會轉成JavaScript ＊ES5 語法：ECMAScript 5 是 JavaScript 的標準化規範， 也是⽬目前最多瀏覽器⽀支援的版本。 假如你⽤用ES6的寫法來來編寫 TypeScript， 開發⼯工具在編譯的時候就會幫你轉為 「所有」瀏覽器看的懂得東⻄西（ES5 語法）！ 對TypeScript的檔案進⾏行行偵錯
- 19. The End Thanks
- 20. 參參考資源 • https://angular.io • http://slidedeck.io/wongjohn/angular1-vs- angular2#dataBinding • http://ryanhsutw.blogspot.tw/2016/05/ typescript.html 20