4

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

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

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

或者

<semester>/myclasses/<class>/assignments

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

我是否为 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()状态。

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

4

3 回答 3

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

于 2014-09-11T14:07:51.000 回答
0

好的，所以我对此进行了测试，它适用于我的情况。当状态只是一个参数时它会失败，但似乎只要每个状态都有一个非参数化位，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 更长，但我还没有找到可行的替代方案。

于 2013-09-28T21:05:20.480 回答
0

我知道这个问题很老，但我最近有基本相同的问题并找到了官方答案。显然，angular 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

于 2014-07-19T03:35:39.783 回答