AngularJS, Routen ohne Aktualisierung über die Schaltfläche "Zurück" verwenden

Question

May 04, 2014, 05:19 PM

AngularJS, Routen ohne Aktualisierung über die Schaltfläche "Zurück" verwenden

Ich benutzeangularJS mit AJAX eine einfache Einzelseitenanwendung zu erstellen, aber ich stoße auf ein Problem, wenn Benutzer die native Zurück-Schaltfläche verwenden.

angular.module('myApp', ['ionic', 'myApp.controllers', myApp.services])

.config(function ($routeProvider, $locationProvider) {

    $routeProvider.when('/home', {
       templateUrl: 'templates/feed.html',
       controller: 'MenuCtrl',
       reloadOnSearch: false
   });

   $routeProvider.when('/checkin/view/:id', {
       templateUrl: 'templates/checkin.html',
       controller: 'MenuCtrl'
    });

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


     $locationProvider.html5Mode(true)

})

UPDATE: $ http wurde per Feedback aus den Kontrollen entfernt, und Vorschläge:

Und meinservices.js Datei:

angular.module('myApp.services', [])

 .factory('FeedService', ['$http', function($http){
   var state = {};

  var loadFeed = function(){
       $http({
           method: 'GET',
           url: 'http://api.example',
         }).success(function(data){
        // With the data succesfully returned, call our callback
           state = data.response;
           console.log(data);
        }).error(function(){
           alert("error");
       });
   };

   loadFeed();

   return {
       getState: function(scope){
           return state;
       }
    };
}])

Und meincontroller.js Datei:

angular.module('myApp.controllers', [])

.controller('MenuCtrl', function($scope, $http, $location, FeedService) { 
    // feedback per second answer
    $scope.items  = FeedService.getState();

})

.controller('CheckinCtrl', function($scope, $routeParams) {
    $scope.checkin_id = $routeParams.id;
    console.log($routeParams.id);
});

Mein Hauptindex.html ist so aufgebaut:

 <body ng-app="untappd">
   <div ng-view></div>
 </body>

Dies funktioniert hervorragend, wenn Sie über einen Feed navigieren(/home)zu einer Eincheckseite(/checkin/view/:id) aber sobald der Benutzer die native Zurück-Taste im Browser drückt oder verwendetwindow.history.back()Code in dercontroller wird erneut aufgerufen, wodurch der AJAX-Aufruf ausgeführt wird, um den Friend-Feed des Benutzers abzurufen. Soll ich verwendenng-show anstatt zu verwendenng-view für diesen Anwendungsfall und erstellen Sie individuelle "Seiten" für jeden Inhalt, den ich anzeigen möchte? Ich war mit der Leistung beschäftigt, aber es scheint, dass ich nicht in jedem Daten erhalten kann, um zu bestehenng-view ohne dass die Vorlagen erneut aufgerufen werden müssen. Irgendeine Anleitung hier?

UPDATE: Ich habe dies geändert, um die Best Practices aufzunehmen, indem ich die$http Anfrage bei derservices Ebene, anstelle dercontroller Niveau. Ich habe immer noch das Problem, dass die getState-Anfrage ausgelöst wird, bevor die AJAX der$http ist vollständig, hat also einen leeren Zustand und nichts, um das zu rendern$scope.