Question

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

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

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

或

<semester>/myclasses/<class>/assignments

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

我是否为网址中的每个网段制作抽象状态，如：

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

??

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

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

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

感谢您的帮助，我有点难过。

Answer 1

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

.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'
        }
    }
});

正常工作，"/:project_name/:form_name/entries/:form_id"会解析为app/Mirko_test/University/entries/1

Answer 2

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

这不太理想，但它确实有效。

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

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;
}]);

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

这不太理想，因为它会使网址更长，但我找不到可行的替代方案。

Answer 3

我知道这个问题已经过时了，但我最近有了同样的问题并找到了官方的答案。显然，角度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});
        }
    })

有关详细信息，请转到此处：https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

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

3 个答案: