Angular js 入門介紹

1. AngularJS 入門介紹
Wan-Ting Jheng
2015/3/17

2. AngularJS
由 Google 開發維護
Open source
Javascript framework
MVC模式
特色
Directives syntax 宣告式語法
Two Way Data-Binding 雙向數據綁定
Dependency injection 相依性注入

3. 用途
不適合
只有單純頁面互動特效
適合
單一頁面網頁應用程式
有複雜邏輯、資料存取(CRUD) 應用程式類型網頁
例如: mail, 行事曆
目標
讓應用類型網頁的開發/測試變的容易

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. Module
做為容器，包裝 controllers, filters, directives, services
想像一個積木系統
裡面有三角形、圓柱形、長方形等等
Module 就是一塊積木，具有完整的功能並可重覆使用
可以用許多塊積木組成一個 app

6. Controllers
主要功能有二
行為綁定
設定 model 的初始狀態
Demo#2

7. Filters
原始資料經過過濾器可以得到新得資料
例如 date, currency ...
官方文件
自訂 filter 範例

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. Services
● 提供特定服務功能的封裝物件
● 通常跨 controller 邏輯會包裝成 service
● Lazily instantiated: 要用到才會裝上去
● Singleton: 無論被取用幾次，只會實體化一次
● 透過相依性注入的方式使用
AngularJS 原生提供許多常用的 service
例如: $http, $filter, $interval ...
參考 官方文件
進階學習
AngularJS Service, Factory, Provider 差別

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