뷰를 다시 렌더링하지 않고 Angular JS에서 URL 업데이트

뷰를 다시 렌더링하지 않고 Angular JS에서 URL 업데이트

---

AngularJS에서 대시 보드 시스템을 구축 중이며 다음을 통해 URL을 설정하는 데 문제가 있습니다. $location.path

대시 보드에는 많은 위젯이 있습니다. 각각을 클릭하면 더 큰 최대화보기가 표시됩니다. 사용자가 위젯을 최대화 한 상태에서 대시 보드에 연결할 수 있도록 딥 링크를 설정하려고합니다.

현재, 우리는이 개 경로가 같은 모양 /dashboard/:dashboardId과/dashboard/:dashboardId/:maximizedWidgetId

사용자가 위젯을 최대화하면을 사용하여 URL을 업데이트 $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에서 컨트롤러를 다시로드하지 않고 경로를 변경할 수 있습니까?

문안 인사

---

컨트롤러를 다시로드하지 않고 전체 경로 ()를 변경해야하는 경우

다음은 플러그인입니다 : https://github.com/anglibs/angular-location-update

용법:

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

---

유사한 시나리오를 위해 기본 제공 경로 대신 Angular UI Router를 사용하고 있습니다. 컨트롤러를 다시 인스턴스화하고 전체 뷰를 다시 렌더링하지 않는 것 같습니다.

---

나는 이것이 오래된 질문이라는 것을 알고 있지만 대답을 찾는 데 하루 반이 걸렸으므로 여기에 있습니다.

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

현재 는 버그로 간주 될 수있는 문제로 인해 reloadOnSearch: false상태를 설정 하면 뷰를 다시로드하지 않고도 경로를 변경할 수 있습니다. GitHub 사용자 lmessinger는 데모를 제공 할만큼 친절했습니다. 위에 링크 된 그의 댓글에서 링크를 찾을 수 있습니다.

기본적으로해야 할 일은 다음과 같습니다.

1. ui-router대신 사용ngRoute
2. 당신의 주에서 당신이 원하는 것을 선언하십시오 reloadOnSearch: false

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

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

그게 다야. 도움이 되었기를 바랍니다!

---

구현 방법 :
(주로 하위 부분이 아닌 전체 경로를 변경 해야하는 경우 내 솔루션)

메뉴가있는 페이지 (menuPage)가 있고 탐색시 데이터를 정리해서는 안됩니다 (각 페이지에 많은 입력이 있고 데이터가 실수로 사라질 경우 사용자는 매우 불만을 갖게됩니다).

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

That's all. Little bit ugly to have separate directive for each page, but usage of dynamic templateUrl (as function) in directive provokes re-rendering of page (and loosing data of inputs).

---

If I understood your question right, you want to,

1. Maximize the widget when the user is on /dashboard/:dashboardId and he maximizes the widget.
2. You want the user to have the ability to come back to /dashboard/:dashboardId/:maximizedWidgetId and still see the widget maximized.

You can configure only the first route in the routerConfig and use RouteParams to identify if the maximized widget is passed in the params in the controller of this configured route and maximize the one passed as the param. If the user is maximizing it the first time, share the url to this maximized view with the maximizedWidgetId on the UI.

As long as you use $location(which is just a wrapper over native location object) to update the path it will refresh the view.

---

I have an idea to use

window.history.replaceState('Object', 'Title', '/new-url');

If you do this and a digest cycle happens it will completely mangle things up. However if you set it back to the correct url that angular expects it's ok. So in theory you could store the correct url that angular expects and reset it just before you know a digest fires.

I've not tested this though.

---

Below code will let you change url without redirection such as: http://localhost/#/691?foo?bar?blabla

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

But when you change to http://localhost/#/692, you will be redirected.

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