Route Templates in Angular

A starting point for using route templates on jsFiddle.

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<script type="text/ng-template" id="home.html">
  Home
    
  Friends: {{homeFriends}}
</script>
<script type="text/ng-template" id="contacts.html">
  Contacts
    
  Friends: {{contactFriends}}
</script>


<ul>
    <li><a href="#/home">Home</a></li>
    <li><a href="#/contacts">Contacts</a></li>
</ul>
<ng-view></ng-view>

JavaScript

var appModule = angular.module('appModule', ['ngRoute']);

appModule.config(['$routeProvider',
              function($routeProvider) {
                $routeProvider.
                when('/home', {
                  templateUrl: 'home.html',
                    controller: 'ngHomeControl'
                    }).
                when('/contacts', {
                  templateUrl: 'contacts.html',
                    controller: 'ngContactControl'
                  });
            }]);

appModule.service('friendsService', function(){
    console.log("friendsService: I was instantiated!");
    this.getFriendList = function () {
        return ['John', 'James', 'Jake'];
    }
});

appModule.controller('ngHomeControl', function($scope, friendsService) {
    console.log("ngHomeControl: I was instantiated!");
    $scope.homeFriends = friendsService.getFriendList();
});

appModule.controller('ngContactControl', function($scope, friendsService) {
    console.log("ngContactControl: I was instantiated!");
    $scope.contactFriends = friendsService.getFriendList();
});