AngularJS1.5に再挑戦 その4 External Templates & Looping in a Template with ng-repeat

概要

AngularJS1.5に再挑戦 その4 External Templates

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

External Templates

• blog-list.component.jsを修正する。templateUrlという便利そうな機能を使ってみる。

'use strict';

angular.module('blogList').
    component('blogList', {
        templateUrl: '/templates/blog-list.html',
        controller: function($scope){
            $scope.title = 'Hi there!'
            $scope.clicks = 0
            $scope.someClickTest = function(){
            console.log("clicked")
            $scope.clicks += 1
            $scope.title = 'Clicked ' + $scope.clicks + '回'
            }
        }
    });

• templatesフォルダを作成し、その中に、blog-list.htmlを作成する。

<div class=''>
    <h1 class='new-class'>{{ title }}</h1>
    <button ng-click='someClickTest()'>Click me!</button>
</div>

• これで、components blogListが、blog-list.htmlをtemplateとして、<blog-list></blog-list>に出力するようになる。これはdjangoにかなり近い使用感覚なので覚えやすい。

Looping in a Template with ng-repeat

• blog-list.components.jsにコードを追記する。function内でしか使わない変数は、varで定義する。

'use strict';

angular.module('blogList').
    component('blogList', {
        templateUrl: '/templates/blog-list.html',
        controller: function($scope){
            var blogItems = [
                {title: "Some Title", id:1, description: "This is a book"},
                {title: "Title2", id:2, description: "This is a book"},
                {title: "Some Title3", id:3, description: "This is a book"},
                {title: "Some Title4", id:4, description: "This is a book"},
            ]

            $scope.items = blogItems;

            $scope.title = 'Hi there!'
            $scope.clicks = 0
            $scope.someClickTest = function(){
            console.log("clicked")
            $scope.clicks += 1
            $scope.title = 'Clicked ' + $scope.clicks + '回'
            }
        }
    });

• ng-repeatを利用して、繰り返し表示処理をしてみる。ng-repeatは、for文のようなイメージで使える。

<div class=''>
    <h1 class='new-class'>{{ title }}</h1>
    <button ng-click='someClickTest()'>Click me!</button>
</div>

{{ items }}

<ul>
    <li ng-repeat='item in items'>{{ item.title }}</li>
</ul>

• さらに以下のように修正すると、itemごとのリンクも取得できる。（今はまだ設定してないけど）

<ul>
    <li ng-repeat='item in items'><a href='/blog/{{ item.id }}'>{{ item.title }}</li>
</ul>

• ng-hrefに変えておく。ng-hrefは微妙に動作が違うらしい。今は、わからない。<li ng-repeat='item in items'><a ng-href='/blog/{{ item.id }}'>{{ item.title }}</li>

• ng-ifを利用して、アイテムのリストの数によって、表示の方法を変更する。

<h1>Blog List</h1>
<ul ng-if='items.length > 0'>
    <li ng-repeat='item in items'><a ng-href='/blog/{{ item.id }}'>{{ item.title }} {{ item.publishDate }}</li>
</ul>

<span ng-if='items.length == 0'>Posts coming soon</span>

• かなりdjangoに似ていることがわかってきた。