search
LoginSignup
18

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でのルーティングの紹介でした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
18