bestsource

AngularJs UI 라우터 - 여러 URL이 있는 하나의 상태

bestsource 2023. 2. 23. 22:57
반응형

AngularJs UI 라우터 - 여러 URL이 있는 하나의 상태

이미 설정한 상태를 지시하는 다른 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',
    ...

Regex 와 URL 의 파라미터를 사용해 주세요.최적은 아니지만 효과가 있다.

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

URL의 regex에 대한 자세한 정보.

링크를 생성하려면ui-sref상태 이름과 함수로 동일한 파라미터를 전달하다

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

매개 변수 사용:

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

기능을 사용할 수 있습니다.

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

root config에 대해서

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

저는 이 접근법이 매우 간단하고 깨끗하다는 것을 알았습니다: 두 개의 동일한 상태를 만들고, 단지 변경만 하면 됩니다.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)

거의 같은 문제가 있었습니다만, 다른 제약이 있었습니다.브라우저내의 url을 그대로 유지하고 싶었기 때문에, 리다이렉트를 사용하고 싶지 않았습니다.
이전 url을 이미 저장한 사용자에게는 Chrome이 저장된 패스워드가 작동하기를 원했기 때문입니다.

제 경우 다음 2개의 URL이 필요했습니다.
/gilly그리고.
/new/gilly
둘 다 같은 상태를 가리키고 있습니다.

이 문제를 해결하기 위해 하나의 상태를 정의했습니다./gilly두 번째 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'
});

언급URL : https://stackoverflow.com/questions/28138169/angularjs-ui-router-one-state-with-multiple-urls

반응형