Resolving Promises for a Controller

ou Resolvendo promessas para um controlador

Controller Activation Promises

ou Ativação de promessas no controlador

• Resolva a lógica de inicialização no controlador (controller) em uma função iniciar.

  Por que? Colocando a lógica de inicialização em um lugar consistente no controlador (controller), torna mais fácil de localizar, mais consistente para testar e ajuda a evitar o espalhamento da lógica de inicialização pelo controlador (controller).

  Nota: Se você precisa cancelar a rota condicionalmente antes de utilizar o controlador (controller), utilize uma resolução de rota (route resolve).

  /* evite */
  function Avengers(dataservice) {
    var vm = this;
    vm.avengers = [];
    vm.title = 'Avengers';
  
    dataservice.getAvengers().then(function(data) {
        vm.avengers = data;
        return vm.avengers;
    });
  }
  

  /* recomendado */
  function Avengers(dataservice) {
    var vm = this;
    vm.avengers = [];
    vm.title = 'Avengers';
  
    iniciar();
  
    ////////////
  
    function iniciar() {
        return dataservice.getAvengers().then(function(data) {
            vm.avengers = data;
            return vm.avengers;
        });
    }
  }
  

Route Resolve Promises

ou Resolução de promessas na rota

• Quando o controlador (controller) depende de uma promessa ser resolvida, resolva as dependências no $routeProvider antes da lógica do controlador (controller) ser executada. Se você precisa cancelar a rota condicionalmente antes do controlador (controller) ser ativado, utilize uma resolução de rota (route resolve).

  Por que? Um controlador (controller) pode precisar de dados antes de ser carregado. Esses dados podem vir de uma promessa (promise) através de uma factory personalizada ou $http. Utilizar resolução de rota (route resolve) permite as promessas (promises) serem resolvidas antes da lógica do controlador (controller) ser executada, então ele pode executar ações através dos dados dessa promessa (promise).

  /* evite */
  angular
    .module('app')
    .controller('Avengers', Avengers);
  
  function Avengers(movieService) {
    var vm = this;
    // não resolvida
    vm.movies;
    // resolvida assíncrona
    movieService.getMovies().then(function(response) {
        vm.movies = response.movies;
    });
  }
  

  /* melhor */
  
  // route-config.js
  angular
    .module('app')
    .config(config);
  
  function config($routeProvider) {
    $routeProvider
        .when('/avengers', {
            templateUrl: 'avengers.html',
            controller: 'Avengers',
            controllerAs: 'vm',
            resolve: {
                moviesPrepService: function(movieService) {
                    return movieService.getMovies();
                }
            }
        });
  }
  
  // avengers.js
  angular
    .module('app')
    .controller('Avengers', Avengers);
  
  Avengers.$inject = ['moviesPrepService'];
  function Avengers(moviesPrepService) {
      /* jshint validthis:true */
      var vm = this;
      vm.movies = moviesPrepService.movies;
  }
  

  Nota: As dependências no código de exemplos do movieService não estão seguras para minificação. Para mais detalhes de como fazer o código seguro para minificação, veja as seções injeção de dependência (dependency injection) e minificação e anotação (minification and annotation).

De volta ao topo