AngularJS1.5に再挑戦 その5 URL Routing Part 1
概要
AngularJS1.5に再挑戦 その5 URL Routing Part 1
参考動画・参考サイト
AngularJS — Superheroic JavaScript MVW Framework
URL Routing Part 1
- ngRouteを利用してみる。
$ 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に似ているという印象がする。