Stessi dati in più viste usando AngularJS

Forse c'è qualcuno che può aiutarmi un po '. Devo condividere i dati tra più viste. Perché è un progetto scolastico, devo usare AngularJS, ma sono nuovo e non so da dove iniziare. Il programma funziona come segue:Stessi dati in più viste usando AngularJS

L'utente (clienti) ha la possibilità di prenotare un tavolo in un ristorante. (prima pagina)

L'utente (dipendenti) ha la possibilità di aggiungere ordini a una tabella riservata. (seconda pagina)

Quando un cliente prenota una tabella dalla prima pagina, la tabella viene aggiunta alla seconda pagina in modo che un dipendente possa aggiungere ordini ad essa.

Forse c'è qualcuno che può aiutarmi un po 'sulla mia strada.

fonte

2013-05-22 P Griep

mi piacerebbe iniziare con il tutorial nel sito angolare. è abbastanza simile: ha un modello e mostra la connessione bidirezionale dei dati angolari. –

Il tutorial di AngularJS sul sito Web non mi aiuta. Ho cercato sul Web e ho scoperto che il modo migliore per condividere i dati tra più visualizzazioni è un servizio. Sei d'accordo con questo? O conosci un altro modo per condividere i dati tra le visualizzazioni? –

sì, è un buon modo. ad esempio, se si desidera avere impostazioni nella propria app, è possibile inserirle in rootScope o in un servizio. Un servizio è sicuramente una soluzione migliore. tuttavia, stai parlando di un modello e non sembra qualcosa che potresti mettere in un servizio. semplici vecchi javascript sembrano utili qui ma non posso dirlo con certezza. controlla anche questo http://stackoverflow.com/questions/16331102/rootscope-vs-service-angular-js/16332680#16332680 discutiamo qualcosa di simile a qualche giorno fa :) –

Dato che sei nuovo in Angularjs, un approccio più semplice sarebbe utilizzare $ rootScope per condividere i dati tra i controller (e le viste associate ad essi).

Ecco un esempio:

angular.module('MyApp', []) 

.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: '/views/main.html', 
     controller: 'MainCtrl' 
    }) 
    .when('/first-page', { 
     templateUrl: '/views/first.html', 
     controller: 'FirstCtrl' 
    }) 
    .when('/second-page', { 
     templateUrl: '/views/second.html', 
     controller: 'SecondCtrl' 
    }); 
}]) 

.controller('MainCtrl', ['$rootScope', function ($rootScope) { 
    // Will be available everywhere in your app 
    $rootScope.users = [ 
    { name: 'Foo' }, 
    { name: 'Bar' } 
    ]; 
}]) 

.controller('FirstCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) { 
    // Only available inside first.html 
    $scope.bazUser = { name: 'Baz' }; 
    // Add to global 
    $rootScope.users.push($scope.bazUser); 
}]) 

.controller('SecondCtrl', ['$rootScope', '$scope' function ($rootScope, $scope) { 
    console.log($rootScope.users); // [{ name: 'Foo' }, { name: 'Bar' }, { name: 'Baz' }]; 
}]);

all'interno second.html ad esempio

<ul> 
    <li ng-repeat="user in users">{{user.name}}</li> 
</ul>

fonte

2013-05-22 14:32:49 SergeL

Sono un po 'confuso. Perché è il controller principale ovunque disponibile? Perché usi $ rootScope, che dirà che l'array di utenti, disponibile per overyone, è? –

Scusa se i commenti ti hanno confuso. Il controller principale viene chiamato solo su "/" (quando main.html esegue il rendering). $ RootScope, a cui fai riferimento, è come un singleton a cui puoi fare riferimento da qualsiasi altro controller. Quindi puoi utilizzare gli oggetti aggiunti in precedenza (e i relativi valori) sull'app. Il vantaggio è che tutte le cose aggiunte a $ rootScope sono immediatamente disponibili in tutte le visualizzazioni (anche quando una vista non ha alcun controller) e non è necessario definirla. Anche i servizi/le fabbriche sono sempre una buona scelta, soprattutto quando l'app viene ridimensionata. – SergeL

Penso di aver capito il rootScope ora. Ed è una buona idea usare rootScope perché la mia app è piccola e rimane piccola. Quando ho intenzione di creare un'app più grande o un'app scalabile, un servizio o factorie è una scelta migliore. –

I servizi sono singleton, quindi quando il servizio viene iniettato la prima volta, il codice in fabbrica viene chiamato una volta. Suppongo che tu abbia una tabella di routing, dato che stai parlando di più pagine.

Se si definisce questa

angular.module('services', []) 
.factory('aService', function() { 
    var shinyNewServiceInstance; 
    //factory function body that constructs shinyNewServiceInstance 
    shinyNewServiceInstance = shinyNewServiceInstance || {foo:1}; 
    return shinyNewServiceInstance; 
});

Dipendenza iniettare nella tua controller (semplificato):

controller('ACtrl', ['aService', function(aService) { 
    aService.foo += 1; 
}]); 

controller('BCtrl', ['aService', function(aService) { 
    aService.foo += 1; 
}]);

Se si esamina aService.foo ogni volta che navigare tra ACtrl & BCtrl, si vedrà che il valore è stato incrementato. La ragione logica è che lo stesso shinyNewServiceInstance è nella tua mano, quindi puoi impostare alcune proprietà nell'hash dalla prima pagina & usarlo nella seconda pagina.

fonte

2013-05-22 10:17:19

Grazie, penso che questo mi può aiutare molto! –

Siete i benvenuti! –

Risposta corretta. Grazie! –

Stessi dati in più viste usando AngularJS

risposta

Problemi correlati