Question

我正在设计一个“自定义门户网站”，我一直坚持如何以正确的方式设计我们的应用程序。门户网站的视图如下图所示：

购物车下拉菜单，用户可以选择“当前”购物车（可以为空）
- 一个。重定向到“当前”购物车详细信息页面的按钮。
应用程序菜单。我们可以在哪里导航到目录
主要应用领域。

我有以下工作流程：

用户转到目录菜单。

url：域/目录;州：目录
用户选择目录并查看目录中的产品

url： domain / catalogs / catalog1ID ;状态：的 catalogs.detail
用户可以点击产品图块并转到产品详细信息视图

网址：域/目录/ catalog1ID / product1ID ;状态： catalogs.detail.product

看起来很自然，现在没什么特别的。现在主要问题是如何将“购物车”功能集成到此工作流程中。我的意思是，如果用户选择购物车，视图上的数据可能会有所不同（因为购物车与不同的客户有关，我们可以为不同的客户显示不同的目录/价格/产品）。 F.e对于购物车1和购物车2以及未选择的购物车，Catalog1中的Product1的价格可能不同。我正在努力寻找下一个问题的答案：

在哪里保留选定的购物车（州/网址）？
如何通知购物车改变的当前状态？
如何使F5 /刷新正常工作（如果我当前状态是 catalogs.detail.product 并且我选择了购物车）？

Answer 1

听起来很多问题需要回答，我会尝试提供一些指导，指出你正确的方向，但当然这需要根据你的应用量身定制。

始终保持范围。例如，假设您的顶级范围（rootScope）存储购物车数据。您应用中的任何其他州都可以访问这些rootScope属性。因此，如果您需要跨多个状态持续存储的数据，则存储在rootScope之类的内容将为子状态提供访问权限。现在请注意，将所有数据存储在应用程序rootScope中可能不是一个好主意，将数据存储在各个控制器中会更有意义，并且可以让自定义指令访问这些控制器。这将使事情更加模块化，并且不会污染全局的rootScope
这可以通过在指令中创建一个功能来轻松完成，该指令修改保存购物车数据的范围。

样本指令：

app.directive('pagedirective',function(){
  //directive definition object
  return{ 
    restrict:'E'
    templateUrl:'path to html template'
    link:function(scope){

      scope.update_Shopping_Cart_In_Controller = function(item){
        scope.shopping_Cart_Array.push(item)
      }
    }  

  }
})

样本控制器：

app.controller('shoppingCartCtrl',function($scope){
  //this will get updated from the directive
  $scope.shopping_Cart_Arr = [];
})

主页html：

<div ng-controller="shoppingCartCtrl">
  <p ng-repeat="items in shopping_Cart_Arr">{{items}}</p>
  <pagedirective></pagedirective?
</div>

指令html：

<div>
  <button ng-click="update_Shopping_Cart_In_Controller('new toy')">add item</button>
</div>

显然你会希望你的指令html比这更聪明，但我只是希望从指令传递数据到控制器的模式。

如果您在应用中刷新页面，则会丢失在加载时未在控制器中初始化的任何数据。例如，如果您在一个页面上向购物车控制器添加项目，然后刷新浏览器，则添加到该控制器的数据将丢失。以下是解决该问题的几种方法。
- 将数据保存到sessionStorage或localStorage。刷新期间这些数据不会丢失，让我习惯于在控制器中初始化数据。
- 将数据保存到应用后端的用户表中，然后在需要时检索该数据。

如果有什么不清楚的地方，请告诉我，但希望这可以指出你正确的方向。

Angular + ui-router并行状态架构

1 个答案: