templates + routes

by manoj

HTML

<div>
    <a href="#/">Home</a> | <a href="#/inbox?id=1&data='123'">Inbox thread 1</a> | <a href="#/inbox?id=2&data='456'">Inbox thread 2</a> | <a href="#/inbox?id=3&data='789'">Inbox thread 3</a>
    <br/><br/>
122
    <div ng-view></div>
</div>

<script type="text/ng-template" id="home.html">    
    Go to <a href="#/inbox">Inbox</a>222
</script>

<script type="text/ng-template" id="inbox.html">
    <div style="height: 100px; overflow-y: auto; background-color: #eee;">33
        <p style="height: 500px;">Scroll me and then click on one of the above inbox thread links...</p>
    </div>
    {{ name }} id:{{ params.id }} data:{{ params.data }}
</script>

JavaScript

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

app.config(function($routeProvider, $locationProvider){              
    $routeProvider.when('/', {
        templateUrl: 'home.html',
        controller: 'HomeCtrl'        
    });
    $routeProvider.when('/inbox', {
        templateUrl: 'inbox.html',
        controller: 'InboxCtrl',
        reloadOnSearch: false
    });    
});

app.controller('HomeCtrl', function($scope) {
    $scope.name = 'Home';    
});
    
app.controller('InboxCtrl', function($scope, $routeParams) {
    $scope.name = 'Inbox';   
    $scope.params = $routeParams;

    $scope.$on('$routeUpdate', function(value) {
        $scope.params = $routeParams;
    });    
});