// A little bit of data needed to get jsfiddle to fake an ajax request var fiddleResponse = 'json=' + encodeURIComponent(angular.toJson({ name: "Nerd" })); var fiddleHeaders = { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' } }; var app = angular.module('app', []); app.config(function($routeProvider) { var getName = function(NameService) { return NameService.getName(); }; $routeProvider .when('/home', { templateUrl: '/home.html', controller: 'MainController' }) .when('/profile', { templateUrl: '/profile.html', controller: 'ProfileController', resolve: { name: getName } }) .otherwise({redirectTo: '/home'}); }); app.factory('NameService', function($http, $q) { // Create a class that represents our name service. function NameService() { var self = this; // Initially the name is unknown.... self.name = null; // getName returns a promise which when fulfilled returns the name. self.getName = function() { // Create a deferred operation. var deferred = $q.defer(); // If we already have the name, we can resolve the promise. if(self.name !== null) { deferred.resolve(self.name + " (from Cache!)"); } else { // Get the name from the server. $http.post('/echo/json/', fiddleResponse, fiddleHeaders) .success(function(response) { self.name = response.name; deferred.resolve(response.name + " (from Server!)"); }) .error(function(response) { deferred.reject(response); }); } // Now return the promise. return deferred.promise; }; } return new NameService(); }); app.controller('MainController', function ($scope, NameService) { // We have a name on the code, but it's initially empty... $scope.name = ""; // We have a function on the scope that can update the name. $scope.updateName = function() { NameService.getName() .then( /* success function */ function(name) { $scope.name = name; }, /* error function */ function(result) { console.log("Failed to get the name, result is " + result); }); }; }); app.controller('ProfileController', function($scope, name) { $scope.name = name; });
<div ng-app="app"> <p> <a href="#/home">Home</a> | <a href="#/profile">Profile</a></p> <ng-view>Loading!</ng-view> <script type="text/ng-template" id="/home.html"> <h3>Home</h3> <p>This demo shows how to use promises in an AngularJS router.</p> <p>Click <a href="#/profile">Profile</a> to see your user profile.</p> </script> <script type="text/ng-template" id="/profile.html"> <h3>Profile</h3> <p>Hello {{name}}</p> </script> </div>