18
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

Organization

AngularJSのルーティング

はじめに

前回は基本的な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

これだけです。

index.html
<!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のページを用意しました。

page1.html
<h1>ページ1です。</h1>
page2.html
<h1>ページ2です。</h1>

ng-view内に入れたい内容だけ書きます。htmlタグもbodyタグもいりません。

ページの設定、コントローラの割り当て

次にJavaScriptの方でそれぞれのページのパスとコントローラを割り当てていきます。

controller.js
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://.../#/

Screenshot (9).png

そして
page2.htmlの内容は

http://.../index.html#/page2
or
http://.../#/page2
とタイプすると表示されるはずです。

Screenshot (10).png

はいこれで同じコードをコピペすることなく同じレイアウトの複数のページをつくることができました。
もしうまく表示されないときはJavaScriptファイルで設定したそれぞれのページのhtmlファイルのパス指定が正しいかを確認してください。

リンク表示

リンクはどうやってしていするのかというと、
ng-href
をつかいます。

例えば

page1.html
<h1>ページ1です。</h1>
<a ng-href="#/page2">つぎのページへ</a>

Screenshot (11).png

これでページ2へ飛ばされます。

以上でAngularJSでのルーティングの紹介でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
18
Help us understand the problem. What are the problem?