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

问题描述

我试图找到一种方法，使用的UI路由器来实现Angular.js路线别名。比方说，我有一个链接的文章/状态：条款ArticleID我想有/用品/一些-文章标题重定向（内部）到/条/ 76554不改变浏览器的位置。难道这与UI的路由器来完成？

I'm trying to find a way to implement route aliases in Angular.js using ui-router. 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. Could this be done with ui-router?

推荐答案

的注意：这是原来的答案，展示如何用两个国家解决这一问题。下面是另一种方法，通过海尔特 的

有一个 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作为

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

正如我们所看到的，诀窍是，在控制器和模板 （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

的注：此扩展在海尔特的适当的注释的

Note: This extension reacts on Geert appropriate comment

因此​​，对于路线走样 UI-路由器内置/原生方式。它被称为

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

就是这样。这个简单的实现跳过错误，错题...处理。但是，预计将实现无论如何... 在这里查看它在行动

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