Verzögerung der AngularJS-Routenänderung bis zum Laden des Modells, um ein Flackern zu verhindern

Ich frage mich, ob es für AngularJS eine Möglichkeit gibt (ähnlich wie bei Google Mail), die Anzeige einer neuen Route zu verzögern, bis jedes Modell und seine Daten mit den entsprechenden Diensten abgerufen wurden.

Wenn beispielsweise eine vorhanden wäre ProjectsController, in der alle Projekte aufgelistet sind und project_index.htmlin der diese Projekte Project.query()angezeigt werden, wird sie vor dem Anzeigen der neuen Seite vollständig abgerufen.

Bis dahin wird die alte Seite weiterhin angezeigt (z. B. wenn ich eine andere Seite durchsucht und dann beschlossen habe, diesen Projektindex anzuzeigen).

Die Auflösungseigenschaft $ routeProvider ermöglicht die Verzögerung der Routenänderung , bis Daten geladen werden.

Definieren Sie zunächst eine Route mit einem solchen resolveAttribut.

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 resolveEigenschaft auf der Route definiert ist.

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 ein Auflösungsobjekt enthält, das Dinge deklariert, die dem Controller-Konstruktor zur Verfügung stehen sollen. Hier phoneswird das in den Controller injiziert und in der resolveEigenschaft definiert .

Die resolve.phonesFunktion ist für die Rückgabe eines Versprechens verantwortlich. Alle Versprechen werden gesammelt und die Routenänderung wird verzögert, bis alle Versprechen gelöst sind.

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

Hier ist ein minimales Arbeitsbeispiel, das für Angular 1.0.2 funktioniert

Vorlage:

<script type="text/ng-template" id="/editor-tpl.html">
    Editor Template {{datasets}}
</script>

<div ng-view>

</div>

JavaScript:

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets : function($q, $http) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
            })
            .error(function(data){
                //actually you'd want deffered.reject(data) here
                //but to show what would happen on success..
                deferred.resolve("error value");
            });

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​
​

http://jsfiddle.net/dTJ9N/3/

Optimierte Version:

Da $ http () bereits ein Versprechen zurückgibt (auch als verzögert bezeichnet), müssen wir eigentlich kein eigenes erstellen. So können wir MyCtrl vereinfachen. beschließen zu:

MyCtrl.resolve = {
    datasets : function($http) {
        return $http({
            method: 'GET', 
            url: 'http://fiddle.jshell.net/'
        });
    }
};

Das Ergebnis von $ http () enthält Daten , Status , Header und Konfigurationsobjekte. Daher müssen wir den Hauptteil von MyCtrl in Folgendes ändern:

$scope.datasets = datasets.data;

http://jsfiddle.net/dTJ9N/5/

Ich sehe einige Leute fragen, wie dies mit der Angular.Controller-Methode mit minifizierungsfreundlicher Abhängigkeitsinjektion zu tun ist. Da ich gerade damit angefangen habe, fühlte ich mich verpflichtet, zurückzukommen und zu helfen. Hier ist meine Lösung (übernommen aus der ursprünglichen Frage und Miskos 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 von der Frage / beliebtesten Antwort abgeleitet ist, ist er nicht getestet, sollte Sie jedoch in die richtige Richtung leiten, wenn Sie bereits verstehen, wie man einen minifizierungsfreundlichen Winkelcode erstellt. Der eine Teil, den mein eigener Code nicht benötigte, war das Einfügen von "Telefon" in die Auflösungsfunktion für "Telefone", und ich habe überhaupt kein "Verzögerungs" -Objekt verwendet.

Ich empfehle auch dieses Youtube-Video http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp , das mir sehr geholfen hat

Sollte es Sie interessieren, habe ich beschlossen, auch meinen eigenen Code (geschrieben in Coffeescript) einzufügen, damit Sie sehen können, wie ich ihn zum Laufen gebracht habe.

Zu Ihrer Information, im Voraus verwende ich einen generischen Controller, der mir hilft, CRUD bei mehreren Modellen durchzuführen:

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 ....
    ]

Dieses Commit , das Teil von Version 1.1.5 und höher ist, macht das $promiseObjekt von verfügbar $resource. Versionen von ngResource, einschließlich dieses Commits, ermöglichen das Auflösen von Ressourcen wie folgt:

$ routeProvider

resolve: {
    data: function(Resource) {
        return Resource.get().$promise;
    }
}

