More Related Content
Similar to AngularJS入門の巻 (20)
More from Toshio Ehara (20)
AngularJS入門の巻
- 5. - 今日の内容 -
1. 立ち上がれAngularの巻
2. moduleは俺のロッカーの巻
3. 依存してしまおうの巻
4. ブラウザ(DOM)に値を表示の巻
5. データ管理はサービスよの巻
6. データの反映は何時?の巻
- 17. <div ng-app="services" ></div>
services moduleを起動するとrunメソッドが呼ばれます。
http://jsfiddle.net/itokami1123dev/rqGda/1/
angular.module(“services”).run([
!
!
!
“Ken",
!
!
!
function( Ken ){
!
var ken = new Ken();
console.log( ken.say());
}
]);
services moduleに登録した各機能は
名称文字列で取得できます。
カンマ区切りで複数指定出来ます。
module
Ken
実行時に 引数に渡されます。
Ken機能を使ってる(依存してます)
- 22. <div ng-app="app" >
<div ng-controller="CalculatorCtrl" >
{{leftValue}} + {{rightValue}} =
{{leftValue+rightValue}}
</div>
</div>
angular.module("controllers").
controller("CalculatorCtrl",[
"$scope",
function($scope){
$scope.xxx = 1 + 1 + ….;
!
}]);
データの計算式はモデルやサービスに移しましょう∼。
HTML内に計算式があったり…
Controller内に計算式があったり
…
とっても参考になる記事:お前のAngular.jsはもうMVCではない。と言われないためのTutorial
http://qiita.com/icoxfog417/items/2ac773c33a8b34288551
- 32. <div ng-controller="CalculatorCtrl" >
{{numData.leftValue}} +
{{numData.rightValue}} =
{{numData.compute()}}
<button ng-click="plusBtnClicked()" >plus1</button>
</div>
http://jsfiddle.net/itokami1123dev/b3mTU/1/
angular.module("controllers").
controller("CalculatorCtrl",[
"$scope","calculatorServ",
function($scope,calculatorServ){
// ・・・省略・・・
$scope.plusBtnClicked = function (){
calculatorServ.addLeft();
};
}]);
ng-clickは自動で$applyを呼ぶのですっきり書けますよ。