初探 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強大的不只是這樣而己，讓我們明天繼續看下去