Qual é o ciclo de vida de um controlador AngularJS?

Alguém pode esclarecer o que é o ciclo de vida de um controlador AngularJS?

  • Um controlador é um singleton ou criado / destruído sob demanda?
  • Se este último, o que desencadeia a criação / destruição do controlador?

Considere o exemplo abaixo:

var demoApp = angular.module('demo') .config(function($routeProvider, $locationProvider) { $routeProvider .when('/home', {templateUrl: '/home.html', controller: 'HomeCtrl'}) .when('/users',{templateUrl: '/users.html', controller: 'UsersCtrl'}) .when('/users/:userId', {templateUrl: '/userEditor.html', controller: 'UserEditorCtrl'}); }); demoApp.controller('UserEditorCtrl', function($scope, $routeParams, UserResource) { $scope.user = UserResource.get({id: $routeParams.userId}); }); 

por exemplo:

No exemplo acima, quando eu navego para /users/1 , o usuário 1 é carregado e definido para o $scope .

Então, quando eu navego para /users/2 , o usuário 2 é carregado. A mesma instância de UserEditorCtrl reutilizada ou é uma nova instância criada?

  • Se é uma nova instância, o que desencadeia a destruição da primeira instância?
  • Se for reutilizado, como isso funciona? (ou seja, o método para carregar os dados parece ser executado na criação do controlador)

Bem, na verdade a questão é qual é o ciclo de vida de um controlador ngView .

Controladores não são singletons. Qualquer um pode criar um novo controlador e eles nunca são destruídos automaticamente. O fato é que geralmente está vinculado ao ciclo de vida de seu escopo subjacente. O controlador não é destruído automaticamente sempre que seu escopo é destruído. No entanto, depois de destruir um escopo subjacente, seu controlador é inútil (pelo menos, por design, deveria ser).

Respondendo a sua pergunta específica, uma diretiva ngView (assim como a diretiva ngController ) sempre criará um novo controlador e um novo escopo toda vez que ocorrer uma navegação. E o último escopo também será destruído .

Os “events” do ciclo de vida são bem simples. Seu “evento de criação” é a construção do seu próprio controlador. Apenas execute seu código. Para saber quando fica inútil ( “evento de destruição” ), escute o evento $destroy escopo:

 $scope.$on('$destroy', function iVeBeenDismissed() { // say goodbye to your controller here // release resources, cancel request... }) 

Para ngView especificamente, você é capaz de saber quando o conteúdo é carregado através do evento de escopo $viewContentLoaded :

 $scope.$on('$viewContentLoaded', function readyToTrick() { // say hello to your new content here // BUT NEVER TOUCHES THE DOM FROM A CONTROLLER }); 

Aqui está um Plunker com uma prova de conceito (abra sua janela de console).