O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Angular js 入門介紹

971 visualizações

Publicada em

Angular js 入門介紹

Publicada em: Tecnologia
  • Login to see the comments

Angular js 入門介紹

  1. 1. AngularJS 入門介紹 Wan-Ting Jheng 2015/3/17
  2. 2. AngularJS 由 Google 開發維護 Open source Javascript framework MVC模式 特色 Directives syntax 宣告式語法 Two Way Data-Binding 雙向數據綁定 Dependency injection 相依性注入
  3. 3. 用途 不適合 只有單純頁面互動特效 適合 單一頁面網頁應用程式 有複雜邏輯、資料存取(CRUD) 應用程式類型網頁 例如: mail, 行事曆 目標 讓應用類型網頁的開發/測試變的容易
  4. 4. 起手式 ● include angularJS ● 最外層的 html 標籤裡加上 ng-app ● 兩個大括號的內部可以寫 js 運算式 ex. {{6*9}} => 54 ● Filter 過濾器 ex. {{123456 | number}} => 123,456 ● Model 用法 ng-model, ng-init Demo#1
  5. 5. Module 做為容器,包裝 controllers, filters, directives, services 想像一個積木系統 裡面有三角形、圓柱形、長方形等等 Module 就是一塊積木,具有完整的功能並可重覆使用 可以用許多塊積木組成一個 app
  6. 6. Controllers 主要功能有二 行為綁定 設定 model 的初始狀態 Demo#2
  7. 7. Filters 原始資料經過過濾器可以得到新得資料 例如 date, currency ... 官方文件 自訂 filter 範例
  8. 8. Directives 在DOM上加強 html 不足之處 內建常用的 driectives,參考 官方文件 常用基本指令 ng-app ng-controller ng-model ng-init ng-bind ng-repeat ... 事件類型 ng-click ng-dbclick ng-change ng-blur ng-focus ... ng-keydown ng-keypress ng-keyup ng-mousedown ng-mousemove ng-mouseover ng-mouseup
  9. 9. Services ● 提供特定服務功能的封裝物件 ● 通常跨 controller 邏輯會包裝成 service ● Lazily instantiated: 要用到才會裝上去 ● Singleton: 無論被取用幾次,只會實體化一次 ● 透過相依性注入的方式使用 AngularJS 原生提供許多常用的 service 例如: $http, $filter, $interval ... 參考 官方文件 進階學習 AngularJS Service, Factory, Provider 差別
  10. 10. Reference AngularJS 官網 https://angularjs.org/ CodeSchool AngularJS http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro 男丁格爾 - AngularJS 入門教學 http://abgne.tw/category/angularjs/angularjs-getting-stared 黑暗執行緒 - NG筆記 http://blog.darkthread.net/post-2014-06-11-angularjs-notes-1.aspx 保哥 - AngularJS http://blog.miniasp.com/category/AngularJS.aspx

×