Angular-ui.router:보기 새로 고침 없이 URL 업데이트

Angular-ui.router:보기 새로 고침 없이 URL 업데이트

다양한 추천 목록을 제공하는 Angular SPA와 일부 레스토랑 데이터의 다양한 컷을 기반으로 한 Google Map의 위치를 제공합니다(m.amsterdamfoodie.nl 참조).저는 이 목록들이 각각의 URL을 가지고 있기를 원합니다.Google에서 사용하는 여러 목록을 크롤링하려면 다음과 같이 하십시오.<a>오프캔버스 탐색용 태그를 지정합니다.

현재.<a>태그는 지도에서 매우 눈에 띄는 보기 새로 고침을 발생시킵니다.

• 이를 방지할 수 있습니다.ng-click그리고.$event.preventDefault()(아래 코드 스니펫 참조) 하지만 브라우저 URL을 업데이트하는 방법을 구현해야 합니다.
• 하지만 Angular's를 시도하면서.$state또는 브라우저의history.pushstate, 상태 변경을 트리거하고 보기를 새로 고칩니다.

따라서 뷰를 새로 고치지 않고 모델과 URL을 업데이트하려면 어떻게 해야 합니까?(참고 항목 각도/UI-라우터 - 모두 새로 고침 없이 URL을 업데이트하려면 어떻게 해야 합니까?)

저는 많은 접근법을 실험해보았고 현재 이 html을 가지고 있습니다.

<a href="criteria/price/1" class="btn btn-default" ng-click="main.action($event)">Budget</a>

컨트롤러에서:

this.action = ($event) ->
    $event.preventDefault()
    params = $event.target.href.match(/criteria\/(.*)\/(.*)$/)

    # seems to cause a view refresh
    # history.pushState({}, "page 2", "criteria/"+params[1]+"/"+params[2]);

    # seems to cause a view refresh
    # $state.transitionTo 'criteria', {criteria:params[1], q:params[2]}, {inherit:false}

    updateModel(...)

그리고, 제 생각에 제가 생각하는 일은 제가 그 일을 촉발시키고 있다는 것입니다.$stateProvider코드:

angular.module 'afmnewApp'
.config ($stateProvider) ->
  $stateProvider
  .state 'main',
    url: '/'
    templateUrl: 'app/main/main.html'
    controller: 'MainCtrl'
    controllerAs: 'main'
  .state 'criteria',
    url: '/criteria/:criteria/:q'
    templateUrl: 'app/main/main.html'
    controller: 'MainCtrl'
    controllerAs: 'main'

한 가지 가능한 단서는 http://afmnew.herokuapp.com/criteria/cuisine/italian 을 로드하면 아래 코드가 새로 고쳐지는 반면, http://afmnew.herokuapp.com/ 을 로드하면 새로 고침이 없고 대신 URL 업데이트가 없다는 것입니다.저는 왜 그런 일이 일어나는지 전혀 이해할 수 없습니다.

다음은 제가 올바르게 이해한 경우에 사용할 수 있는 방법의 예입니다.

$state.go('my.state', {id:data.id}, {notify:false, reload:false});
//And to remove the id from the url:
$state.go('my.state', {id:undefined}, {notify:false, reload:false});

https://github.com/angular-ui/ui-router/issues/64 호의 l-liava-l 사용자로부터.

확인하실 수 있습니다.$stateAPI 여기: http://angular-ui.github.io/ui-router/site/ #/api/ui.router.state.$state

우리가 이전에 논의한 것을 바탕으로, 나는 당신에게 몇가지 아이디어를 주고 싶습니다, 어떻게 사용하는지.UI-Router여기요. 전 당신의 도전을 제대로 이해하고 있다고 믿습니다.효과적인 예가 있습니다.만약 이것이 완전한 스위트룸이 아니라면, 약간의 영감으로 받아들여주시기 바랍니다.

면책 사항: 플렁커를 사용하면 다음과 같은 결과를 얻을 수 없습니다. http://m.amsterdamfoodie.nl/, 하지만 이 예에서는 원칙이 유사해야 합니다.

따라서 상태 정의가 있습니다(우리는 두 개의 상태만 가지고 있습니다).

  $stateProvider
    .state('main', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'tpl.layout.html',
            controller: 'MainCtrl',
          },
          'right@main' : { templateUrl: 'tpl.right.html',}, 
          'map@main' : {
            templateUrl: 'tpl.map.html',
            controller: 'MapCtrl',
          },
          'list@main' : {
            templateUrl: 'tpl.list.html',
            controller: 'ListCtrl',
          },
        },
      })
    .state('main.criteria', {
        url: '^/criteria/:criteria/:value',
        views: {
          'map' : {
            templateUrl: 'tpl.map.html',
            controller: 'MapCtrl',
          },
          'list' : {
            templateUrl: 'tpl.list.html',
            controller: 'ListCtrl',
          },
        },
      })
}];

이게 저희 메인입니다.

<div>

  <section class="main">

    <section class="map">
      <div ui-view="map"></div>
    </section>

    <section class="list">
      <div ui-view="list"></div>
    </section>

  </section>

  <section class="right">
    <div ui-view="right"></div>
  </section>

</div>

