AngularJS Example:

by Akram kamal

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!-- 

-->

<div ng-controller="MainCtrl" ng-app=app>

<h1>{{pageTitle}}</h1>

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

<hr>
    <ng-view>Loading...</ng-view>

<hr>
Footer

<!-- Inline Templates (Partials) -->
    
<script type=text/ng-template id=home.html>
    <!-- Home -->
    <ul>
        <li><a href="#/list">Show Items</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>
</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

debugger;

angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                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: '/home'});
}]);


/* Controllers */

function MainCtrl($scope, Page) {
    /* this scope is inherited by any child controllers so is used as a common data model that they can share */
    $scope.pageTitle = ""; // gets set by each child controller
    $scope.$on('changedPageTitle', function(){
        $scope.pageTitle = Page.title();
    })
}

function HomeCtrl($scope, Page) {
    Page.setTitle("Welcome");
}


function ListCtrl($scope, Page, Model) {
    Page.setTitle("Items");
    $scope.items = Model.notes();

}

function DetailCtrl($scope, Page, Model, $routeParams, $location) {
    Page.setTitle("Detail");
    var id = $scope.itemId = $routeParams.itemId;
    $scope.item = Model.get(id);
}

function SettingsCtrl($scope, Page) {
    Page.setTitle("Settings");
}

/* Services */

angular.module('appServices', [])

        .factory('Page', function($rootScope){
            var pageTitle = "Untitled";
            return {
                title:function(){
                    return pageTitle;
                },
                setTitle:function(newTitle){
                    pageTitle = newTitle;
                    $rootScope.$broadcast('changedPageTitle');
                }
            }
        })

        .factory ('Model', function () {
            var data = [
                {id:0, title:'Doh', detail:"A dear. A female dear."},
                {id:1, title:'Re', detail:"A drop of golden sun."},
                {id:2, title:'Me', detail:"A...