0

angular jsでのルーティングにangular uiを使用しています。http://servername/#/news/14のよう な URL がありますが、エイリアスを使用してhttp://servername/#/news/news_titleのような URL を使用したいと考えています。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'
          }
        },
      });
  })
4

1 に答える 1

0

もちろん可能です。しかし、それを実現するには、どうにかしてnews_titleを 14 にマップする必要がありidます。次のように書くことができます：

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

この場合、 のようhttp://http://servername/#/news/latest_bbc_newsに url を入力できます。コントローラーで を:news_title使用して取得できます。$stateParams

をどのようにマッピング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 で、対応するタイトルを持っているかわからないということです。バックエンドから取得して処理することしかできません。

于 2016-04-10T06:46:44.673 に答える