Category Archives: AngularJS

[AngularJS]Factory

在一個 Module 中可能會需要有一些資源是要在各個 Controller 共用,這時就可以利用 AngularJS 的 Factory

使用方法

Continue Reading

[AngularJS]$http

在 AngularJS 中如果要使用 AJAX 就必須透過 $http 這個物件來處理

基本用法

module.js

$http.post $http 也提供了快速使用 HTTP Verbs,例如直接使用 POST 注意:由於 AngularJS 的 POST 預設用的 Content-Type 是 application/json;charset=utf-8,而且也不會對資料做serialize的處理,如果直接使用後端會抓不到 POST 的資料

$http.post的使用方法很簡單

在沒有任何修改狀況下,PHP 必須要用 input 取得資料

當然也可以利用 jQuery 的 $.post ,缺點就是還要另外載入 jQuery

又或者按照網路上 這裡 提供的方法,自己處理Serialize

其他用法可直接參考官網文件

Continue Reading

[AngularJS]$rootScope

$rootScope 是 AngularJS app 中最上層的 scope,一個 app(ng-app) 只會有一個 $rootScope,也就是說同一個 app 可以共用同一個 $rootScope 的值

範例 module.js

Continue Reading

[AngularJS]ngShow 與 ngHide

AngularJS 中 ngShow 與 ngHide 可以自由控制 HTML 的顯示和隱藏

ngShow

範例中將 checkbox 跟 div 綁在同一組 model 上,因為 checked 預設是 undefined,所以預設是隱藏起來的,當勾選後隱藏的div便會顯示出來

ngHide ngHide 則與 ngShow 相反

Continue Reading

[AngularJS]route 與 view

當專案越來越複雜,需要控制的東西就會越來越多,因此 AngularJS 也提供了 $route 跟 view 的功能可以透過 routing 來切換不同的 view

不過有一點要注意的是,AngularJS中的 route 其實都是同一頁(SPA),所以在url的參數上會是帶在 # 之後 例如:

基本 route 與 view 應用 首頁 index.html(使用了 BallApp Module)

module.js

view.html

$route 帶入參數 module.js

hello.html

URL

實際應用(點擊姓名後進入修改畫面) module.js

view.html

edit.html

Continue Reading

[AngularJS]ngClass

AngularJS 中如果要使用動態的 HTML class 第一想法都是用 {{ xxx }} 的方式放在 HTML 預設的 class 中,像:

但這樣的缺點是,瀏覽器一開始會找不到 class 內容,而且 HTML 也不符合 W3C,為了因應這個狀況 AngularJS 中可以透過 ng-class 來支援動態的 HTML class。

範例

Continue Reading

[AngularJS]ngSubmit

AngularJS 中,可以透過 ng-submit 來判斷 form 裡面的 submit 來完成一些事情(前提是form不能用action的屬性,不然一樣會被送出)

Continue Reading

[AngularJS]$watch

在 AngularJS 的 Controller 中,可以利用 $scope 的 $watch 來即時監控資料的正確性

監聽 object

另外也可以透過 $watchCollection 或 $watchGroup(1.3後才有) 兩個函式可以使用

$watchCollection 用來監測 collection

$watchGroup 用來監測多個變數

Continue Reading