angular.jsをやってみる (7) - route -

2014-03-18T00:00:00+00:00 angular.js JavaScript

Routing & Multiple Viewsな辺りのドキュメントを見つつやってみた

index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular-route.min.js"></script>
  </head>
  <body>
    <a href="/#/test1">test1</a>
    <a href="/#/test2/hoge">test2(hoge)</a>
    <a href="/#/test2/fuga">test2(fuga)</a>
    <div ng-view></div>
    <script src="app.js"></script>
  </body>
</html>

ngRouteなのを使うには別途でangular-route.jsな辺りを追加しておく必要ある模様。でHashbangで指定しているURLセグメントに対応するコントローラーが走ってng-viewが指定されている部分にコンテンツが切り替えられるようになる

app.js

/* data.html は以下だけなので省略する
{% raw %}{{msg}}{% endraw %}
*/

angular.module("app", ["ngRoute"])
  .config(function($routeProvider, $locationProvider) {
    // Hashbang方式ではなくHTML5のhistory.pushState?辺りを使って実現するには$locationProvider.html5Mode(true)にすれば良い模様

    $routeProvider
      .when("/", {})
      .when("/test1", {
        controller: "Test1Controller",
        templateUrl: "/data.html"
      })
      .when("/test2/:param_name", {
        controller: "Test2Controller",
        // テンプレートを文字列で埋め込みで利用する事も可能っぽい
        template: "{{msg}}"
      })
      .otherwise({ redirectTo: "/" });
  })
  .controller("Test1Controller", function($scope) {
    $scope.msg = "Hello World";
  })
  .controller("Test2Controller", function($scope, $routeParams) {
    $scope.msg = $routeParams.param_name;
  });

Hashbangが/test1な場合はTest1Controllerが走りつつdata.htmlなテンプレートが利用されてレンダリングされる。/test2/:param_nameの場合にはTest2Controllerが走りつつ、引数で$routeParamsを使用する事でパスパラメーター辺りを利用する事も出来る

てな感じでリンクをクリックする事で画面転移を行う事無くコンテンツの切り替えが可能になるっていう感じ

$locationProvider.html5Modeについて

参考: AngularJS の $locationProvider.html5Mode について

angular.jsをやってみる (8) - $resource - angular.jsをやってみる (6) - service -