Javascript 使用AngularJS在多个视图中显示相同的数据

也许有人能帮我一点忙。我必须在多个视图之间共享数据。因为这是一个学校项目，我必须使用AngularJS，但我对它还不熟悉，我不知道从哪里开始。该计划的工作如下：

用户（客户）可以在餐厅预订一张桌子。（第一页）

用户（员工）可以向保留表添加订单。（第二页）

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

---

也许有人能帮我一点忙。

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

如果你定义这个

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

依赖项将其注入控制器（简化）：

---

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

由于您是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>

{{user.name}

我从angular网站上的教程开始。它非常相似：它有一个模型，显示了AngularJS提供的双向数据绑定。网站上的AngularJS教程对我没有帮助。我在网上搜索发现，在多个视图之间共享数据的最佳方式是服务。你同意吗？或者你知道在视图之间共享数据的另一种方法吗？是的，这是一种很好的方法。例如，如果你想在你的应用程序中设置，你可以将它们放在rootScope或服务中。服务绝对是更好的解决方案。然而，您谈论的是一个模型，而这看起来不像是您在服务中使用的东西。普通的老javascript对象在这里似乎很有用，但我不能肯定地告诉您。我们前几天也讨论了一些类似的问题：）谢谢，我会读到这篇文章，并为我的问题想出一个好的解决方案。谢谢，我认为这对我有很大帮助！回答正确。非常感谢。我有点困惑。为什么到处都有主控制器？因为您使用$rootScope，这将告诉您overyone可用的用户数组是什么？如果您对这些评论感到困惑，那么很抱歉。仅在“/”路由上调用主控制器（当Main.html呈现时）。您在那里引用的$rootScope就像一个可以从任何其他控制器引用的单例。因此，您可以在应用程序中使用以前添加的对象（及其值）。好处是，添加到$rootScope的所有内容也可以立即在您的所有视图中使用（即使视图根本没有控制器），并且您不必定义它。服务/工厂也是一个不错的选择，尤其是当你的应用程序扩展时。我想我现在了解了rootScope。使用rootScope是个好主意，因为我的应用程序很小，而且很小。当我计划制作一个更大的应用程序或一个可扩展的应用程序时，服务或保理是一个更好的选择。

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