AngularJS UI路由器视图结构产品网站

本文介绍了AngularJS UI路由器视图结构产品网站的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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改变状态（类别传递给列表... ID 进入详细）

What is happening here? Partially we use $stateParams to change states (category is passed to List ... id into Detail)

此外，各国家（一路）确实有acccess到的同一个实例（参考） $ scope.Model

Also all states (all the way down) do have acccess to the same instance (reference) of the $scope.Model

检查所有这里

此外，这里发生了什么，是真正的使用范围$继承，这在UI的路由器被认为嵌套带动。请检查本详细说明

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