Javascript 在angularJS上，如何在不同的视图/页面之间传递数据

我正在学习angularJS，通过了一些教程，并了解了我的原因。页面似乎永远不会刷新，因此在一个视图中创建的值应该在另一个视图中可用，对吗？我正在一个商店场景中测试这一点。如果我们在主视图中，单击“添加到购物车”，应该会在后台触发一个函数，并将项目添加到数组中。然后，当我们转到购物车视图时，我们可以看到列出的项目。但这是行不通的

我有一个购物车控制器：

angular.module('shoppingCartApp')
  .controller('CartCtrl', function ($scope) {
    $scope.cart = [
    'one item'
    ];
    $scope.pushing = function(item){
        this.cart.push(item);
    };
  });

在主视图中（没有访问此控制器的权限），我有

我们只看到

一项

。我还向这个页面添加了

ng click

属性，只是为了测试，它确实有效，但是，如果我们回家再回来，项目就不见了

从页面从不重新加载的想法来看，推送的项目是否应该保留在数组中？下面是简单的例子

---

谢谢

控制器

不是单例，因此当您更改视图时，

$scope

将被销毁，新的

控制器

将被初始化。如果您希望跨不同视图持久化数据，那么您需要考虑使用

服务

来存储它，因为它们是单例的

如果你创造了这样的东西

angular.module('app')
.service('cartService', [function() {
    var cart = [];
    var add = function(item) {
      cart.push(item);
    };
    var get = function() {
      return cart;
    };
    return {
      add: add,
      get: get
    };       
}]);

然后，您可以将其作为依赖项添加到

控制器中

，并将其用于支持数据，而不是使用

$scope

angular.module('app')
.controller('Ctrl', ['cartService', function(cartService) {
    $scope.cart = cartService.get();

    $scope.pushing = function(item) {
      cartService.add(item);
    };
}]);

angular.module('app')
.service('cartService', [function() {
    var cart = [];
    var add = function(item) {
      cart.push(item);
    };
    var get = function() {
      return cart;
    };
    return {
      add: add,
      get: get
    };       
}]);

angular.module('app')
.controller('Ctrl', ['cartService', function(cartService) {
    $scope.cart = cartService.get();

    $scope.pushing = function(item) {
      cartService.add(item);
    };
}]);