Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1.5に再挑戦 その3 Create the Angular App & A Controller & Component

概要

AngularJS1.5に再挑戦 その3 Create the Angular App

参考動画・参考サイト

Coding for Entrepreneurs

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>で囲むことになる。