Das Verzögern der AngularJS-Route ändert sich, bis das Modell geladen ist, um ein Flimmern zu verhindern

$routeProvider beheben Eigenschaft ermöglicht die Verzögerung der route ändern, bis die Daten geladen sind.

Definieren Sie zuerst eine route mit resolve - Attribut wie dieses.

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: PhoneListCtrl.resolve}).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

beachten Sie, dass die resolve Eigenschaft definiert ist, auf der Strecke.

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    //see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4
    var deferred = $q.defer();
    Phone.query(function(successData) {
            deferred.resolve(successData); 
    }, function(errorData) {
            deferred.reject(); //you could optionally pass error data here
    });
    return deferred.promise;
  },
  delay: function($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
}

Beachten Sie, dass die controller-definition enthält eine Behebung Objekt, welches erklärt Dinge, die sollte vorhanden sein, um dem controller-Konstruktor. Hier die phones eingespritzt wird, in der Steuerung und es wird definiert, in die resolve Eigenschaft.

Den resolve.phones Funktion ist verantwortlich für die Rückkehr ein Versprechen. All die Versprechen, die erhoben werden, und die route ändern wird verzögert, bis nach all den Versprechungen aufgelöst werden.

Arbeiten demo: http://mhevery.github.com/angular-phonecat/app/#/phones
Quelle: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

InformationsquelleAutor der Antwort Misko Hevery

Sehe ich einige Leute gefragt, wie es mit dem Winkel.controller-Methode mit Verkleinerung freundlich dependency injection. Da ich gerade diese arbeiten, fühlte ich mich verpflichtet, wieder zu kommen und zu helfen. Hier ist meine Lösung (übernommen aus der ursprünglichen Frage und Misko ' s Antwort):

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: { 
            phones: ["Phone", "$q", function(Phone, $q) {
                var deferred = $q.defer();
                Phone.query(function(successData) {
                  deferred.resolve(successData); 
                }, function(errorData) {
                  deferred.reject(); //you could optionally pass error data here
                });
                return deferred.promise;
             ]
            },
            delay: ["$q","$defer", function($q, $defer) {
               var delay = $q.defer();
               $defer(delay.resolve, 1000);
               return delay.promise;
              }
            ]
        },

        }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

angular.controller("PhoneListCtrl", [ "$scope", "phones", ($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}]);

Da dieser code leitet sich aus der Frage/beliebteste Antwort es ist ungetestet, aber es sollte schicken Sie in die richtige Richtung, wenn Sie bereits wissen, wie zu machen minifizierung freundlich eckig-code. Der eine Teil, dass meinen eigenen code nicht benötigt wurde eine Injektion von "Phone" in der resolve-Funktion für 'Telefone', noch habe ich ein 'delay' - Objekt überhaupt.

Ich auch empfehlen, das youtube-video http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp , was mir half, einiges

Sollte es Sie interessieren, habe ich beschlossen, das auch einfügen, meinem eigenen code (Geschrieben in coffeescript), so dass Sie sehen können, wie ich es geschafft habe.

FYI, im Voraus ich benutze einen generischen controller, der hilft mir CRUD auf mehrere Modelle:

appModule.config ['$routeProvider', ($routeProvider) ->
  genericControllers = ["boards","teachers","classrooms","students"]
  for controllerName in genericControllers
    $routeProvider
      .when "/#{controllerName}/",
        action: 'confirmLogin'
        controller: 'GenericController'
        controllerName: controllerName
        templateUrl: "/static/templates/#{controllerName}.html"
        resolve:
          items : ["$q", "$route", "$http", ($q, $route, $http) ->
             deferred = $q.defer()
             controllerName = $route.current.controllerName
             $http(
               method: "GET"
               url: "/api/#{controllerName}/"
             )
             .success (response) ->
               deferred.resolve(response.payload)
             .error (response) ->
               deferred.reject(response.message)

             return deferred.promise
          ]

  $routeProvider
    .otherwise
      redirectTo: '/'
      action: 'checkStatus'
]

appModule.controller "GenericController", ["$scope", "$route", "$http", "$cookies", "items", ($scope, $route, $http, $cookies, items) ->

  $scope.items = items
      #etc ....
    ]

