AngularJS1.5に再挑戦 その3 Create the Angular App & A Controller & Component
概要
AngularJS1.5に再挑戦 その3 Create the Angular App
参考動画・参考サイト
AngularJS — Superheroic JavaScript MVW Framework
Create the Angular App
js/appフォルダを作成する。
js/appフォルダに、app.module.js, app.config.jsを追加する。
'use strict'; angular.module('try', []);
tryというのが、moduleの名前かな。
ng-app='try'
とかで指定できる。app.module.jsは、angularのappの機能を書く。app.config.jsは、その機能を拡張するためのconfigurationをするためのもの。
そして、それぞれindex.htmlに読み込ませる必要がある。
<script src='./js/app/app.module.js'></script> <script src='./js/app/app.config.js'></script>
A Controller & Component
app/blog-listというフォルダを作成する。
blog-list.component.js, blog-list.module.jsを作成する。
blog-list.module.jsは以下の通り。
'use strict'; angular.module('bloglist', []);
- blog-list.component.jsは以下の通り。controllerというのを作成してみる。
'use strict'; angular.module('bloglist'). controller('BlogListController', function(){ console.log("hello") }); // component('bloglist');
- index.htmlに読み込ませる。
... <script src='./js/app/blog-list/blog-list.module.js' ></script> <script src='./js/app/blog-list/blog-list.component.js' ></script> ... <body> ... <div class='' ng-controller='BlogListController'> </div> ...
- さらにapp.module.jsに, moduleを読み込ませる。
'use strict'; angular.module('try', ['blogList']);
ページにアクセスして、consoleに、helloと表示されていればOK。
blog-list.component.jsに、$scopeを追記してみる。scopeは、contextと似ているところがあって、引き継ぎが可能。
'use strict'; angular.module('blogList'). controller('BlogListController', function($scope){ console.log("hello") $scope.title = 'Hi there!' }); // component('bloglist');
- さらにindex.htmlにコードを追記する。
... <div class='' ng-controller='BlogListController'> {{ title }} </div> ...
これで、BlogListControllerからcontextされた、titleを表示できる。
さらに
部分を以下のように修正する。buttonのsomeClickTestというfunctionを、BlogListControllerに書き込む必要がある。
<body> <div class='' ng-controller='BlogListController'> <h1 class='new-class'>{{ title }}</h1> <button ng-click='someClickTest'>Click me!</button> </div> </body>
- BlogListControllerに、someClickTestを定義する。動作は、clickすると、consoleに、clickedと表示されて、$scope.titleを、Clickedに上書きするもの。
'use strict'; angular.module('blogList'). controller('BlogListController', function($scope){ console.log("hello") $scope.title = 'Hi there!' $scope.someClickTest = function(){ console.log("clicked") $scope.title = 'Clicked' } }); // component('bloglist');
これで、表示されるはず。。。あら、なぜか反映されない。。。あー、よく見たら、ng-click='someClickTest'ではなくて、ng-click='someClickTest()'が正解だ。修正したら無事反映。functionの時は、引数が必要だということか。
clickの回数を数えて、表示させる機能をつける。context変数は、js内では、
$scope.
で指定して、html内では、{{}}
で表示するとざっくり覚えておこう。
'use strict'; angular.module('blogList'). controller('BlogListController', function($scope){ console.log("hello") $scope.title = 'Hi there!' $scope.clicks = 0 $scope.someClickTest = function(){ console.log("clicked") $scope.clicks += 1 $scope.title = 'Clicked ' + $scope.clicks + '回' } }); // component('bloglist');
- component機能を使ってみる。
'use strict'; angular.module('blogList'). component('blogList', { template: "<div class=''><h1 class='new-class'>{{ title }}</h1><button ng-click='someClickTest()'>Click me!</button></div>", controller: function($scope){ $scope.title = 'Hi there!' $scope.clicks = 0 $scope.someClickTest = function(){ console.log("clicked") $scope.clicks += 1 $scope.title = 'Clicked ' + $scope.clicks + '回' } });
注意点は、
ng-controller='BlogListController'
は、削除する。`<blog-list></blog-list>は、component名のblogListを、htmlのtag用に変換したものになる。そのため、component名が、blogListViewとかだと、<blog-list-view>で囲むことになる。