AngularJS StyleGuide

Routing resolves

• Promises: Resolve Controller dependencies in the $routeProvider (or $stateProvider for ui-router), not the Controller itself

  // avoid
  function MainCtrl (SomeService) {
    var _this = this;
    // unresolved
    _this.something;
    // resolved asynchronously
    SomeService.doSomething().then(function (response) {
      _this.something = response;
    });
  }
  angular
    .module('app')
    .controller('MainCtrl', MainCtrl);
  
  // recommended
  function config ($routeProvider) {
    $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      resolve: {
        // resolve here
      }
    });
  }
  angular
    .module('app')
    .config(config);
  

• Controller.resolve property: Never bind logic to the router itself. Reference a resolve property for each Controller to couple the logic

  // avoid
  function MainCtrl (SomeService) {
    this.something = SomeService.something;
  }
  
  function config ($routeProvider) {
    $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controllerAs: 'vm',
      controller: 'MainCtrl'
      resolve: {
        doSomething: function () {
          return SomeService.doSomething();
        }
      }
    });
  }
  
  // recommended
  function MainCtrl (SomeService) {
    this.something = SomeService.something;
  }
  
  MainCtrl.resolve = {
    doSomething: function (SomeService) {
      return SomeService.doSomething();
    }
  };
  
  function config ($routeProvider) {
    $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controllerAs: 'vm',
      controller: 'MainCtrl'
      resolve: MainCtrl.resolve
    });
  }
  

• This keeps resolve dependencies inside the same file as the Controller and the router free from logic