Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

Angular js 入門介紹

Download to read offline

Angular js 入門介紹

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • sunwingman

    May. 24, 2015
  • PeterLai5

    May. 14, 2015

Angular js 入門介紹

Views

Total views

1,042

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

12

Shares

0

Comments

0

Likes

2

×