如何使用角度ui-router处理长动态URL？

I am building the front-end app for a REST service, and most of the resources are located at long urls where most of the segments are dynamic based on records created in the app by users. Obviously I won't be able to know or create hardcoded routes for most of these records.

我正在为REST服务构建前端应用程序，并且大多数资源位于长网址，其中大多数细分是动态的，基于用户在应用程序中创建的记录。显然，我无法知道或创建大多数这些记录的硬编码路线。

My question I suppose is how to handle urls like this with ui-router:

我想我的问题是如何用ui-router处理这样的网址：

<semester>/<program>/<class>/enrollment

<学期> / <程序> / <类> /注册

要么

<semester>/myclasses/<class>/assignments

<学期> / myclasses / <类> /分配

There is always at least one static, predictable segment in every resource url, and the segments are always in a predictable order.

每个资源URL中始终至少有一个静态的，可预测的段，并且段始终处于可预测的顺序。

Do I make abstract states for each segment in the url like:

我是否为URL中的每个段创建抽象状态，如：

$stateProvider.state(semester)  
    .state(program)  
    .state(class)  
    .state(assignments);

I've tried building routes that look like this:

我尝试过构建如下所示的路线：

param = {  
    name: "param",  
    url: "/:hue/:temp/param",  
    templateUrl: "http://localhost:81/route/tpl/param.tpl.html",  
    controller: "paramController"  
  };

but it ends up sending me back to the .otherwise() state when I link to the "param" state.

但当我链接到“param”状态时，它最终会将我送回.otherwise（）状态。

Thanks for any help, I'm a bit stumped.

谢谢你的帮助，我有点难过。

3 个解决方案

#1

I had a similar problem and I quickly coded this:

我有类似的问题，我很快编写了这个：

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
    url : "/app",
    abstract : true,
    templateUrl : "layout/navigation-drawer.tpl.html"

}).state('app.help', {
    url : "/help",
    views : {
        'menuContent' : {
            templateUrl : "layout/help.html"
        }
    }
}).state('app.settings', {
    url : "/settings",
    views : {
        'menuContent' : {
            templateUrl : "layout/settings.html"
        }
    }
}).state('app.rate-us', {
    url : "/rate-us",
    views : {
        'menuContent' : {
            templateUrl : "layout/rate-us.html"
        }
    }
}).state('app.projects', {
    url : "/projects",
    views : {
        'menuContent' : {
            templateUrl : "layout/projects.html",
            controller : 'ProjectsCtrl'
        }
    }
}).state('app.forms', {
    url : "/:project_name/forms",
    views : {
        'menuContent' : {
            templateUrl : "layout/forms.html",
            controller : 'FormsCtrl'
        }
    }
}).state('app.entries', {
    url : "/:project_name/:form_name/entries/:form_id",
    views : {
        'menuContent' : {
            templateUrl : "layout/entries.html",
            controller : 'EntriesCtrl'
        }
    }
});

which is working, "/:project_name/:form_name/entries/:form_id" will resolve to something like app/Mirko_test/University/entries/1

工作正常，“/：project_name /：form_name / entries /：form_id”将解析为app / Mirko_test / University / entries / 1

#2

Ok so I tested this out and it works in my case. It fails when the state is only a parameter, but it seems as long as each state has a non-parameterized bit, ui-router is able to parse down to children states. I haven't seen this case demonstrated or explained anywhere before. Most tutorials only cover simple hardcoded nested states and not parameterized ones.

好的，所以我测试了它，它适用于我的情况。当状态只是一个参数时它会失败，但只要每个状态都有一个非参数化的位，ui-router就能解析为子状态。我还没有看到此案例在任何地方展示或解释过。大多数教程仅涵盖简单的硬编码嵌套状态，而不包括参数化状态。

It's not ideal, but it works.

它并不理想，但它确实有效。

I hope this helps someone else facing this issue. :)

我希望这有助于其他人面对这个问题。 :)

var app = angular.module('app', ['ui.router'])

.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ( $stateProvider,   $urlRouterProvider, $locationProvider) {

  $urlRouterProvider.otherwise("/");
  $locationProvider.html5Mode(true);

  var semester = {
    name: "semester",
    abstract: true,
    url: "semester/:sem",
    templateUrl: "http://localhost:81/route/to/semtemplate.tpl.html",
    controller: "semesterController"
  },
  program = {
    name: "program",
    parent: sem,
    url: "program/:prg",
    templateUrl: "http://localhost:81/route/to/prgtemplate.tpl.html",
    controller: "programController"
  },
  classes = {
    name: "classes",
    parent: prg,
    url: "/classes",
    templateUrl: "http://localhost:81/route/to/clstemplate.tpl.html",
    controller: "classesController"
  };

  $stateProvider.state(sem)
    .state(prg)
    .state(classes);
}]);

app.controller('paraController', ['$scope', '$stateParams', '$state',function($scope, $state, $stateParams){
  console.log('paraController instantiated');
  $scope.sem = $stateParams.params.sem;
  $scope.prg = $stateParams.params.prg;
}]);

As this is a hierarchical REST api this pattern works perfectly, and when also taking advantage of scope inheritance from each controller it should be a good fit for my project. I haven't tested extremes of nested states, but it would be interesting to see how it behaves under even more parameterized states. The only limitation I have found is that each state needs to have a non-parameterized part as well. So /:sem fails but semester/:sem works fine.

由于这是一个分层的REST api，这种模式非常有效，当它还利用每个控制器的范围继承时，它应该非常适合我的项目。我没有测试过嵌套状态的极值，但是看看它在更多参数化状态下的行为会很有趣。我发现的唯一限制是每个州都需要有一个非参数化的部分。所以/：sem失败但学期/：sem工作正常。

It's not ideal as it makes URLs longer, but I haven't found a workable alternative.

它并不理想，因为它会使URL更长，但我还没有找到可行的替代方案。

#3

I know this question is old, but I had essentially the same question recently and found the official answer. Apparently, angular ui-router now supports the notion of URL Parameters in URL Routing, which allow you to specify parameters, along the lines of the following:

我知道这个问题已经过时了，但我最近基本上都有同样的问题并找到了正式答案。显然，角度ui-router现在支持URL路由中URL参数的概念，它允许您指定参数，如下所示：

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: 42});
        }
    })

For more info, go here: https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

欲了解更多信息，请访问：https：//github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

#1