Djangoroidの奮闘記

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

AngularJS1.5に再挑戦 その5 URL Routing Part 1

概要

AngularJS1.5に再挑戦 その5 URL Routing Part 1

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

URL Routing Part 1

  • ngRouteを利用してみる。

AngularJS

  • $ rackup で開発用サーバ立ち上げておく。

  • 公式サイトの、ngRouteのCDN用URLを読み込む。"//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"の箇所。XYZのところを自分が使っているバージョンを入れる。

...
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js'></script>
...
  • 上記urlをコピペする際に、httpsをつけておくと尚良しとのこと。

  • さらに、//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.jsの最後のファイル名部分をangular-resource.jsに変えたurlも読み込んでおく。

...
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js'></script>
...
  • rackupの開発サーバで利用する際にはrelative pathではなく、absolute pathに変更しておく。
        <script src='/js/app/app.module.js'></script>
        <script src='/js/app/app.config.js'></script>

        <script src='/js/app/blog-list/blog-list.module.js' ></script>
        <script src='/js/app/blog-list/blog-list.component.js' ></script>
  • app.module.jsに、ngRouteと、ngResourceを追記しておく。
'use strict';

angular.module('try', [
    // external
    'ngResource',
    'ngRoute',

    // internal
    'blogList'
]);
  • app.config.jsにコードを追記する。
'use strict';

angular.module('try').
    config(
        function(
            $locationProvider,
            $routeProvider
            ){

            $routeProvider.
                when("/blog/1",{
                    template: "<h1>Hi<h1>"
                }).
                when("/blog/2",{
                    template: "<blog-list></blog-list>"
                }).
                otherwise({
                    template: "Not Found"
                })
    });
  • これで、index.htmlにアクセスしてみる。。。routeによる表示の変更が反映されていない。。。index.htmlを以下のように修正してみる。これについては後で調べておこう。
    <body>
        <div ng-view>
    </div>
    </body>
  • うーん、ng-viewが機能しないな。。。まあ後回しにしよう。

  • 最終的に、以下のようにapp.config.jsを修正した。

'use strict';

angular.module('try').
    config(
        function(
            $locationProvider,
            $routeProvider
            ){
            $locationProvider.html5Mode({
                enabled:true
                })

            $routeProvider.
                when("/", {
                    template: "<blog-list></blog-list>"
                }).
                when("/blog/1", {
                    template: "<h1>Hi<h1>"
                }).
                when("/blog/2", {
                    template: "<blog-list></blog-list>"
                }).
                otherwise({
                    template: "Not Found"
                })
    });

URL Routing Part 2

  • app.config.jsに、/about ルートを追記する。
'use strict';

angular.module('try').
    config(
        function(
            $locationProvider,
            $routeProvider
            ){
            $locationProvider.html5Mode({
                enabled:true
                })

            $routeProvider.
                when("/", {
                    template: "<blog-list></blog-list>"
                }).
                when("/about",{
                    template: "/templates/about.html"
                }).
                when("/blog/1", {
                    template: "<h1>Hi<h1>"
                }).
                when("/blog/2", {
                    template: "<blog-list></blog-list>"
                }).
                otherwise({
                    template: "Not Found"
                })

    });
  • templates/about.htmlを追加作成する。
<h1>About Us</h1>

<p>
    about ページです。
</p>
  • index.htmlにコードを追記する。
    <body>
        <h1>Us</h1>
        <blog-list></blog-list>
        <div ng-view>

        </div>
    </body>
  • 相変わらず<div ng-view></div>は機能せず。。。

URL Routing Part 3 - RouteParams

  • app.config.jsに、idを渡す
'use strict';

angular.module('try').
    config(
        function(
            $locationProvider,
            $routeProvider
            ){
            $locationProvider.html5Mode({
                enabled:true
                })

            $routeProvider.
                when("/", {
                    template: "<blog-list></blog-list>"
                }).
                when("/about",{
                    template: "/templates/about.html"
                }).
                when("/blog/:id", {
                    template: "<blog-list></blog-list>"
                }).
                // when("/blog/2", {
                //     template: "<blog-list></blog-list>"
                // }).
                otherwise({
                    template: "Not Found"
                })

    });
  • blog-list.component.jsを修正する。$routeParamsを表示させるようにする。routeParamsは、多分、djangoでいうところのurls.pyの、url内にあるとか、に当たる箇所だと思う。routeからparameterを取得できる。ここでは、idを取得するようにしている。
'use strict';

angular.module('blogList').
    component('blogList', {
        templateUrl: '/templates/blog-list.html',
        controller: function($routeParams, $scope){
            console.log($routeParams.id)

            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"},
            ]

            $scope.items = blogItems;

            $scope.title = 'Hi there!'
            $scope.clicks = 0
            $scope.someClickTest = function(){
            console.log("clicked")
            $scope.clicks += 1
            $scope.title = 'Clicked ' + $scope.clicks + '回'
            }
        }
    });
  • 上記の例の場合は、idの部分が、routeParamsが渡される。

  • 例えば、以下のようにapp.config.jsに追記するとする。

                when("/blog/:id", {
                    template: "<blog-list></blog-list>"
                }).
                when("/blog/:id/:abc", {
                    template: "<blog-list></blog-list>"
  • こちらの例の場合は、それぞれ以下のようにconsoleに表示される。
// http://127.0.0.1:9292/blog/1/にアクセスした時は以下のようにconsoleに表示される。
Object { id: "1" }

// http://127.0.0.1:9292/blog/1/ddddの場合は

Object { id: "1", abc: "dddd" }blog-list.component.js:7:13

// http://127.0.0.1:9292/blog/1/ccccの場合は

Object { id: "1", abc: "cccc" }blog-list.component.js:7:13
  • やはりかなりdjangoのurl routeに似ているという印象がする。