web-dev-qa-db-ja.com

AngularJs UIルーター-複数のURLを持つ1つの状態

別のURLパラメーターを追加する要求があります。このパラメーターは、既に設定済みの状態を指示します。効率を上げるために、同じ状態を指す複数のURLを追加できるかどうかを確認しようとしていますが、この新しいケースでは$ UrlRouterProvider.when（）メソッドを使用してその状態にリダイレクトする必要があります。

例これはすでに存在するものです

.state('site.link1',
  {
    url: '/link1',
    templateUrl: '/views/link1.html',
    controller: 'link1Ctrl'
  })

リクエストは、link1ページを指すwww.site.com/newlinkを追加することです。このようなものはありますか？

.state('site.link1',
  {
    url: '/link1, /newlink',
    ...
angularjsrouting
34
kretzm

正規表現とURLのパラメーターを使用してみてください。最適ではありませんが機能します。

.state('site.link1',
 {
   url: '/{path:link1|newlink}',
   templateUrl: '/views/link1.html',
   controller: 'link1Ctrl'
 })

rlsの正規表現の詳細 。

ui-srefでリンクを生成するには、関数として状態名を使用して同じパラメーターを渡します

<a ui-sref="site.link1({path:'link1'})" >site link 1</a>
<a ui-sref="site.link1({path:'newlink'})">site new link</a>
15
Jay.K

Paramsを使用します。

https://github.com/angular-ui/ui-router/wiki/URL-Routing

.state('site.link',
{
    url: '/{link}'
    ..
}

このように同じ状態を使用すると

$state.go('site.link', {link: 'link1'})
$state.go('site.link', {link: 'link2'})
15
Valter

使用できます when() function

.state('site.link1',
  {
    url: '/link1',
    templateUrl: '/views/link1.html',
    controller: 'link1Ctrl'
  })

その後、ルート設定で

angular.module('myApp', [...])
   .config(function ($urlRouterProvider) {
       $urlRouterProvider.when(/newlink/, ['$state','$match', function ($state, $match) {
           $state.go('site.link1');
       }]);
    });
9
nguyên

このアプローチは非常にシンプルでクリーンであることがわかりました。2つの等しい状態を作成し、urlプロパティを変更するだけです

//Both root and login are the same, but with different url's.
var rootConfig = {
    url: '/',
    templateUrl:'html/authentication/login.html',
    controller: 'authCtrl',
    data: {
        requireLogin: false
    }
}

var loginConfig = Object.create(rootConfig)
loginConfig.url = '/login'

$stateProvider
    .state('root', rootConfig)
    .state('login', loginConfig)
4
Ramses

私はほとんど同じ問題を抱えていましたが、別の制約があっただけです-リダイレクトを使用したくありませんでした。ブラウザーのURLを同じままにして、同じ状態を表示したかったからです。
これは、chrome以前のURLをすでに保存したユーザーに対して保存されたパスワードを使用したかったためです。

私の場合、これら2つのURLが必要でした：
/gillyおよび
/new/gilly
両方が同じ状態を指すようにします。

/gillyに対して1つの状態を定義し、2番目のURLに対して/newという抽象的な状態を定義することでこれを解決しました。

これは次のように設定する必要があります。

$stateProvider.state('new', {
    abstract: true,
    url: '/new'
    template: '',
    controller: function() { }
}).state('gilly', {
    url: '/gilly',
    template: 'gilly.html',
    controller: 'GillyController'
}).state('new.gilly', {
    url: '/gilly',  // don't add the '/new' prefix here!
    template: 'gilly.html',
    controller: 'GillyController'
});
0
gillyb