InformationsquelleAutor der Antwort bitwit

Diesem snippet ist dependency injection freundlich (ich selbst nutze es in Kombination ngmin und verunstalten) und es ist eine mehr elegante domain-driven - basierte Lösung.

Beispiel unten wird ein Telefon Ressource und ein Konstante phoneRoutes, die enthält alle Ihre routing-Informationen für die (Telefon -) Domäne. Etwas, das ich nicht wie in der mitgelieferten Antwort war die Lage des beheben Logik -- die main Modul sollte nicht wissen alles oder belästigt werden, über die Art der Ressource, die Argumente an den controller. Auf diese Weise die Logik bleibt in der gleichen Domäne.

Hinweis: wenn Sie ngmin (und wenn Sie nicht: Sie sollten) Sie nur schreiben müssen das auflösen von Funktionen mit DI-array-Konvention.

angular.module('myApp').factory('Phone',function ($resource) {
  return $resource('/api/phone/:id', {id: '@id'});
}).constant('phoneRoutes', {
    '/phone': {
      templateUrl: 'app/phone/index.tmpl.html',
      controller: 'PhoneIndexController'
    },
    '/phone/create': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        phone: ['$route', 'Phone', function ($route, Phone) {
          return new Phone();
        }]
      }
    },
    '/phone/edit/:id': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        form: ['$route', 'Phone', function ($route, Phone) {
          return Phone.get({ id: $route.current.params.id }).$promise;
        }]
      }
    }
  });

Das nächste Stück ist die Injektion der routing-Daten, wenn das Modul in der Konfiguration Stand und Ihre Anwendung auf die $routeProvider.

angular.module('myApp').config(function ($routeProvider, 
                                         phoneRoutes, 
                                         /* ... otherRoutes ... */) {

  $routeProvider.when('/', { templateUrl: 'app/main/index.tmpl.html' });

  //Loop through all paths provided by the injected route data.

  angular.forEach(phoneRoutes, function(routeData, path) {
    $routeProvider.when(path, routeData);
  });

  $routeProvider.otherwise({ redirectTo: '/' });

});

Testen der route-Konfiguration mit diesem setup ist auch Recht einfach:

describe('phoneRoutes', function() {

  it('should match route configuration', function() {

    module('myApp');

    //Mock the Phone resource
    function PhoneMock() {}
    PhoneMock.get = function() { return {}; };

    module(function($provide) {
      $provide.value('Phone', FormMock);
    });

    inject(function($route, $location, $rootScope, phoneRoutes) {
      angular.forEach(phoneRoutes, function (routeData, path) {

        $location.path(path);
        $rootScope.$digest();

        expect($route.current.templateUrl).toBe(routeData.templateUrl);
        expect($route.current.controller).toBe(routeData.controller);
      });
    });
  });
});

Können Sie es in vollem Ruhm in meine aktuelle (kommende) experiment.
Obwohl diese Methode funktioniert gut für mich, ich Frage mich wirklich, warum die $Injektor ist nicht verzögern Bau von alles, wenn es erkennt Injektion von alles das ist ein Versprechen Objekt; es würde die Dinge soooOOOOOooOOOOO viel einfacher.

Edit: verwendet Eckige v1.2(rc2)

InformationsquelleAutor der Antwort null

Arbeitete ich von Misko ' s code von oben und das ist, was ich getan habe. Dies ist eine aktuelle Lösung, da $defer wurde geändert, um $timeout. Ersetzen $timeout jedoch warten, für den timeout-Zeitraum (in Misko ' s code, 1 Sekunde), dann wieder die Daten in der Hoffnung es in der Zeit gelöst. Mit dieser Art, es gibt so bald wie möglich.

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {

  phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
  }
}

InformationsquelleAutor der Antwort Justen

Können Sie $routeProvider beheben Eigentum zu verzögern, route ändern, bis die Daten geladen sind.

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider, EntitiesCtrlResolve, EntityCtrlResolve) {
    $routeProvider.
      when('/entities', {
        templateUrl: 'entities.html', 
        controller: 'EntitiesCtrl', 
        resolve: EntitiesCtrlResolve
      }).
      when('/entity/:entityId', {
        templateUrl: 'entity.html', 
        controller: 'EntityCtrl', 
        resolve: EntityCtrlResolve
      }).
      otherwise({redirectTo: '/entities'});
}]);

