#はじめに
前回は基本的なAngularjsの使い方を書いていきましたが、今回ルーティングについてです。
簡単に言いますと最初のindex.htmlにレイアウトをつくってしまい、あとは変えたい部分だけのコードをページごとに別のファイルに書いてしまおうというものです。
とりあえずやってみます。
まずAngularJSのルーティングを使えるようにするためには、headタグ内に
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
です。
#レイアウトとページの作成
全ページのレイアウトとなるindex.htmlに前回通りng-appでモジュールAppを作り、コントローラ内にはdivタグの
ng-view
これだけです。
<!DOCTYPE html>
<html ng-app ='App'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
<script type="text/javascript" src="controller.js"></script>
<style>
#header {background-color:blue; width: 100%; height: 100px; position: fixed; top: 0}
#footer {background-color:blue; width: 100%; height: 100px; position: fixed; bottom: 0}
h1 {margin: 200px}
</style>
</head>
<body>
<div id="header"></div>
<div ng-view></div>
<div id="footer"></div>
</body>
</html>
コントローラはいりません、それぞれのページでコントローラを割り当てていきます。ng-viewの部分だけがそれぞれのページで中身が変わっていきます。
今回は二つpage1.htmlとpage2.htmlのページを用意しました。
<h1>ページ１です。</h1>
<h1>ページ２です。</h1>
ng-view内に入れたい内容だけ書きます。htmlタグもbodyタグもいりません。
#ページの設定、コントローラの割り当て
次にJavaScriptの方でそれぞれのページのパスとコントローラを割り当てていきます。
var app = angular.module('App', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl : 'page1.html',
controller : 'page1_controller'
})
.when('/page2',{
templateUrl : 'page2.html',
controller : 'page2_controller'
})
});
app.controller('page1_controller', function($scope){
});
app.controller('page2_controller', function($scope){
});
前回空白だったモジュールのパラメータに'ngRoute'をいれました。
新しくでてきたのはapp.configで、これでそれぞれのページのファイルパスとURLを指定します。
.when('指定したいURL', {
templateUrl : 'ファイルパス'
controller : 'コントローラ名'
})
指定したいURLは/がルートで最初に読み込まれたときに表示されるページです。
あとはそれぞれのコントローラでやりたいイベントなどの処理を書いていけば良いです。今回は空白です。
#表示結果
さあこれで、レイアウトは一緒でそれぞれ内容の違うページができました。表示してみましょう。
ブラウザで開くとルートのURLがこんな感じのはずです。
http://.../index.html#/
or
http://.../#/
そして
page2.htmlの内容は
http://.../index.html#/page2
or
http://.../#/page2
とタイプすると表示されるはずです。
はいこれで同じコードをコピペすることなく同じレイアウトの複数のページをつくることができました。
もしうまく表示されないときはJavaScriptファイルで設定したそれぞれのページのhtmlファイルのパス指定が正しいかを確認してください。
#リンク表示
リンクはどうやってしていするのかというと、
ng-href
をつかいます。
例えば
<h1>ページ１です。</h1>
<a ng-href="#/page2">つぎのページへ</a>
これでページ２へ飛ばされます。
以上でAngularJSでのルーティングの紹介でした。