Peut AngularJS mise à jour automatique d'un point de vue si persistante du modèle (serveur de base de données) est modifié par une application externe?

Je viens juste de commencer à se familiariser avec AngularJS, mais je voudrais construire une application web qui a une vue qui devient auto-mise à jour en temps réel (sans actualisation) de l'utilisateur lorsque quelque chose change dans le côté serveur de base de données.

Peut AngularJS gérer cela (pour la plupart) automatiquement pour moi? Et si oui, quel est le mécanisme de base au travail?

Par exemple, ne vous en quelque sorte le programme d'installation AngularJS pour interroger la DB régulièrement pour "modèle" des changements? Ou utiliser une sorte de Comète-comme mécanisme pour informer AngularJS code côté client que le modèle a changé?

Dans ma demande, le défi est que les autres (non web) côté serveur, le logiciel de mise à jour de la base de données à la fois. Mais cette question s'applique également à la pure web-apps où vous avez plusieurs clients à la modification de la base de données via le web AngularJS clients, et ils doivent tous être mis à jour lorsque l'un d'eux fait un changement à la base de données (modèle).

  • Je tiens à ajouter que j'ai découvert depuis que Meteor fait tout cela pour vous dans le cadre, de sorte que c'est ma solution préférée pour l'instant. Peut-découvrez Angulaire de nouveau dans l'avenir.
  • Meteor peut-être encore trop "frais" - c'est bon à jouer, mais n'a pas révélé lui-même dans la grosse production (en toute sécurité/évolutivité/performance/etc). L'authentification a ajouté un peu plus de la il y a un mois. Semble bon, mais va attendre.
  • Salut. Je suis à peu près exactement où vous étiez lorsque vous avez posé cette question. Qu'avez-vous de faire? (Je voudrais utiliser Angulaire). Ce Qui Concerne La Marque
  • Vérifier Faire Angular.js en temps réel avec les Websockets (avec Poussoir) créer un sondages en temps réel de l'application avec Node.js, Express, AngularJS, et MongoDB.
InformationsquelleAutor jpeskin | 2012-06-30
  1. 96

    Vous avez un peu de choix...

    1. Que vous pourriez faire d'interrogation de toutes les X millisecondes à l'aide de $timeout et $http, ou si les données que vous utilisez est connecté à un service REST, vous pouvez utiliser $resource au lieu de $http.

    2. Vous pouvez créer un service qui utilise une Websocket la mise en œuvre et utilise scope.$apply pour gérer les changements qui sont poussés par la socket.
      Voici un exemple d'utilisation de socket.io, un node.js websocket bibliothèque:

      myApp.factory('Socket', function($rootScope) {
    var socket = io.connect('http://localhost:3000');

    //Override socket.on to $apply the changes to angular
    return {
        on: function(eventName, fn) {
            socket.on(eventName, function(data) {
                $rootScope.$apply(function() {
                    fn(data);
                });
            });
        },
        emit: socket.emit
    };
})

function MyCtrl($scope, Socket) {
    Socket.on('content:changed', function(data) {
        $scope.data = data;
    });
    $scope.submitContent = function() {
        socket.emit('content:changed', $scope.data);
    };
}

    3. Vous pourriez vraiment faire de la haute technologie et de créer une implémentation de websocket qui synchronise Angulaire du modèle avec le serveur. Lorsque le client change quelque chose, que le changement est automatiquement envoyé au serveur. Ou si le serveur change, il est envoyé au client.

      Voici un exemple de cela dans une ancienne version de Anguleuses, de nouveau à l'aide d'une douille.io: https://github.com/mhevery/angular-node-socketio

    MODIFIER: Pour le #3, j'ai été en utilisant Firebase pour ce faire.

    • Merci pour une telle réponse, avec plusieurs options possibles! Hâte de faire sens de ce que j'ai en savoir plus sur Angulaire 🙂
    • github.com/mhevery/angnular-node-socketio lien ne fonctionne plus.
    • github.com/mhevery/angular-node-socketio - avait un speling erreur. il fixe
    • Merci pour un simple à comprendre, répondre, très utile.
    • Comment vous y prendriez-vous sur la déliaison les gestionnaires d'événements si le contrôleur doit être détruit?
    • Brian ford a une approche qui permet de se greffer sur l' $champ d'application du système d'événements & nettoyage. Et il est vraiment propre en général. github.com/btford/angular-socket-io. Regardez socket.forward()
    • ce serait génial de voir un exemple de la première réponse, id pour vérifier si toutes les données ont changé, avant même de remplir la demande. Est-ce possible?

    InformationsquelleAutor Andrew Joslin
  2. 15

    Voici une application qui utilise la jetée au lieu de nœud. Le angularjs partie est basée sur l'angle de graines app. Je ne sais pas si l'angle de code est idiomatiques...mais j'ai testé que cela fonctionne. HTH -Todd.

    TimerWebSocketServlet voir

    https://gist.github.com/3047812

    controllers.js

    //-------------------------------------------------------------
