[AngularJS] Best Practise - Resolve promises in router, defer controllers

See more:http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/

/**
* Created by Answer1215 on 1/13/2015.
*/ /**
* Controller(s)
* */ function AppController($rootScope, $location) { var appCtrl = this; $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) {
appCtrl.message = rejection.message;
appCtrl.isError = true;
}) appCtrl.goHome = function() { $location.path('/');
}
} /**
* Directive(s)
* */ function ErrorDirective() {
return {
restrict: "EA",
bindToController: true,
controller: 'AppController',
controllerAs: 'appCtrl',
templateUrl: 'error.html'
}
} /**
* Angular module
* */ angular.module('app', [
'ngRoute',
'app.home'
])
.constant('PEOPLE_URL', 'data.json')
.controller('AppController', AppController)
.directive('error', ErrorDirective)
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "home.html",
controller: "HomeController",
controllerAs: "homeCtrl",
/*
* resolve run first, prepare the data ready,
* then controller & template show up
* */
resolve: HomeController.resolve
});
});
/**
* Created by Answer1215 on 1/13/2015.
*/ function HomeController(loadPeople, getMessage) {
var homeCtrl = this; homeCtrl.message = getMessage;
homeCtrl.people = loadPeople;
} HomeController.resolve = { loadPeople: function(SimpleDataService) {
return SimpleDataService.getPeople();
},
getMessage : function(SimpleDataService) {
return SimpleDataService.message;
}
} function SimpleDataService($http, $q, PEOPLE_URL) {
var simpleData = {};
simpleData.people = [];
simpleData.message = "Hello From Service"; simpleData.getPeople = function() {
return fetchPeople().then(function(result) {
return result.data;
}); } function fetchPeople() {
var defer = $q.defer();
$http.get(PEOPLE_URL)
.success(function(data, status, headers, config) {
simpleData.people = data;
defer.resolve({data: data, message: "OK"});
}).
error(function(data, status, headers, config) { if(status === 404){
data = data;
defer.reject({data: data, message: "Cannot find " + config.url});
}
});
return defer.promise;
} return simpleData;
} angular.module('app.home', [])
.controller('HomeController', HomeController)
.service('SimpleDataService', SimpleDataService);

While the routes are being resolved we want to show the user something to indicate progress. Angular will fire the $routeChangeStart event as we navigate away from the page, which we can show some form of loading and ajax spinner, which can then be removed on the $routeChangeSuccess

上一篇:Oracle存储过程


下一篇:解决MySQL Workbench导出乱码问题