보다시피, 메인 상태는 이러한 메인 상태의 중첩된 뷰(예: 'viewName@main')를 대상으로 합니다.'right@main'

,main.criteria레이아웃 뷰에 주입합니다.

해당 URL은 기호 ^(으로 시작합니다.url : '^/criteria/:criteria/:value' 를 수 ./ 및

또한 컨트롤러도 있습니다. 컨트롤러는 여기에 약간 순진하지만 배경에 실제 데이터 부하가 있을 수 있다는 것을 보여주어야 합니다(기준에 따라).

MainCtrl를 만듭니다.이 재산은 (상속 덕분에) 부모와 자식이 공유하게 될 것입니다.그래서 이 모든 것이 효과가 있을 것입니다.

app.controller('MainCtrl', function($scope)
{
  $scope.Model = {};
  $scope.Model.data = ['Rest1', 'Rest2', 'Rest3', 'Rest4', 'Rest5'];  
  $scope.Model.randOrd = function (){ return (Math.round(Math.random())-0.5); };
})
.controller('ListCtrl', function($scope, $stateParams)
{
  $scope.Model.list = []
  $scope.Model.data
    .sort( $scope.Model.randOrd )
    .forEach(function(i) {$scope.Model.list.push(i + " - " + $stateParams.value || "root")})
  $scope.Model.selected = $scope.Model.list[0];
  $scope.Model.select = function(index){
    $scope.Model.selected = $scope.Model.list[index];  
  }
})

이를 통해 UI-Router에서 제공하는 기능을 어떻게 사용할 수 있는지 알 수 있습니다.

• 절대 경로(^)
• 뷰 계층별 범위 상속만
• 보기 이름 - 상대 vs.앱솔루트 네임

작업 예제에서 위의 추출물을 확인합니다.

확장: 여기에 새로운 플렁커

맵 뷰를 재생성하지 않으려면 하위 상태 정의의 형식을 생략하면 됩니다.

.state('main.criteria', {
    url: '^/criteria/:criteria/:value',
    views: {
      // 'map' : {
      //  templateUrl: 'tpl.map.html',
      //  controller: 'MapCtrl',
      //},
      'list' : {
        templateUrl: 'tpl.list.html',
        controller: 'ListCtrl',
      },
    },
  })

이제 우리의 지도 VIEW는 단지 모델의 변경사항을 받는 것일 뿐(볼 수 있음) 뷰와 컨트롤러는 재렌더링되지 않습니다.

또한, 다른 플렁커 http://plnkr.co/edit/y0GzHv?p=preview 가 있습니다.controllerAs

.state('main', {
    url: '/',
    views: {
      '@' : {
        templateUrl: 'tpl.layout.html',
        controller: 'MainCtrl',
        controllerAs: 'main',        // here
      },
      ...
    },
  })
.state('main.criteria', {
    url: '^/criteria/:criteria/:value',
    views: {
      'list' : {
        templateUrl: 'tpl.list.html',
        controller: 'ListCtrl',
        controllerAs: 'list',      // here
      },
    },
  })

다음과 같이 사용할 수 있습니다.

<h4>{{main.hello()}}</h4>
<h4>{{list.hello()}}</h4>

마지막 플렁커가 왔습니다.

범위 상속을 사용하여 보기를 새로 고치지 않고 url을 업데이트할 수 있습니다.

$stateProvider
            .state('itemList', {
                url: '/itemlist',
                templateUrl: 'Scripts/app/item/ItemListTemplate.html',
                controller: 'ItemListController as itemList'
                //abstract: true //abstract maybe?
            }).state('itemList.itemDetail', {
                url: '/:itemName/:itemID',
                templateUrl: 'Scripts/app/item/ItemDetailTemplate.html',
                controller: 'ItemDetailController as itemDetail',
                resolve: {
                    'CurrentItemID': ['$stateParams',function ($stateParams) {
                        return $stateParams['itemID'];
                    }]
                }
            })

하위 보기가 상위 보기 내부에 있는 경우 두 컨트롤러는 동일한 범위를 공유합니다.자식 뷰로 채워질 부모 뷰 안쪽에 더미(또는 필요한) UI 뷰를 배치할 수 있습니다.

삽입합니다.

$scope.loadChildData = function(itemID){..blabla..};

컨트롤러 로드 시 자식 컨트롤러가 호출하는 상위 컨트롤러의 함수입니다.그래서 사용자가 클릭할 때

<a ui-sref="childState({itemID: 12})">bla</a> 

하위 컨트롤러 및 하위 보기만 새로 고쳐집니다.그런 다음 필요한 파라미터를 사용하여 부모 스코프 함수를 호출할 수 있습니다.

짧은 대답은 지도를 변화하는 보기 안에 넣지 않는 것으로 끝이 났습니다.승인된 답변은 하위 보기로 페이지를 구성하는 방법에 대해 훨씬 더 자세한 내용을 제공하지만, 핵심은 맵을 뷰의 일부로 만드는 것이 아니라 맵의 동작을 변경되는 뷰에 연결하고 컨트롤러를 사용하여 시장 아이콘을 업데이트하는 것입니다.

언급URL : https://stackoverflow.com/questions/27467170/angular-ui-router-update-url-without-view-refresh