Comment rafraîchir modèle de données à partir du serveur par programmation?

Fond

J'ai le plus de base "newbie" AngularJS question, pardonnez mon ignorance: comment puis-je actualiser le modèle via le code? Je suis sûr que c'est répondu plusieurs fois quelque part, mais je ne pouvais simplement pas
la trouver.
J'ai regardé quelques vidéos ici http://egghead.io et est allé rapidement sur le tutoriel, mais je sens que je suis absent quelque chose de très basique.

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

...
<div>
    <ul ng-controller="PersonListCtrl">
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
</div>
...

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

Les questions

  1. Disons que je veux mettre en œuvre un bouton actualiser, comment puis-je dire le modèle pour recharger par programmation?
  2. Comment puis-je accéder au modèle? il semble Angulaire est la magie de créer une instance de mon contrôleur, mais comment puis-je obtenir mes mains sur elle?
  3. MODIFIER ajouté une troisième question, même en tant que #1 mais comment peut-il être effectuée uniquement par du JavaScript?

Je suis sûr que je suis absent quelque chose de base, mais après avoir passé une heure à essayer de comprendre, je pense que ce doit être une question. S'il vous plaît laissez-moi savoir si c'est en double et je vais fermer + lien vers elle.

InformationsquelleAutor Eran Medan | 2013-02-04
  1. 72

    Vous êtes à mi-chemin sur votre propre. Pour mettre en œuvre un rafraîchissement, vous devriez juste envelopper ce que vous avez déjà en fonction sur le champ d'application:

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

  //initial load
  $scope.loadData();
}

    ensuite dans votre balisage

    <div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="loadData()">Refresh</button>
</div>

    Autant que "l'accès à votre modèle", tout ce que vous devez faire c'est l'accès que $champ d'application.les personnes de tableau dans votre contrôleur:

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

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

    Ensuite, vous pouvez l'utiliser à votre avis, ou ce que vous voulez le faire.

    • Merci, c'est exactement ce que je cherchais, est-il un moyen d'y accéder loadData() la fonction de javascript au lieu de le faire par ng-click directive?
    • Vous ne voulez pas le faire.... Vous pourriez... mais vous ne voulez probablement pas à. Ce n'est pas l'angle moyen.
    • hm... je pense a été ce qui ont une "ajouter" méthode qui ajoute une personne, et puis quand c'est fait, l'ajout, je voudrais actualiser le modèle à partir du serveur, donc je comprends que l'angle moyen est de mettre à jour le modèle en ajoutant une personne, puis l'enregistrer sur le serveur, et d'éviter le "reload pour le vérifier?", p.s. quand vous dites "vous pouvez", alors, comment exactement? 🙂
    • Est-il via angulaire.élément(domElement).portée()'?
    • Je me sens sale vous dis cela... parce que vous avez vraiment, vraiment ne devrait pas... mais vous pouvez obtenir le portée à partir d'un élément du DOM. angular.element(domElem).scope() ... mais ne pas le faire. lol
    • L'angle moyen de le faire serait de n'utiliser que loadData() fonction que j'ai faite pour recharger les données à partir du serveur. et peut-être que addPerson() méthode que j'ai créé une sauvegarde via AJAX et sur le succès qu'il appelle loadData()
    • il a obtenu, j'ai besoin de commencer à penser à la manette alors que la Logique Métier principal endroit, je suppose, merci pour toute l'aide!
    • En référence à l'utilisation d'un élément du DOM pour obtenir une portée, pourquoi devrait-on ne pas le faire et comment devrait-il être fait à la place? Je suis en train d'écrire un jeu à l'aide de WebGL Three.js. J'ai une INTERFACE utilisateur qui est superposé sur ma toile, j'ai donc commencé à chercher dans Angulaire de façon asynchrone d'actualisation que l'INTERFACE utilisateur lorsque le jeu des changements d'état. J'ai un contrôleur et vue, mis en place beaucoup comme Eran Medan. Comment dois-je continuer à mettre à jour le $scope après l'initialisation?
    • Eh bien, vous peut faire de cette façon, bien sûr, mais elle va se casser le modèle MVC Angulaire, et il va aussi faire de votre JavaScript beaucoup plus difficile à tester. L'un des plus grands avantages de l'Angulaire et le "angulaire moyen", c'est que si vous faites les choses correctement votre code est faiblement couplés et facile à tester.
    • Mais la Question subsiste: ce qui, si j'ai une fonction aperçu d'un contrôleur (comme loadData()), que j'ai besoin pour exécuter encore et encore afin d'actualiser les données. Par exemple, si la demande lui-même modifié les données... Alors, comment est la "bonne" angulaire/MVC façon?

    InformationsquelleAutor Ben Lesh
  2. 2

    Avant que je vous montre comment rafraîchir modèle de données à partir du serveur par programmation? Je dois expliquer pour vous le concept de Liaison de Données. C'est un concept extrêmement puissant qui va vraiment révolutionner la façon dont vous développez. Donc peut-être que vous avez à lire à propos de ce concept à partir de ce lien ou cette seconde lien pour unterstand comment AngularjS travail.

    maintenant, je vais vous montrer un exemple d'échantillon qui explique pourquoi, comment pouvez-vous mettre à jour votre modèle de serveur.

    Code HTML:

    <div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="updateData()">Refresh Data</button>
</div>

    Donc, notre contrôleur nommé: PersonListCtrl et notre Modèle nommé: personnes. accédez à votre Contrôleur de js dans le but de développer la fonction nommée: updateData() qui sera invoquée lorsque nous sommes nécessité de mettre à jour et d'actualisation de notre Modèle personnes.

    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 pour vous expliquer comment ça marche:
    lorsque l'utilisateur clic sur le bouton Actualiser les Données, le serveur d'appels à la fonction updateData() et à l'intérieur de cette fonction, nous allons appeler notre service web par la fonction $http.get() et quand nous avons le résultat de notre ws nous sera l'impact de notre modèle (Ligne X).Les dés qui affecte les résultats de notre modèle, notre point de Vue de cette liste sera modifiée avec de nouvelles Données.

    • Suis-je en droit de dire que ce serait la même chose que de faire une requête Ajax obtenir par le biais de JQuery?
    InformationsquelleAutor BERGUIGA Mohamed Amine