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

Djangoroidの奮闘記

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

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に近くて覚えやすい。