如何在 ui-router 中实现路径别名 [英] How to implement path aliases in ui-router

问题描述

我正在尝试找到一种使用 ui-router 在 Angular.js 中实现路由别名的方法.

I'm trying to find a way to implement route aliases in Angular.js using ui-router.

假设我有一个带有 url article/:articleId 的状态，并且我希望将 /articles/some-article-title(内部)重定向到 /article/76554 无需更改浏览器位置.

Let's say I have a state with the url article/:articleId and I want to have /articles/some-article-title redirected (internally) to /article/76554 without changing the browser location.

这可以用 ui-router 完成吗?

推荐答案

I.双重状态映射(重用控制器、视图)

注意:这是原始答案，展示了如何解决具有两种状态的问题.下面是另一种方法，对 Geert

有一个带有工作示例的 plunker.假设我们有这两个对象(在服务器上)

There is a plunker with working example. Say we have this two objects (on a server)

var articles = [
  {ID: 1, Title : 'The cool one', Content : 'The content of the cool one',},
  {ID: 2, Title : 'The poor one', Content : 'The content of the poor one',},
];

我们想使用 URL 作为

And we would like to use URL as

// by ID
../article/1
../article/2

// by Title
../article/The-cool-one
../article/The-poor-one

然后我们可以创建这个状态定义:

Then we can create this state definitions:

// the detail state with ID
.state('articles.detail', {
    url: "/{ID:[0-9]{1,8}}",
    templateUrl: 'article.tpl.html',
    resolve : {
      item : function(ArticleSvc, $stateParams) {

        return ArticleSvc.getById($stateParams.ID);
      },
    },
    controller:['$scope','$state','item',
      function ( $scope , $state , item){ 

        $scope.article = item;
    }],
  })

// the title state, expecting the Title to be passed
.state('articles.title', {
    url: "/{Title:[0-9a-zA-Z\-]*}",
    templateUrl: 'article.tpl.html',
    resolve : {
      item : function(ArticleSvc, $stateParams) {

        return ArticleSvc.getByTitle($stateParams.Title);
      },
    },
    controller:['$scope','$state','item',
      function ( $scope , $state , item){ 

        $scope.article = item;
    }],
  })

正如我们所见，诀窍在于 Controller 和 Template (templateUrl) 是相同的.我们只是要求服务 ArticleSvc 到 getById() 或 getByTitle().解决后，我们可以处理退回的项目...

As we can see, the trick is that the Controller and the Template (templateUrl) are the same. We just ask the Service ArticleSvc to getById() or getByTitle(). Once resolved, we can work with the returned item...

具有更多详细信息的 plunker 此处

The plunker with more details is here

注意:此扩展对Geert适当的评论

因此，有一个 UI-Router 内置/本地方式用于路由别名.它被称为

So, there is a UI-Router built-in/native way for route aliasing. It is called

我创建了 plunker 在这里.首先，我们只需要一个状态定义，但对 ID 没有任何限制.

I created working plunker here. Firstly, we will need only one state defintion, but without any restrictions on ID.

.state('articles.detail', {
    //url: "/{ID:[0-9]{1,8}}",
    url: "/{ID}",

我们还必须实现一些映射器，将标题转换为 id (别名映射器).那将是新的文章服务方法:

We also have to implement some mapper, converting title to id (the alias mapper). That would be new Article service method:

var getIdByTitle = function(title){
   // some how get the ID for a Title
   ...
}

现在$urlRouterProvider.when()

 $urlRouterProvider.when(/article\/[a-zA-Z\-]+/,
  function($match, $state, ArticleSvc) {

    // get the Title 
    var title = $match.input.split('article/')[1];
    // get some promise resolving that title
    // converting it into ID
    var promiseId = ArticleSvc.getIdByTitle(title);

    promiseId.then(function(id){

      // once ID is recieved... we can go to the detail
      $state.go('articles.detail', { ID: id}, {location: false}); 
    })

    // essential part! this will instruct UI-Router, 
    // that we did it... no need to resolve state anymore
    return true;
  }
);

就是这样.这个简单的实现会跳过错误、错误的标题......处理.但这无论如何都有望实现...在此处查看操作

That's it. This simple implementation skips error, wrong title... handling. But that is expected to be implemented anyhow... Check it here in action

这篇关于如何在 ui-router 中实现路径别名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！