Route Templates in Angular

A starting point for using route templates on jsFiddle.

by Sky Sigal

HTML

<div ng-controller="MainCtrl">
  <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>

<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>

JavaScript

var app = angular.module( "myApp", [] );

app.config( function ( $routeProvider ) {
  $routeProvider
    .when( '/this', { templateUrl: 'this.html' } )
    .when( '/that', { templateUrl: 'that.html' } )
    .when( '/other', { templateUrl: 'other.html' } )
    .otherwise( { redirectTo: '/this' } );
});

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