AngularJS Example:

by Varun Krishna P

HTML

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

AngularJS - Multiple inline ng-view Example with Services

Features :

* 2 Services manage the domain model :
- Page : store the page title and broadcasts an changedPageTitle event which the MainCtrl controller listens for and updates the DOM
- Model : a simple in-memory indexed record store with getter methods (and an add and delete method that is not used yet

* multiple ng-views with inline templates (partials). These use the `<script type=text/ng-template id=home.html>` syntax which mean we dont have to have partials in seperate files (good for single file examples like JSFiddles

PROBLEMS

1) I dont like that my Page service has to broadcast an event that the pageTitle has changed. Is there a better way to do this (is this a use case for a $watch ?

-->

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

<h1>{{page.title()}}</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

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) {
    console.log(Page);
    $scope.page= Page; 
}

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;
                }
            }
        })

        .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 name I call myself."},
                {id:3, title:'Fa', detail:"A long, long way to run."},
                {id:4, title:'So', detail:"A needle pulling thread."},
                {id:5, title:'La', detail:"A note to follow So."},
                {id:6, title:'Tee', detail:"A drink with jam and...