AngularJS - Routes and Resolving

by Nitish Kumar

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-app="myapp">
    <div ng-view></div>
    <a href="#" target="_blank">Open in Tab/Window</a>
    <script type="text/ng-template" id="/list.html">
        <h4>List</h4>
        <a href="#/detail/1" class="btn">One</a>
        <a href="#/detail/2" class="btn">Two</a>
    </script>
    <script type="text/ng-template" id="/detail.html">
        <h4>Detail {{data.id}}</h4><a ng-click="back()" class="btn">Back</a>
    </script>
</div>

JavaScript

var myapp = angular.module('myapp', []).config(function ($routeProvider) {
    $routeProvider.when('/list', {
        templateUrl: '/list.html'
    }).when('/detail/:id/', {
        templateUrl: '/detail.html',
        controller: 'DetailCtrl',
        resolve: {
            load: function ($route, dataService) {
                return dataService.load($route.current.params.id);
            }
        }
    }).otherwise({
        redirectTo: '/list'
    });
});
myapp.controller('DetailCtrl', function ($scope, $location, dataService) {
    $scope.data = dataService.data;
    $scope.back = function () {
        $location.path('/list');
    };
});
myapp.factory('dataService', function ($q, $timeout) {
    return { 
        data : {},
        load : function(id) {
            var defer = $q.defer();
            var data = this.data;
            $timeout(function () {
                data.id = id;
                defer.resolve(data);
            }, 1000);
            return defer.promise;
        }
    };
});