読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

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

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に似ていることがわかってきた。