ng-template でテンプレートを HTML に埋め込む

script タグの type に text/ng-template を指定したら、 AnguarJS が中のテキストを $templateCache にキャッシュしてくれる。

そして、ルーターでテンプレートの URL を指定するとき、その script タグの id にすると $templateCache にキャッシュされているテンプレートが使える。

 <!DOCTYPE html>
 <html ng-app="SampleApp">
   <head>
     <meta charset="utf-8">
     <title>SampleApp</title>
   </head>
   <body ng-controller="MainCtrl">
       <ul class="nav">
         <li><a href="#/">Home</a></li>
         <li><a href="#/tags">Tags</a></li>
       </ul>
       <div class="main" ng-view></div>
     </div>

     <!-- type を text/ng-template にすると $templateCache にキャッシュされる -->
     <script id="home_template" type="text/ng-template">
       <h2>Timeline</h2>
       <ul ng-repeat="activity in activities">
         <li>
           <span ng-bind="activity.account"></span> - <span ng-bind="activity.action"></span>
         </li>
       </ul>
     </script>
     <script id="tags_template" type="text/ng-template">
       <h2>Tags</h2>
       <ul ng-repeat="tag in tags">
         <li ng-bind="tag.name"></li>
       </ul>
     </script>

     <script src="js/angular.js"></script>
     <script src="js/angular-route.js"></script>
     <script>
       window.App = angular.module("SampleApp", ["ngRoute"]);

       // templateUrl には script タグで書いたテンプレートの id を指定する
      App.config(["$routeProvider", function($routeProvider) {
           $routeProvider.
             when("/", {
               controller: "HomeCtrl",
               templateUrl: "home_template"
             }).
             when("/tags", {
               controller: "TagsCtrl",
               templateUrl: "tags_template"
             })
       }]);

       App.controller("MainCtrl", ["$scope", function($scope) {
       }]);

       App.controller("HomeCtrl", ["$scope", function($scope) {
           $scope.activities = [
             { account: "foo", action: "create" },
             { account: "bar", action: "delete" }
           ];
       }]);

       App.controller("TagsCtrl", ["$scope", function($scope) {
           $scope.tags = [
             { name: "hoge" },
             { name: "fuga" }
           ];
       }]);
     </script>
   </body>
 </html>

ページ数の少ない　Single Page Application なら、これでテンプレートを分けて書けばよさそうだな。