AngularJS ui-router 视图结构产品站点 [英] AngularJS ui-router view structure product site
问题描述
所以我正在创建一个产品网站......有点像网上商店.
So I'm creating a product site.. kind of like a webshop.
该网站将有一个带顶部菜单的标题、一个带过滤器的侧边栏、一个内容区域和一个页脚.我希望侧边栏过滤器根据已选择的顶部菜单进行更新.
The site will have a header with top menu, a sidebar with filters, a content area and a footer. I want the sidebar filters to update dependent on what top menu has been selected.
所以当我在顶部菜单中选择一个新项目时,左侧的过滤器应该更新,并且在选中/取消选中过滤器时将过滤产品.
So the filters on the left side should update when I select a new item in the top menu and products will be filtered when checking/unchecking the filters.
这个应用程序的良好结构是什么?
What would a good structure for this app?
- 我应该有一个加载页眉、侧边栏、主要内容和页脚的主视图"吗?
- 或者我应该在 index.html 中将它们分成一个视图?
- 还是应该将它们分成 3 个视图?页眉、内容、页脚?
我看到的主要问题是应该显示的产品取决于侧边栏过滤器,然后侧边栏过滤器取决于所选的顶部菜单..
Main problem I see is that the products that should be shown are dependent on the sidebar filter, then the sidebar filter is dependent on the selected top menu..
欢迎提出想法:)
推荐答案
我想与您分享我的方法.有一个工作plunker.
I wanted to share with you my approach. There is a working plunker.
让我们有三个区域布局 - 顶部、左侧、主要.这些可能是状态:
Let's have three areas layout - top, left, main. And these could be states:
$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
来保持数据的统一.
The index will create a scope which will be inherited into each child and grand child state. So we can use $scope.Model
to keep the data consolidated all the way down.
这些将是控制器:
.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
到 Detail)
What is happening here? Partially we use $stateParams to change states (category
is passed to List ... id
into Detail)
此外,所有状态(一直向下)都可以访问 $scope.Model
Also all states (all the way down) do have acccess to the same instance (reference) of the $scope.Model
查看所有内容此处
另外,这里发生的事情,是真正使用了$scope继承,它在UI-Router中是由视图嵌套驱动的.请查看此详细说明
Also, what happened here, is the real use of $scope inheritance, which in UI-Router is driven by view nesting. Please, check this detailed description
这篇关于AngularJS ui-router 视图结构产品站点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!