Regler

app.controller('ResourceCtrl', ['$scope', 'data', function($scope, data) {

    $scope.data = data;

}]);

Dieser Ausschnitt ist Dependency Injection freundlich (ich es auch verwende in Kombination von ngmin und uglify ) und es ist eine elegante Domain angetrieben basierte Lösung.

Das unten stehende Beispiel Register eine Telefonressource und eine Konstante phoneRoutes , die alle Ihre Routing - Informationen für diese (Telefon) Domäne enthält. Etwas , was ich tat es nicht wie in der mitgelieferten Antwort war die Lage der Entschlossenheit Logik - das Hauptmodul soll nicht wissen nichts oder über die Art und Weise gestört werden , die Ressourcen Argumente an die Steuerung zur Verfügung gestellt werden. Auf diese Weise bleibt die Logik in derselben Domäne.

Hinweis: Wenn Sie ngmin verwenden (und wenn nicht: sollten Sie), müssen Sie die Auflösungsfunktionen nur mit der DI-Array-Konvention schreiben.

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 das Injizieren der Routing-Daten, wenn sich das Modul im Konfigurationsstatus befindet, und das Anwenden auf den $ 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: '/' });

});

Das Testen der Routenkonfiguration mit diesem Setup ist ebenfalls 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);
      });
    });
  });
});

Sie können es in meinem letzten (bevorstehenden) Experiment in voller Pracht sehen . Obwohl diese Methode für mich gut funktioniert, frage ich mich wirklich, warum der $ -Injektor die Konstruktion von nichts verzögert , wenn er die Injektion von etwas erkennt , das ein vielversprechendes Objekt ist. es würde die Dinge sooooooooooooooo viel einfacher machen.

Bearbeiten: verwendet Angular v1.2 (rc2)

Wenn Sie die Route verzögern, führt dies mit Sicherheit zu einem asynchronen Gewirr. Verfolgen Sie einfach den Ladestatus Ihrer Hauptentität und verwenden Sie diesen in der Ansicht. In Ihrem Controller können Sie beispielsweise sowohl die Erfolgs- als auch die Fehlerrückrufe für ngResource verwenden:

$scope.httpStatus = 0; // in progress
$scope.projects = $resource.query('/projects', function() {
    $scope.httpStatus = 200;
  }, function(response) {
    $scope.httpStatus = response.status;
  });

Dann könnten Sie in der Ansicht alles tun:

<div ng-show="httpStatus == 0">
    Loading
</div>
<div ng-show="httpStatus == 200">
    Real stuff
    <div ng-repeat="project in projects">
         ...
    </div>
</div>
<div ng-show="httpStatus >= 400">
    Error, not found, etc. Could distinguish 4xx not found from 
    5xx server error even.
</div>

Ich habe nach Miskos Code oben gearbeitet und das habe ich damit gemacht. Dies ist eine aktuellere Lösung, da $deferauf geändert wurde $timeout. Das Ersetzen $timeoutwartet jedoch auf die Zeitüberschreitung (in Miskos Code 1 Sekunde) und gibt dann die Daten zurück, in der Hoffnung, dass sie rechtzeitig behoben werden. Auf diese Weise wird so schnell wie möglich zurückgegeben.

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;
  }
}

Verwenden von AngularJS 1.1.5

Aktualisieren der 'Telefone'-Funktion in Justens Antwort mithilfe der AngularJS 1.1.5- Syntax.

Original:

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

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

    return deferred.promise;
}

Aktualisiert:

phones: function(Phone) {
    return Phone.query().$promise;
}

Viel kürzer dank des Angular-Teams und der Mitwirkenden. :) :)

Dies ist auch die Antwort von Maximilian Hoffmann. Anscheinend hat dieses Commit es in 1.1.5 geschafft.

Sie können die Eigenschaft $ routeProvider auflösen verwenden, um die Routenänderung zu verzögern, bis Daten geladen werden.

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 resolveEigenschaft auf der Route definiert ist.

EntitiesCtrlResolveund EntityCtrlResolvesind konstante Objekte, die in derselben Datei wie EntitiesCtrlund EntityCtrlController definiert sind.

// 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..
});

Ich mag die Idee von darkporter, weil es für ein Entwicklerteam, das neu bei AngularJS ist, leicht sein wird, sie sofort zu verstehen und zu arbeiten.

Ich habe diese Anpassung erstellt, die 2 Divs verwendet, einen für die Laderleiste und einen für den tatsächlichen Inhalt, der nach dem Laden der Daten angezeigt wird. Die Fehlerbehandlung würde an anderer Stelle erfolgen.

Fügen Sie $ scope ein 'ready'-Flag hinzu:

$http({method: 'GET', url: '...'}).
    success(function(data, status, headers, config) {
        $scope.dataForView = data;      
        $scope.ready = true;  // <-- set true after loaded
    })
});

In der HTML-Ansicht:

<div ng-show="!ready">

    <!-- Show loading graphic, e.g. Twitter Boostrap progress bar -->
    <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;"></div>
    </div>

</div>

<div ng-show="ready">

    <!-- Real content goes here and will appear after loading -->

</div>

Siehe auch: Boostrap-Fortschrittsbalken-Dokumente

Ich mochte die obigen Antworten und habe viel von ihnen gelernt, aber in den meisten der obigen Antworten fehlt etwas.

Ich steckte in einem ähnlichen Szenario fest, in dem ich die URL mit einigen Daten auflöste, die in der ersten Anforderung vom Server abgerufen wurden. Das Problem, mit dem ich konfrontiert war, war, was ist, wenn das Versprechen ist rejected.

Ich war mit einem benutzerdefinierten Anbieter , die ein benutzten zurückzukehren , Promisedie durch die aufgelöste wurden resolvevon $routeProviderzum Zeitpunkt der Konfigurationsphase.

Was ich hier hervorheben möchte, ist das Konzept, dass whenes so etwas tut.

Es sieht die URL in der URL-Leiste und dann den entsprechenden whenBlock im aufgerufenen Controller und die Ansicht wird bisher so gut verwiesen.

Nehmen wir an, ich habe folgenden Konfigurationsphasencode.

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

Bei der Root-URL im Browser wird der erste Block des Laufs aufgerufen, andernfalls otherwisewird er aufgerufen.

Stellen wir uns ein Szenario vor, in dem ich rootUrl in der Adressleistenfunktion drücke AuthServicePrivider.auth().

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

Es wird überhaupt nichts gerendert.

Otherwise Der Block wird nicht ausgeführt, wie dies für eine URL der Fall ist, die nicht im Konfigurationsblock definiert ist und der Konfigurationsphase von angleJs unbekannt ist.

Wir müssen das Ereignis behandeln, das ausgelöst wird, wenn dieses Versprechen nicht gelöst wird. Bei einem Fehler $routeChangeErorrwird ausgelöst $rootScope.

Es kann wie im folgenden Code gezeigt erfasst werden.

$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 Es ist im Allgemeinen eine gute Idee, den Ereignisverfolgungscode in den Ausführungsblock der Anwendung einzufügen. Dieser Code wird unmittelbar nach der Konfigurationsphase der Anwendung ausgeführt.

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);
   });
}]);

Auf diese Weise können wir Versprechensfehler zum Zeitpunkt der Konfigurationsphase behandeln.

Ich hatte eine komplexe mehrstufige Gleitfeldoberfläche mit deaktivierter Bildschirmebene. Erstellen einer Direktive zum Deaktivieren der Bildschirmebene, die ein Klickereignis zum Ausführen des Status "Gefällt mir" erstellt

$state.go('account.stream.social.view');

erzeugten einen Flicking-Effekt. history.back () stattdessen hat es gut funktioniert, aber in meinem Fall ist es nicht immer wieder in der Geschichte. Was ich also herausfinde, ist, dass, wenn ich einfach ein Attribut href auf meinem Deaktivierungsbildschirm anstelle von state.go erstelle, es wie ein Zauber funktioniert hat.

<a class="disable-screen" back></a>

Richtlinie "zurück"

app.directive('back', [ '$rootScope', function($rootScope) {

    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            element.attr('href', $rootScope.previousState.replace(/\./gi, '/'));
        }
    };

} ]);

app.js Ich speichere nur den vorherigen Status

app.run(function($rootScope, $state) {      

    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {         

        $rootScope.previousState = fromState.name;
        $rootScope.currentState = toState.name;


    });
});

Eine mögliche Lösung könnte darin bestehen, die ng-cloak-Direktive mit dem Element zu verwenden, in dem wir die Modelle verwenden, z

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

Ich denke, das kostet am wenigsten Mühe.