如何在 ui-router 中使用别名？

Question

我正在使用 Angular ui 在 Angular js 中进行路由。 我有一个类似http://servername/#/news/14 的网址。但我想使用别名并拥有类似http://servername/#/news/news_title 的网址。有没有可能在angular ui中？？

这是我的配置

angular.module('News', ['ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('news', {
        url: "/news",
        templateUrl: "modules/news/views/news.html",
        controller: 'NewsCtrl'
      })
      .state('news.detail', {
        url: '^/news/:id',
        views: {
          '@': {
            templateUrl: 'modules/news/views/news_detail.html',
            controller: 'NewsDetailCtrl'
          }
        },
      });
  })

Answer 1

当然可以。但要实现它，您需要以某种方式将news_title 映射到我猜是id 的14。你可以这样写：

$stateProvider
    .state('news', {
        url: "/news/:news_title",
        templateUrl: 'news.html',
        ...
    })

在这种情况下，您可以键入http://http://servername/#/news/latest_bbc_news 之类的url，在您的控制器中，您可以使用$stateParams 获取:news_title

如何将news_title 映射到14 取决于您的模型。

更新

例如，您可能可以这样写：

$stateProvider
    .state('news', {
        url: "/news/:news_title",
        templateUrl: 'news.html',
        resolve : {
          news_item: function(NewsService, $stateParams) {
            return NewsService.getByTitle($stateParams.news_title);
          },
        },
        controller:['$scope','$state','news_item',
          function ( $scope , $state , news_item){ 
            $scope.news_item= news_item;
        }]
     })

然后在您的NewsService 中，您需要实现方法getByTitle 以直接从后端按标题获取新闻，或者您从后端获取所有新闻并将其缓存在像

这样的变量中

var news = [
  {ID: 1, Title : 'A', Content : 'XXXXXXXXXXXXXXXXXXXX',},
  {ID: 2, Title : 'B', Content : 'YYYYYYYYYYYYYYYYYYYY',},
];

你必须编写自己的代码来循环遍历它并通过标题找到你需要的新闻。

同样，ui-router 只是为您设置路由规则，提供正确的内容始终是您的责任。我的意思是 ui-router 不知道哪些消息的 id 为 14 和相应的标题，它只能从后端获取并由您处理。