【Angular.JS】idで表示テンプレートを切り替える方法

2014年9月19日 2019年11月7日

mikaduki

最近はjs関係の強化に努めています。
jsに関わらず、色んなことを頑張ってますが、
どれも成果が目に見えて上がりにくくて
嫌になったりもしましたが、成果なんてどうでも良いのです。
私は明鏡止水。水の様にあるだけでいいのです。

INDEX

ページの切り替えのテンプレート化

ページ変移する場合に、普通HTMLだったら、
index.html、page.htmlと用意してindexからpageへ
リンク貼ってやる必要がありますが、
ページ丸ごと変える必要が無い場合テンプレート化しておいて
何回か同じフォーマット使いまわせたら便利ですよね。

Anglular.JSにそういう機能がついてるので紹介したいと思います。
が、まだ2つしかやり方を知らないので知ってる範囲で書きます。

最初ローカルでやろうとしたらXHRのエラーが出たので、
Webサーバー上でやった方がいいかと思われます。

index.htmlを作る

Angular.jsをまずbody以下に読み込ませます。
index.htmlにはテンプレート用のHTMLを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <style></style>
</head>
<body style="">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.min.js"></script>
 
  <script type="text/ng-template" id="index-tmpl">
        <h1>hello</h1>
        <a href="#page">page</a>
  </script>

こんな感じになります。
idは別のにしてもかまいません。

ルーティングモジュールを作る

次に、アドレスに対しての制御をするモジュールを作成します。
適当に拡張子.jsにしたファイルを用意します。

angular.module('App', ['ngRoute']).config(['$routeProvider', function ($routeProvider) {
     $routeProvider
       .when('/', {
         templateUrl: 'top-tmpl'
       })
       .when('/page', {
         templateUrl: 'page'
       })
     $routeProvider
     .otherwise({
       redirectTo: '/'
     });
       
}]);

このように記述します。
書いてあるのはngRouteモジュールから.configメソッドを呼び出して
$routeProviderオブジェクトにパスがこうだったら、ここに飛ぶみたいな指示を書いていきます。
正直$routeProviderがオブジェクトなのか自信がありませんが、
メソッド使ってるので多分オブジェクトだと思います。
このwhenメソッドの第一引数に、アクセスされるパスを書いて、
第二引数はプロパティに飛び先を渡してやります。

最後に書いてある奴は、設定してないアドレスでアクセスした場合何処に飛ばすかで
Rootに飛ばすと書いてあります。

テンプレートの定義とモジュールの読み込み

index.htmlにテンプレートを書いていきます。
テンプレートはscriptタグで囲います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
  <style></style>
</head>
<body style="" ng-app="App">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.min.js"></script>
  <script src="app.js"></script>//さっき作ったモジュールを読み込む
 
  <script type="text/ng-template" id="top-tmpl">
        <h1>hello</h1>
        <a href="#/page/">page</a>
  </script>
  <script type="text/ng-template" id="page">
        <h1>page</h1>
  </script>  