0

我需要使用 angularjs ui-router 为分层类别设置一个 url 结构。

例子;

类别树如下：

  • 根
  • -应用1
  • --类别1
  • ---类别2
  • ----3级
  • -应用 2
  • -应用程序 3

url xyz.com/application-1/category-1将显示类别级别 1 中的文章，类似地xyz.com/application-1/category-1/category-2/category-3将显示类别级别 3 中的文章。这可以达到 4 或 5 个级别的类别。

根据我的理解，我必须为每个类别级别定义状态，并且所有这些状态都可以访问相同的模板和控制器。有没有更好、更智能的方式来实现这些状态？

4

2 回答 2

1

使用 angular ui-router 和抽象路由怎么样？...类似于：

app.config([
    "$stateProvider",
    "$urlRouterProvider",
    "$ocLazyLoadProvider",
    "$locationProvider",
    function (
        $stateProvider,
        $urlRouterProvider,
        $ocLazyLoadProvider,
        $locationProvider) {

        $urlRouterProvider.otherwise("/index/main");


        $stateProvider

            .state("application1", {

                abstract: true, // <-- MEAN IT?S  A PARENT URL / TEMPLATE
                url: "/index",
                templateUrl: "/app/view/template/common/application1.html"
            })
            .state("application1.category1", { //<-- MEANS IT'S A CHILD OF index FATHER
                url: "/main",
                templateUrl: "/app/view/template/application1/category1.html",

                controller: "HomeController",
                controllerAs: "homeCtrl"


            })

所以标记为抽象的索引路由是多个孩子的“父亲”

于 2016-12-29T12:27:10.403 回答
0

使用带有嵌套状态和视图的 stateProvider https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

$stateProvider.state('/home', {
     url: '/home',
     templateUrl: '',
     controller: ''
})
.state('home.app1', {
     url: '/home/app1',
     templateUrl: '',
     controller: ''
})
.state('home.app1.cat1', {
     url: '/home/app1/cat1',
     templateUrl: '',
     controller: ''
})
.state('home.app1.cat1.cat2', {
     url: '/home/app1/cat1/cat2',
     templateUrl: '',
     controller: ''
})
.state('home.app1.cat1.cat2.cat3', {
     url: '/home/app1/cat1/cat2/cat3',
     templateUrl: '',
     controller: ''
})
.state('home.app2', {
     url: '/home/app2',
     templateUrl: '',
     controller: ''
})
.state('home.app3', {
     url: '/home/app3',
     templateUrl: '',
     controller: ''
})
$routerUrlProvider.otherwise('/home'); // if no path matched

我没有提到命名视图。你可以通过链接，它有很大帮助。

但上述内容对状态进行了繁重的结构化。因此，您需要在单个状态中显示相关信息。例如，如果有三个类别，并且您想在单个页面中显示，那么您可以定义这样的状态。

.state('home.app1',{
   url: '/home/app1',
   views: {
    "view1": {
      templateUrl: 'cat1.html',
      controller: ''
    },
    "view2": {
      templateUrl: 'cat2.html',
      controller: ''
    },
    "view3": {
      templateUrl: 'cat3.gtml',
      controller: ''
    }
   }
})

或者，您可以为所有视图设置一个父控制器。

现在，在 html 中你将拥有

<div>
  <div ui-view="view1"></div>
  <div ui-view="view2"></div>
  <div ui-view="view3"></div>
</div>
于 2016-12-29T12:25:38.827 回答