AngularJS1.5に再挑戦 その6 Detail View with Parameters

概要

AngularJS1.5に再挑戦 その6 Detail View with Parameters

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Detail View with Parameters

• blog-detail componentを作成していく。まずは、app/blog-detail/フォルダを作成する。

• blog-detail.module.jsファイルを作成する。

'use strict';

angular.module('blogDetail', []);

• blog-detail.component.jsファイルを作成する。

'use strict';

angular.module('blogDetail').
    component('blogDetail', {
        templateUrl: '/templates/blog-detail.html',
        controller: function($routeParams, $scope){
            var blogItems = [
                {title: "Some Title", id:1, description: "This is a book", publishDate: "2017-01-08"},
                {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"},
            ]

            // console.log($routeParams)
            $scope.title = "Blog " + $routeParams.id
        }
    });

• index.htmlファイルに読み込ませる。

        <script src='/js/app/blog-detail/blog-detail.module.js' ></script>
        <script src='/js/app/blog-detail/blog-detail.component.js' ></script>

• app.module.jsに追記しておく。

'use strict';

angular.module('try', [
    // external
    'ngResource',
    'ngRoute',
    // internal
    'blogDetail',
    'blogList'
]);

• app.config.jsにも、detailへのroutingを設定しておく。

when("/blog/:id", {
                    template: "<blog-detail></blog-detail>"
                }).

• templates/blog-detai.htmlを作成する。

<h1>{{ title }}</h1>

• これで、titleが表示されるようになるはず。djangoに近くて覚えやすい。