Comment recharger / rafraîchir les données de modèle du serveur par programmation?

Contexte

J’ai la question la plus élémentaire “novice” AngularJS, pardonnez mon ignorance: comment puis-je actualiser le modèle via le code? Je suis sûr que cela répond à plusieurs fois quelque part, mais je ne pouvais tout simplement pas le trouver. J’ai regardé de superbes vidéos ici http://egghead.io et je suis passé rapidement à travers le tutoriel, mais je sens que je manque quelque chose de très simple.

J’ai trouvé un exemple pertinent ici ( $route.reload() ) mais je ne suis pas sûr de comprendre comment l’utiliser dans l’exemple ci-dessous

Voici la configuration

controllers.js

 function PersonListCtrl($scope, $http) { $http.get('/persons').success(function(data) { $scope.persons = data; }); } 

index.html

 ... 
  • Name: {{person.name}}, Age {{person.age}}
...

Tout cela fonctionne étonnamment bien, chaque fois que la page est rechargée, je vois la liste des personnes comme prévu

Questions

  1. Disons que je veux implémenter un bouton de rafraîchissement, comment puis-je demander au modèle de recharger par programmation?
  2. Comment puis-je accéder au modèle? il semble qu’Angular instancie comme par magie une instance de mon contrôleur, mais comment puis-je mettre la main dessus?
  3. EDIT a ajouté une troisième question, identique à # 1, mais comment peut-on le faire uniquement via JavaScript?

Je suis sûr que je manque quelque chose de fondamental, mais après avoir passé une heure à essayer de le comprendre, je pense qu’il mérite une question. S’il vous plaît laissez-moi savoir si elle est en double et je vais fermer + lien vers elle.

Vous êtes à mi-chemin par vous-même. Pour implémenter une actualisation, vous devez simplement envelopper ce que vous avez déjà dans une fonction sur la scope:

 function PersonListCtrl($scope, $http) { $scope.loadData = function () { $http.get('/persons').success(function(data) { $scope.persons = data; }); }; //initial load $scope.loadData(); } 

puis dans votre balisage

 
  • Name: {{person.name}}, Age {{person.age}}

En ce qui concerne “l’access à votre modèle”, il vous suffit d’accéder au tableau $ scope.persons de votre contrôleur:

par exemple (juste le code puedo) dans votre contrôleur:

 $scope.addPerson = function() { $scope.persons.push({ name: 'Test Monkey' }); }; 

Ensuite, vous pouvez utiliser cela à votre avis ou ce que vous voulez faire.

Avant de vous montrer comment recharger / actualiser les données de modèle du serveur par programmation? Je dois vous expliquer le concept de liaison de données . C’est un concept extrêmement puissant qui va véritablement révolutionner votre développement. Il se peut donc que vous deviez lire ce concept à partir de ce lien ou de ce second lien afin de comprendre comment AngularjS fonctionne.

maintenant je vais vous montrer un exemple d’exemple qui explique comment vous pouvez mettre à jour votre modèle à partir du serveur.

Code HTML:

 
  • Name: {{person.name}}, Age {{person.age}}

Donc, notre contrôleur nommé: PersonListCtrl et notre modèle nommé: personnes . Accédez à votre contrôleur js afin de développer la fonction nommée: updateData() qui sera appelée lorsque nous aurons besoin de mettre à jour et de rafraîchir nos personnes modèles.

Code Javascript:

 app.controller('adsController', function($log,$scope,...){ ..... $scope.updateData = function(){ $http.get('/persons').success(function(data) { $scope.persons = data;// Update Model-- Line X }); } }); 

Maintenant, je vous explique comment cela fonctionne: lorsque l’utilisateur clique sur le bouton Actualiser les données , le serveur appelle la fonction updateData () et à l’intérieur de cette fonction, nous appelons notre service Web par la fonction $http.get() et résultat de nos ws nous l’affecterons à notre modèle (Line X). Chaque fois que cela affecte les résultats de notre modèle, notre vue de cette liste sera modifiée avec les nouvelles données.