보기를 다시 렌더링하지 않고 각도 JS에서 URL 업데이트

보기를 다시 렌더링하지 않고 각도 JS에서 URL 업데이트

Angular Angular에서 대시보드 하고 JS에서 URL을 설정하는 데 가 있습니다.$location.path

대시보드에는 위젯이 많이 있습니다.각각을 클릭하면 최대화된 뷰가 표시됩니다.사용자가 위젯이 최대화된 대시보드에 연결할 수 있도록 심층 링크를 설정하려고 합니다.

'2'처럼 루트가 ./dashboard/:dashboardId ★★★★★★★★★★★★★★★★★」/dashboard/:dashboardId/:maximizedWidgetId

할 때 을 업데이트 합니다.$location.path 표시되게 모든 데이터를 가지고 있기 때문에 전체 뷰를 새로고침하는 것이 아니라 URL만 업데이트하고 싶은데 뷰를 다시 렌더링하지 않고 URL을 설정할 수 있는 방법은 없습니까?

HTML5Mode로 설정되어 있다.true.

실제로 보기는 URL을 변경할 때마다 렌더링됩니다. $이지만, "$routeProvider" Angular"를 할 수 .maximizeWidgetId뷰를 재작성하지 않는 쿼리 문자열로 지정합니다.

App.config(function($routeProvider) {
  $routeProvider.when('/dashboard/:dashboardId', {reloadOnSearch: false});
});

위젯을 클릭하여 최대화하는 경우:

<a href="#/dashboard/1?maximizeWidgetId=1">Maximum This Widget</a>
or
$location.search('maximizeWidgetId', 1);

이 "URL"로 됩니다.http://app.com/dashboard/1?maximizeWidgetId=1

URL에서 검색이 변경되는 경우(위젯 간에)도 확인할 수 있습니다.

$scope.$on('$routeUpdate', function(scope, next, current) {
   // Minimize the current widget and maximize the new one
});

$routeProvider의 reloadOnSearch 속성을 false로 설정할 수 있습니다.

중복 질문 가능성: AngularJS에서 컨트롤러를 새로고침하지 않고 경로를 변경할 수 있습니까?

안부 전해요

컨트롤러를 새로고침하지 않고 full path()를 변경해야 하는 사용자용

플러그인은 다음과 같습니다.

사용방법:

$location.update_path('/notes/1');

오래된 질문인 건 알지만, 답을 찾는데 하루 반이나 걸렸으니, 시작해보죠.

angular-ui-router를 사용하는 경우 경로를 쿼리 문자열로 변환할 필요가 없습니다.

현시점에서는 버그로 간주될 수 있기 때문에reloadOnSearch: false상태에서는 뷰를 새로고침하지 않고 루트를 변경할 수 있습니다.GitHub의 lmessinger.위에 링크된 그의 코멘트에서 링크를 찾을 수 있습니다.

기본적으로 필요한 것은 다음과 같습니다.

1. ui-routerngRoute
2. 주에서는 합니다.reloadOnSearch: false

내 앱에는 카테고리 목록 보기가 있으며, 여기서 다음과 같은 상태를 사용하여 다른 카테고리로 이동할 수 있습니다.

$stateProvider.state('articles.list', {
  url: '{categorySlug}',
    templateUrl: 'partials/article-list.html',
    controller: 'ArticleListCtrl',
    reloadOnSearch: false
  });

바로 그겁니다.이게 도움이 됐으면 좋겠네요!

비슷한 시나리오에서는 내장 루트 대신 Angular UI Router를 사용하고 있습니다.컨트롤러를 재인스톨 해, 뷰 전체를 재렌더 하는 것은 아닌 것 같습니다.

구현 방법:
(주로 서브 부품이 아닌 전체 경로를 변경해야 하는 경우)

메뉴(menu Page)가 있는 페이지가 있어 네비게이션에서 데이터를 삭제해서는 안 됩니다(각 페이지에 입력이 많아 실수로 데이터가 사라지면 사용자가 매우 불쾌해 합니다).

1. $routeProvider 끄기

2. mainPage 컨트롤러에서 사용자 지정 지시 특성을 가진 두 개의 div를 추가합니다. 각 지시문은 'templateUrl'과 'scope: true'만 포함합니다.

    <div ng-show="tab=='tab_name'" data-tab_name-page></div>
   

3. mainPage 컨트롤러에는 라우팅을 시뮬레이트하는 행이 포함되어 있습니다.

   if (!$scope.tab && $location.path()) {
       $scope.tab = $location.path().substr(1);
   }
   $scope.setTab = function(tab) {
       $scope.tab = tab;
       $location.path('/'+tab);
   };
   

그게 다예요.각 페이지에 별도의 디렉티브가 있는 것은 조금 추하지만 디렉티브에서 동적 templateUrl(함수로서)을 사용하면 페이지 재렌더링(및 입력 데이터 손실)이 발생합니다.

내가 네 질문을 제대로 이해했다면, 넌 하고 싶겠지

1. 사용자가 /dashboard/:dashboardId에 있을 때 위젯을 최대화합니다.
2. 사용자가 /dashboard/:dashboardId/:maximizedWidgetId로 돌아와도 위젯이 최대화된 상태로 표시되도록 해야 합니다.

routerConfig 내의 첫 번째 루트만 설정하고 RouteParams를 사용하여 최대화된 위젯이 이 설정된 루트의 컨트롤러 내의 파라미터로 전달되는지 여부를 식별하고 파라미터로 전달된 위젯을 최대화할 수 있습니다.사용자가 처음 최대화할 경우 UI에서 maximedWidgetId를 사용하여 이 최대 뷰에 대한 URL을 공유합니다.

$location(원어민 위치 개체 위에 래퍼만 있는 경우)을 사용하여 경로를 업데이트하면 보기가 새로 고쳐집니다.

사용할 아이디어가 있습니다.

window.history.replaceState('개체', '제목', '/new-url');

이렇게 해서 다이제스트 사이클이 발생하면 모든 것이 완전히 엉망이 됩니다.그러나 올바른 url로 다시 설정하면 angular는 정상이라고 예상합니다.따라서 이론적으로 각도가 예상하는 올바른 URL을 저장하고 다이제스트 발생을 알기 직전에 리셋할 수 있습니다.

아직 테스트 안 해봤는데.

아래 코드는 http://localhost/#/691?foo?bar?blabla와 같이 리다이렉트 없이 URL을 변경할 수 있도록 합니다.

for(var i=0;i<=1000;i++) $routeProvider.when('/'+i, {templateUrl: "tabPages/"+i+".html",reloadOnSearch: false});

다만, http://localhost/#/692 로 변경하면, 리다이렉트 됩니다.

언급URL : https://stackoverflow.com/questions/18337093/updating-url-in-angular-js-without-re-rendering-view