如何使用角度ui路由器处理长动态URL？

Question

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

我的问题，我想的是如何处理这样的URL与UI的路由器：

<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" 
    }; 

，但它结束了送我回.otherwise()状态，当我链接到“参数”状态。

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

Answer 1

好，所以我测试了这一点，它适用于我的情况。当状态只是一个参数时它失败，但是只要每个状态都有一个非参数化的位，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工作正常。

这并不理想，因为它使URL更长，但我还没有找到一个可行的选择。

Answer 2

我知道这个问题很老，但我最近有基本相同的问题，并找到了正式答案。显然，角UI路由器现在支持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

Answer 3

我有一个类似的问题，我赶紧编码的：

.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