使用AngularJS的多个视图中的相同数据

Question

也许有人可以帮助我一点点.我必须在多个视图之间共享数据.因为它是一个学校项目,我必须使用AngularJS,但我是新手,我不知道从哪里开始.该计划如下:

用户(客户)可以在餐厅预订餐桌.(第一页)

用户(员工)可以将订单添加到保留表中.(第二页)

当客户从第一页预订表时,该表将添加到第二页,以便员工可以向其添加订单.

也许有人可以在我的路上帮助我一点点.

Answer 1

服务是单例,所以当第一次注入服务时,工厂中的代码会被调用一次.我假设你有一个路由表,因为你在谈论多个页面.

如果你定义这个

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

依赖关系将它注入您的控制器(简化):

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

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

如果每次在ACtrl和BCtrl之间导航时检查aService.foo,您将看到该值已递增.逻辑上的原因是您手中有相同的shinyNewServiceInstance,因此您可以在第一页的哈希中设置一些属性并在第二页中使用它.

Answer 2

由于您是angularjs的新手,因此更简单的方法是使用$ rootScope在控制器(以及与它们关联的视图)之间共享数据.

这是一个例子:

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

以second.html为例

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