![ng-app"
この中身がAngularJSによって管
理される。
<html ng-app="helloApp">
<head>
<meta charset="utf-8">
</head>
!
!
ng-controller
このViewがMyControllerと紐付
けられる。
ng-click
クリックされたらchangeFoo()が
呼ばれる。
<body ng-controller="MyController">
<input ng-model="foo" value="bar">
<button ng-click="changeFoo()">{{buttonText}}</button>
<div>{{ foo }}</div>
<script src=/slideshow/3angular-js/31712567/"bower_components/angular/angular.js"></script>
<script>
var helloApp = angular.module('helloApp', []);
{{ }}
buttonText変数に入ったデータが
helloApp.controller('MyController', ['$scope', function($scope) {
表示される。
$scope.buttonText = 'buttonだよ';
!
$scope.foo = 'bar';
$scope.changeFoo = function() {
$scope.buttonText = ‘押されちまった悲しみに’;
$scope.foo = ‘押された-!’;
};
}]);
</script>
</body>
</html>](https://image.slidesharecdn.com/3angularjs-140227053209-phpapp02/85/3-angular-js-7-320.jpg)
![someModule.controller('MyController',
?['$scope',
?'dep1',
?'dep2',
?function($scope,
?dep1,
?dep2)
?{
?...
?$scope.aMethod
?=
?function()
?{
?
?
?...
?}
?...
}]);
MyControllerは、$scope, dep1,
dep2に依存するよ!
MyController作成時にangularjsが名
前から引っ張ってくる
つまり
AngularJSはDIの徹底のためにJSのグローバル変数も全て、再定義している
→ http://docs.angularjs.org/api/ng/service
何が良いか
* プロジェクトが分割しやすい
* Mockをつかってテストが書きやすい](https://image.slidesharecdn.com/3angularjs-140227053209-phpapp02/85/3-angular-js-9-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (8)
Similar to 3分でわかるangular js (20)
![[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://cdn.slidesharecdn.com/ss_thumbnails/net20122asp-netmvc4beta-120225025400-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Recently uploaded (6)
3分でわかるangular js
- 4. AngularJSの特徴 変なHTML Two-way Data Binding Dependency Injection
- 7. ng-app" この中身がAngularJSによって管 理される。 <html ng-app="helloApp"> <head> <meta charset="utf-8"> </head> ! ! ng-controller このViewがMyControllerと紐付 けられる。 ng-click クリックされたらchangeFoo()が 呼ばれる。 <body ng-controller="MyController"> <input ng-model="foo" value="bar"> <button ng-click="changeFoo()">{{buttonText}}</button> <div>{{ foo }}</div> <script src=/slideshow/3angular-js/31712567/"bower_components/angular/angular.js"></script> <script> var helloApp = angular.module('helloApp', []); {{ }} buttonText変数に入ったデータが helloApp.controller('MyController', ['$scope', function($scope) { 表示される。 $scope.buttonText = 'buttonだよ'; ! $scope.foo = 'bar'; $scope.changeFoo = function() { $scope.buttonText = ‘押されちまった悲しみに’; $scope.foo = ‘押された-!’; }; }]); </script> </body> </html>
- 9. someModule.controller('MyController', ?['$scope', ?'dep1', ?'dep2', ?function($scope, ?dep1, ?dep2) ?{ ?... ?$scope.aMethod ?= ?function() ?{ ? ? ?... ?} ?... }]); MyControllerは、$scope, dep1, dep2に依存するよ! MyController作成時にangularjsが名 前から引っ張ってくる つまり AngularJSはDIの徹底のためにJSのグローバル変数も全て、再定義している → http://docs.angularjs.org/api/ng/service 何が良いか * プロジェクトが分割しやすい * Mockをつかってテストが書きやすい