//TimerCtrl
//-------------------------------------------------------------
function TimerCtrl($scope, CurrentTime) {
    $scope.CurrentTime = CurrentTime;
    $scope.CurrentTime.setOnMessageCB(
        function (m) {
            console.log("message invoked in CurrentTimeCB: " + m);
            console.log(m);
            $scope.$apply(function(){
                $scope.currentTime = m.data;
            })
        });
}
TimerCtrl.$inject = ['$scope', 'CurrentTime'];

    services.js

    angular.module('TimerService', [], function ($provide) {
    $provide.factory('CurrentTime', function () {
        var onOpenCB, onCloseCB, onMessageCB;
        var location = "ws://localhost:8888/api/timer"
        var ws = new WebSocket(location);
        ws.onopen = function () {
            if(onOpenCB !== undefined)
            {
                onOpenCB();
            }
        };
        ws.onclose = function () {
            if(onCloseCB !== undefined)
            {
                onCloseCB();
            }
        };
        ws.onmessage = function (m) {
            console.log(m);
            onMessageCB(m);
        };

        return{
            setOnOpenCB: function(cb){
               onOpenCB = cb;
            },
            setOnCloseCB: function(cb){
                onCloseCB = cb;
            },
            setOnMessageCB: function(cb){
                onMessageCB = cb;
            }
        };
    })});

    web.xml

    <servlet>
    <servlet-name>TimerServlet</servlet-name>
    <servlet-class>TimerWebSocketServlet</servlet-class>
    <load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>TimerServlet</servlet-name>
    <url-pattern>/api/timer/*</url-pattern>
</servlet-mapping>
    • C'est un brillant exemple. Je suis juste d'apprentissage Angular.js et je me demandais si vous avez la complète application de modèles, etc, à apprendre?
    InformationsquelleAutor toddg
  3. 3

    Ce que vous cherchez est Firebase et Deployd.
    Firebase est livré avec un adaptateur qui permet d'utiliser un brise: http://angularfire.com/

    InformationsquelleAutor Kenneth Lynne
  4. 0

    Selon le "Découvrir Meteor" livre, Angulaire montres/les étendues sont semblables à de Meteor calculs concernant la réactivité... mais Angulaire est client seulement et donne moins-un contrôle granulaire de Météore.

    Mon impression est que l'utilisation Angulaire peut être un meilleur ajustement pour l'ajout de la réactivité d'une application existante, alors que Meteor monte en flèche lorsque vous l'utilisez pour l'ensemble de la chose. Mais je n'ai pas de réelle expérience Angulaire encore (bien que j'ai construit quelques petites Meteor apps).

    InformationsquelleAutor cweekly
  5. 0

    Donc, Andy Joslin a mentionné la meilleure solution dans mon opnion, dans sa réponse, la 3e option, qui est de maintenir l'état bidirectionnelle via les websockets ou tout autre async bibliothèque que vous avez affaire avec (ce serait le Chrome message d'API pour les Extensions de Chrome et les Applications par exemple), et toddg a donné un exemple de la façon dont cela pourrait être réalisé. Cependant, dans son exemple, il a mis en œuvre un anti-modèle en AngularJS: le service est d'appeler le contrôleur. Au lieu de cela, le modèle doit être placé à l'intérieur du service, puis référencée à partir du contrôleur.

    La prise de service des rappels de modifier le modèle de service, et parce qu'il est référencé par le contrôleur, il mettra à jour la vue. Attention, si vous avez à traiter avec des types de données primitifs ou des variables qui peuvent être réaffectées cependant, ceux qui auront besoin d'une montre sur le contrôleur pour faire ce travail.

    InformationsquelleAutor bluehallu