Question

所以我正在创建一个产品网站..有点像网上商店。

该网站将有一个顶部菜单标题，一个带过滤器的侧边栏，一个内容区域和一个页脚。我希望侧边栏过滤器根据选择的顶级菜单进行更新。

因此，当我在顶部菜单中选择新项目时，左侧的过滤器会更新，并且在检查/取消选中过滤器时会过滤产品。

这个应用程序的优秀结构是什么？

我应该有一个加载标题，侧边栏，主要内容和页脚的“主视图”吗？
或许我应该将它们分成index.html中的每个视图？
或者我应该将它们分成3个视图？标题，内容，页脚？

我看到的主要问题是应该显示的产品依赖于侧边栏过滤器，然后侧边栏过滤器取决于所选的顶部菜单..

最受欢迎的想法：）

App wireframe

Answer 1

我想与您分享我的方法。有working plunker。

让我们有三个区域布局 - 顶部，左侧，主要。这些可能是状态：

$stateProvider 
    .state('index', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          'top@index' : { templateUrl: 'top.html',},
          'left@index' : { templateUrl: 'left.html',},
          'main@index' : { templateUrl: 'main.html',},
        },
      })
    .state('index.list', {
        url: '^/:category',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
    .state('index.list.detail', {
        url: '/:id',
        views: {
          'detail@index' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
        },
      })

索引将创建一个范围，该范围将继承到每个子级和子级子级状态。因此，我们可以使用$scope.Model将数据整合下来。

这些将是控制器：

.controller('IndexCtrl', ['$scope', function($scope){
  $scope.Model = {
    categories : ["Music", "Video"],
  }
}]) 
.controller('ListCtrl',  ['$scope', '$stateParams', function($scope, $stateParams){
  // add items to the model
  $scope.Model.items = $stateParams.category === "Music"
    ? ["Depeche Mode", "Nick Cave"]
    : ["Star Wars", "Psycho"]
  $scope.$on("$destroy", function() {delete $scope.Model.items; })
}])
.controller('DetailCtrl', ['$scope', '$stateParams', function($scope, $stateParams){
  // add item to model
  $scope.Model = { 
    item : $scope.Model.items[$stateParams.id],
  }
  $scope.$on("$destroy", function() {delete $scope.Model.item; })
}])

这里发生了什么？部分我们使用$ stateParams来更改状态（category传递给List ... id到细节中）

此外，所有州（一直向下）确实对$scope.Model

的同一实例（参考）有所了解

全部检查here

此外，这里发生的是$ scope继承的真实用法，它在UI-Router中由视图嵌套驱动。请检查this detailed description

AngularJS ui-router视图结构产品站点

1 个答案: