2014年10月7日 星期二

初探 ionic 中的 AngularJS(上)

這個部份介紹ionic 中使用AngularJS 的雙向綁定(Two way data-binding)及依賴注入(DI)


雙向綁定(Two way data-binding)
data-binding 在View 與 Controller 之間,AngularJS 藉由 Model 來做為資料二者之前的傳遞,所以無論你在 View 修改了什麼內容,或是在 Controller 這端修改了 Model 內容,只要有綁定變數的都會即時被render。
例如: 可以藉由$scope 可以存放在該 controller 內的變數,ng-model 可以直接把指定的變數與$scope中的做data-binding。

請打開 template/tab-account.html ,試著加入一個輸入元件,變數指定為 account
另外開發 js/controller.js 中 ,修改一下AccountCtrl 的controller,加入$scope.account可以指定預設的變數值。


呈現的結果畫面,應該會如下
可以直接修改 username ,就可以即時同步yout account is xxxx


依賴注入(DI)
在controller 中的常會使用的 $scope,它就是一種注入的方式




自行開發的Factory也是可以被注入使用的






以上的Data-Binding 及 DI 二個功能,是不是覺得AngularJS 很神奇呢,但不要因為這樣就滿足了,實作 Data-Binding 的Framework 不只有 Angular ,所以當然 AngularJS強大的不只是這樣而己,讓我們明天繼續看下去

沒有留言:

張貼留言