Route Templates in Angular

A starting point for using route templates on jsFiddle.

by ncapito

HTML

<script type="text/ng-template" id="this.html">
  This Page.
</script>
<script type="text/ng-template" id="that.html">
  That Page.
</script>
<script type="text/ng-template" id="other.html">
  Other Page.
</script>

    <div ng-controller="MainCtrl">
        <div>{{location.path()}}</div>
      <ul>
          <li><a href="#/this">This</a></li>
          <li><a href="#/that">That</a></li>
          <li><a href="#/other">Other</a></li>
      </ul>
      <ng-view></ng-view>
    </div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-route.min.js"></script>
<style>

JavaScript

var app = angular.module( "myApp", ['ngRoute'] );
    
    app.config( function ( $routeProvider,$locationProvider ) {
      $routeProvider
        .when( '/this', { templateUrl: 'this.html' } )
        .when( '/that', { templateUrl: 'that.html' } )
        .when( '/other', { templateUrl: 'other.html' } )
        .otherwise( { redirectTo: 'this' } );
      

    });
    
    app.controller( 'MainCtrl', function ( $scope, $location ) {
        $scope.location = $location;
    });