Gleiche Daten in mehreren Ansichten mit AngularJS

Vielleicht gibt es jemand, der mir helfen kann ein wenig. Ich habe zum austauschen von Daten zwischen mehreren Ansichten. Denn es ist ein Schulprojekt, ich muss mit AngularJS, aber ich bin neu und ich weiß nicht, wo zu beginnen. Das Programm funktioniert wie folgt:

Nutzer (Kunden) haben die Möglichkeit, einen Tisch zu reservieren in einem restaurant. (erste Seite)

User (Mitarbeiter) haben die Möglichkeit, eigene Aufträge zu einem reservierten Tisch. (zweite Seite)

Wenn ein Kunde einen Tisch reservieren, von der ersten Seite, die Tabelle wird Hinzugefügt, um die zweite Seite so, dass ein Mitarbeiter hinzufügen können Aufträge an it.

Vielleicht gibt es jemand, der mir helfen kann ein bisschen auf meinem Weg.

  • Ich würde beginnen mit dem tutorial in das eckige website. es ist ganz ähnlich: es ist ein Modell, und es zeigt die zwei-Wege-Datenbindung Winkel bietet.
  • Das tutorial AngularJS auf der website doens mir nicht helfen mit ihm. Ich habe gesucht im web und fand, dass der beste Weg, um Daten zwischen mehreren Ansichten ist eine Dienstleistung. Stimmst du dem zu? Oder kennst du einen anderen Weg zum Austausch von Daten zwischen Ansichten?
  • yep, das ist ein guter Weg. zum Beispiel, wenn Sie wollte, die Einstellungen in Ihrer app, und Sie konnte legte Sie in den rootScope oder in einem service. Ein service ist definitiv die bessere Lösung. aber, Sie reden über ein Modell und nicht wie etwas Aussehen, was Sie gelassen hatte im Dienst. plain old javascript objects scheinen hier sinnvoll, aber ich kann Ihnen nicht sagen, für sicher. überprüfen Sie, dies zu stackoverflow.com/questions/16331102/... wir diskutiert etwas anderes vor ein paar Tagen 🙂
  • Danke, ich lese das und denke über eine gute Lösung für mein problem.
InformationsquelleAutor P Griep | 2013-05-22
  1. 6

    Da Sie neu in angularjs ein einfacher Ansatz wäre die Verwendung von $rootScope zum Austausch von Daten zwischen den Controllern (und die Ansichten mit Ihnen verbunden).

    Hier ist ein Beispiel:

    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' }];
}]);

    innen second.html zum Beispiel

    <ul>
  <li ng-repeat="user in users">{{user.name}}</li>
</ul>
    • Ich bin ein wenig verwirrt. Warum ist es, dass der main-controller überall verfügbar ist? Denn Sie verwenden, $rootScope, die sagen, dass das Spektrum von Anwendern, für overyone ist?
    • Sorry, wenn die Kommentare verwirrt Sie. Der Haupt-controller wird nur aufgerufen, auf '/' route (wenn main.html rendert). Der $rootScope, Sie verwiesen es ist wie ein singleton, die Sie verweisen können von jedem anderen controller. So können Sie bereits hinzugefügte Objekte (und deren Werte) über Ihre app. Der Vorteil ist, dass alle die Sachen, die Hinzugefügt, um $rootScope ist ebenfalls ab sofort erhältlich in allen Ansichten (auch wenn ein view hat keine Controller überhaupt) und Sie nicht haben, tun Sie es definieren. Dienstleistungen/Fabriken sind auch immer eine gute Wahl, vor allem, wenn die app skaliert.
    • Ich glaube, ich verstehe die rootScope jetzt. Und es ist eine gute Idee, die rootScope, weil meine app ist klein und bleibt klein. Wenn ich Plane, einen größeren app oder eine app, die Waage, eine Dienstleistung oder factorie ist die bessere Wahl.
    InformationsquelleAutor SergeL
  2. 11

    Services sind singletons, also wenn das service ist, injiziert das erste mal, den code in der Fabrik wird einmal aufgerufen. Ich nehme an, Sie haben eine routing-Tabelle, da sprichst du über mehrere Seiten.

    Wenn Sie definieren diese

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

    Abhängigkeit injizieren Sie in Ihre Controller (vereinfacht):

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

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

    Wenn Sie prüfen aService.foo jedes mal, wenn Sie navigieren zwischen ACtrl & BCtrl, werden Sie sehen, dass der Wert erhöht wurde. Der logische Grund ist, dass die gleichen shinyNewServiceInstance in deiner hand ist, so können Sie einige Eigenschaften in der hash von der ersten Seite & verwenden Sie es auf der zweiten Seite.

    • Danke, ich denke das kann mir helfen, eine Menge!
    • Sie sind herzlich willkommen!
    • Richtige Antwort. Danke!!!
    • Sie sind herzlich willkommen!
    InformationsquelleAutor Foo L
Schreibe einen Kommentar