AngularJS, utilisant les voies sans actualise sur le bouton de retour
Je suis en utilisant angularJS
construire un simple single page application à l'aide d'AJAX, mais je suis confronté à un problème lors de l'utilisation de la maternelle bouton de retour.
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)
})
Mise à JOUR: déplacement de $http de contrôles par des commentaires et des suggestions:
Et mon services.js
fichier:
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;
}
};
}])
Et mon controller.js
fichier:
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);
});
Mon principal index.html
est configuré comme ceci:
<body ng-app="untappd">
<div ng-view></div>
</body>
Cela fonctionne très bien à partir de la navigation à partir d'un flux (/home)
, pour un check-in page (/checkin/view/:id)
mais, une fois que l'utilisateur appuie sur le natif de bouton de retour du navigateur ou de l'utilisation de window.history.back()
, le code dans le controller
est appelée de nouveau, ce qui rend l'appel AJAX pour tirer vers le bas l'ami de l'utilisateur alimentation. Dois-je utiliser ng-show
au lieu d'utiliser ng-view
pour ce cas d'utilisation, et de créer des "pages" pour chaque contenu que je veux montrer? J'ai été concerné par la performance, mais il semble que je ne peux pas obtenir les données de persister dans chaque ng-view
sans avoir à les re-appeler les modèles. Des conseils ici?
Mise à JOUR: j'ai changé cela pour intégrer les Meilleures Pratiques, en ajoutant le $http
demande à la services
niveau, au lieu de la controller
niveau. J'ai encore courir à la question de la getState demande de feu, avant de l'AJAX, de la $http
est complet, donc d'avoir un état vide, et rien à rendre la $scope
.
Mais comment cela fonctionne quand vous voulez charger la page frais? Je veux seulement de fournir un cache de résultat, si le bouton de retour est utilisé ou pressé. Est-il des événements, je peux crochet pour déterminer la façon dont la page a été navigué?
Ne peut pas vous donner le contrôle de l'utilisateur sur le présent (par exemple, bouton actualiser)? Ou de se périmer les données de votre service après un temps donné?
Vous avez besoin de nettoyer le code avant de vous soucier du problème que vous rencontrez. Les contrôleurs ne doivent pas faire $http appels, c'est le but d'un service (les services sont des singletons, les contrôleurs ne sont pas et d'aller hors de portée). Les contrôleurs doivent être utilisés UNIQUEMENT pour le réglage (par écrit) à portée. Correctement séparer les composants. Jetez un oeil à google-styleguide.googlecode.com/svn/trunk/...
Je suis nouveau avec AngularJS, donc j'ai juste fait un simple prototype et n'a pas la chair de tout. Merci pour les commentaires, et j'ai hâte d'en faire que pour un prêt de production de la version.
OriginalL'auteur gregavola | 2014-05-04
Vous devez vous connecter pour publier un commentaire.
Yep, l'Arrière et le bouton sur le bouton d'Actualisation sont une vraie douleur. Vous avez deux choix:
Vous garder les choses simple et juste permettre à votre état d'être extraites pour chaque changement d'emplacement. Cette traite un utilisateur a déclenché touche retour ou cliquez sur l'actualisation comme normale, de changement d'emplacement. Les données re-chargement peut être atténué par la mise en cache http.
Vous de maintenir votre propre état sur le client et de le restaurer en cas de besoin, éventuellement à l'aide de
SessionStorage
pour garder les choses propres.J'ai choisi la dernière option et tout cela fonctionne très bien pour moi. Voir ces auto a répondu à des questions pour obtenir des exemples de code.
OriginalL'auteur biofractal
Utiliser un service pour garder un singleton de l'état, qui expose les fonctions pour obtenir/reload/etc. Voici un exemple très simple, juste pour vous aider à démarrer:
Encore une fois, c'est très basique, et c'est tout simplement pour vous montrer comment vous pouvez utiliser un service de stocker un état persistant entre les lignes.
L'autre élément que j'ai du mal avec ici, c'est que loadFeed() est appelée, mais getState est retourné avant l'appel AJAX est terminé.
Êtes-vous à l'aide de promesses?
J'ai mis à jour mon code ci-dessus avec les services de la pièce comme vous l'avez suggéré, les guides ou les conseils sur l'ajout de promesses à cet exemple?
$http renvoie promesses pour les débutants.
loadFeed()
est appelée dès que le service est injecté quelque part. Un conteneur est utilisé pour s'assurer il n'y a aucune portée problèmes de liaison.OriginalL'auteur Matt Way
si votre paramètre 'id' dans l'itinéraire contient aucun caractère qui est décodée lors de la requête http (comme '' => '%20'), alors votre route ne sera pas de travail.
essayez d'effectuer encodeURIComponent() sur la chaîne avant de l'utiliser pour le routage.
OriginalL'auteur silver