Download as PDF, PPTX
![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="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/75/3-angular-js-7-2048.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/75/3-angular-js-9-2048.jpg)
3分でわかるangular js
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. ng-app" この中身がAngularJSによって管 理される。 <html ng-app="helloApp"> <head> <meta charset="utf-8"> </head> ! ! ng-controller このViewがMyControllerと紐付 けられる。 ng-click クリックされたらchangeFoo()が 呼ばれる。 <bodyng-controller="MyController"> <input ng-model="foo" value="bar"> <button ng-click="changeFoo()">{{buttonText}}</button> <div>{{ foo }}</div> <script src="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>
- 8.
- 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をつかってテストが書きやすい