メシのタネ

めしのたねになるIT情報配信サイト


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

, ,

  1. Webプログラム
  2. javascript
  3. AngularJS
  4. 【Angular.JS】idで表示テンプレートを切り替える方法

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

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

ページ変移する場合に、普通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>  

アプリケーションのルートへアクセスすれば、top-tmplのテンプレートが表示されます。
まだあんまり良く分かってないので、要勉強な感じです。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

若い頃、「仕事中にハマったこと」や「誰かに共有したい技術的な気づき」をアウトプットしたくてブログを始めましたが、勢い任せでよく分からない記事を大量生産し、あえなく飽きて終了。

改めて今、キャリア15年分の経験や知識が、これからITエンジニアを目指す方や、同じような課題で悩んでいる現役エンジニアの「メシのタネ」になるような記事を残したいと思っています。
※過去の記事は見ると精神が崩壊するため、そっとしておいてください。

🛠 経歴という名の珍道中:
文系Fラン → 広告営業 → Web営業 → 通信営業 → Web進行 → 出版 → Web媒体運用 → ソフトウェアハウス → SES → フリーランス

専門教育も受けず、転職歴も多数。履歴書はまるで時系列の事故記録のようですが、試行錯誤を重ね、なんとかエンジニアとして食べています。

このブログでは、そんな「履歴書クラッシャー型エンジニア」が送る、
名古屋一敷居の低い、実務に役立つ技術ブログを目指します。

Laravel
Laravel Eloquent sync 系メソッド完全攻略 — 安全な同期のための 5 大リスクと回避策New!!
Laravel
belongsToMany 実戦ガイド ── “withPivot”で追加カラムを守る 中間テーブル設計チェックリストNew!!
PHP
魔王と行く! / Interface / Polymorphism / Ontology 深淵ガイドNew!!
Laravel
Laravel 12、「コード 1 行も書き換えず未来へ」──静かな革命の手順書
Laravel
LaravelのMiddlewareって意味あるの?仕組み・使いどころ・やらかしまで整理してみた
Laravel
ServiceProviderって何してるの?DIの背後で動いてるやつの正体