Beachten Sie, dass die resolve Eigenschaft definiert ist, auf der Strecke.

EntitiesCtrlResolve und EntityCtrlResolve ist Konstante definierten Objekte in der gleichen Datei wie EntitiesCtrl und EntityCtrl Controller.

//EntitiesCtrl.js

angular.module('app').constant('EntitiesCtrlResolve', {
  Entities: function(EntitiesService) {
    return EntitiesService.getAll();
  }
});

angular.module('app').controller('EntitiesCtrl', function(Entities) {
  $scope.entities = Entities;

  //some code..
});

//EntityCtrl.js

angular.module('app').constant('EntityCtrlResolve', {
  Entity: function($route, EntitiesService) {
    return EntitiesService.getById($route.current.params.projectId);
  }
});

angular.module('app').controller('EntityCtrl', function(Entity) {
  $scope.entity = Entity;

  //some code..
});

InformationsquelleAutor der Antwort Bohdan Lyzanets

Mochte ich über Antworten und lernte viel von Ihnen, aber es ist etwas, das fehlt in den meisten der oben genannten Antworten.

Ich steckte in einer ähnlichen Szenario, in dem ich war resolving-url mit einigen Daten, die abgerufen wird, in die erste Anforderung von dem server. Problem, das ich konfrontiert war, was ist, wenn das Versprechen ist rejected.

War ich mit einem custom-Anbieter, die zurück Promise wurde gelöst, indem die resolve von $routeProvider zum Zeitpunkt der config-phase.

Was ich hier betonen möchte ist das Konzept der when es nicht so etwas wie dieses.

Sieht es die url in der url-Leiste und dann die jeweiligen when block genannt, controller und view bezeichnet wird, so weit so gut.

Können sagen, ich habe folgende config-phase-code.

App.when('/', {
   templateUrl: '/assets/campaigns/index.html',
   controller: 'CampaignListCtr',
   resolve : {
      Auth : function(){
         return AuthServiceProvider.auth('campaign');
      }
   }
})
//Default route
.otherwise({
   redirectTo: '/segments'
});

Root-url im browser ersten block ausführen aufgerufen werden, sonst otherwise aufgerufen wird.

Let ' s stellen Sie sich ein Szenario, das ich hit rootUrl in der Adresszeile AuthServicePrivider.auth() Funktion aufgerufen wird.

Sagen wir Versprechen zurückgegeben wird, in ablehnen Zustand was dann???

Nichts gerendert wird überhaupt.

Otherwise - block wird nicht ausgeführt, da es für jede url, die nicht definiert in der config-block und unbekannt ist angularJs config-phase.

Müssen wir behandeln den Fall, dass gefeuert wird, wenn dieses Versprechen nicht aufgelöst. Bei Ausfall $routeChangeErorr gefeuert wird auf $rootScope.

Es kann erfasst werden, wie gezeigt, im code unten.

$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
    //Use params in redirection logic.
    //event is the routeChangeEvent
    //current is the current url
    //previous is the previous url
    $location.path($rootScope.rootPath);
});

IMO ist Es generell eine gute Idee, um Ereignis-tracking-code in der run-block-Anwendung. Dieser code ausgeführt, kurz nach der config-phase der Anwendung.

App.run(['$routeParams', '$rootScope', '$location', function($routeParams, $rootScope, $location){
   $rootScope.rootPath = "my custom path";
   //Event to listen to all the routeChangeErrors raised
   //by the resolve in config part of application
   $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
       //I am redirecting to rootPath I have set above.
       $location.path($rootScope.rootPath);
   });
}]);

Diese Weise bewältigen wir Versprechen scheitern bei der config-phase.

InformationsquelleAutor der Antwort Ashish Singh

Eine mögliche Lösung könnte die Verwendung der ng-cloak-Richtlinie mit dem element, wo wir mithilfe der Modelle z.B.

<div ng-cloak="">
  Value in  myModel is: {{myModel}}
</div>

Ich denke, das braucht am wenigsten Aufwand.

InformationsquelleAutor der Antwort Devendra Singh