AngularJS Example:

by Matthew Vasallo

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.2.6/angular-route.min.js"></script>
<div ng-app=app>
    <div>loading...</div>
<!-- <ng-include src="'main.html'"></ng-include> -->
<hr>
<ng-view></ng-view>
 -->
<!-- Inline Templates (Partials) -->
<script type=text/ng-template id=main.html>
    <div ng-controller="MainController" >
    <h1>testing if {{chris}}</h1>

<p> <a href="#/home">Home</a> |
    <a href="#/list">List</a> |
    <a href="#/settings">Settings</a>
</p>

    </div>

</script>  
<script type=text/ng-template id=home.html>
    <!-- Home -->
    <ul>
        <li><a href="#/list">Show Items {{matt}}</a></li>
        <li><a href="#/settings">Settings</a></li>
    </ul>
</script>

<script type=text/ng-template id=list.html>
    <!-- List -->
    <p>Choose an Item</p>
    <ul>
        <li ng-repeat="item in items"><a href="#/detail/{{item.id}}">{{item.title}}</a></li>
    </ul>
    </div>
</script>

<script type=text/ng-template id=detail.html>
    <!-- Detail -->
    <h2>{{item.title}}</h2>
    <p>{{item.detail}}</p>
    <hr>
    <p>{{item.id}}</p>
</script>

<script type=text/ng-template id=settings.html>
    <!-- Settings -->
    <p>Settings go here ...</p>
</script>
    

</div>

JavaScript

var module = angular.module('app', ['ngRoute', 'appServices']);
    
    module.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/main', {templateUrl: 'main.html',
                               resolve: {
                        "test": function ($q, $timeout) {
                            console.log('starting to resolve');
                            var myFriend = $q.defer();
                            $timeout(function () {
                                myFriend.resolve({
                                    hotelName: function () {
                                        return "My Friend's friend's hotel";
                                    },
                                    roomNo: function () {
                                        return "404";
                                    }
                                });
                            }, 1000);
                            return myFriend.promise;
                        }
                    }}).
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',
                               controller: ListCtrl}).
                when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
                otherwise({redirectTo: '/main'});
}]);

module.controller('MainController', ['$scope', function($scope, test){
    $scope.chris = "it worked!";
    console.log('resolved!');
}]);
/* Controllers */

function MainCtrl($scope, Page) {
        $scope.chris = 'hello world';
    console.log('hello world');
    console.log(Page);
    $scope.page= Page; 
}

function HomeCtrl($scope, Page) {
    $scope.matt = 'matt';
        console.log('mateo');
    Page.setTitle("Welcome");
}


function ListCtrl($scope, Page, Model, test) {
    console.log('mateo3',...