Angular ng-route – resolve route

Resolve promise to load route

by Krzysztof Safjanowski

HTML

<script src="https://code.angularjs.org/1.2.1/angular-route.js"></script>
<div ng-app="app">
    <div>
        <ul>
            <li>
                <a href="/visitplace">Visit place</a>
            </li>
        </ul>
    </div>
    <div ng-view=""></div>
</div>

JavaScript

function TourCoordinatorCtrl($scope, hotel) {
    $scope.hotel = hotel;
}

TourCoordinatorCtrl.resolve = {
    hotel: function (accommodation) {
        return accommodation.hotelName().then(function (name) {
            return {
                name: name,
                no: accommodation.roomNo()
            };
        });
    }
};

angular.module('app', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/visitplace', {
        controller: 'TourCoordinatorCtrl',
        template: 'hotel name: <strong>{{ hotel.name }}</strong><br>room: <strong>{{ hotel.no }}</strong>',
        resolve: TourCoordinatorCtrl.resolve
    }).otherwise({
        redirectTo: '/visitplace'
    });
})
    .controller('TourCoordinatorCtrl', TourCoordinatorCtrl)
    .factory('accommodation', function ($timeout, $q) {
    var Hotel = {};
    Hotel.hotelName = function () {
        var deferred = $q.defer();
        $timeout(function () {
            deferred.resolve('Super hotel');
        }, 3000);
        return deferred.promise;
    };
    Hotel.roomNo = function () {
        return '303';
    };
    return Hotel;
});