Czy możesz zmienić ścieżkę bez ponownego ładowania kontrolera w AngularJS?

Pytanie zostało zadane wcześniej, a na podstawie odpowiedzi nie wygląda dobrze. Chciałbym zapytać o ten przykładowy kod ...

Moja aplikacja ładuje bieżący element do usługi, która go udostępnia. Istnieje kilka kontrolerów, które manipulują danymi elementu bez ponownego ładowania elementu.

Moi kontrolerzy ponownie załadują element, jeśli nie został jeszcze ustawiony, w przeciwnym razie użyją aktualnie załadowanego elementu z usługi między kontrolerami.

Problem : Chciałbym użyć różnych ścieżek dla każdego kontrolera bez ponownego ładowania pliku Item.html.

1) Czy to możliwe?

2) Jeśli nie jest to możliwe, czy istnieje lepsze podejście do posiadania ścieżki na kontroler niż to, co tutaj wymyśliłem?

app.js

var app = angular.module('myModule', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/items', {templateUrl: 'partials/items.html',   controller: ItemsCtrl}).
      when('/items/:itemId/foo', {templateUrl: 'partials/item.html', controller: ItemFooCtrl}).
      when('/items/:itemId/bar', {templateUrl: 'partials/item.html', controller: ItemBarCtrl}).
      otherwise({redirectTo: '/items'});
    }]);

Item.html

<!-- Menu -->
<a id="fooTab" my-active-directive="view.name" href="#/item/{{item.id}}/foo">Foo</a>
<a id="barTab" my-active-directive="view.name" href="#/item/{{item.id}}/bar">Bar</a>
<!-- Content -->
<div class="content" ng-include="" src="view.template"></div>

controller.js

// Helper function to load $scope.item if refresh or directly linked
function itemCtrlInit($scope, $routeParams, MyService) {
  $scope.item = MyService.currentItem;
  if (!$scope.item) {
    MyService.currentItem = MyService.get({itemId: $routeParams.itemId});
    $scope.item = MyService.currentItem;
  }
}
function itemFooCtrl($scope, $routeParams, MyService) {
  $scope.view = {name: 'foo', template: 'partials/itemFoo.html'};
  itemCtrlInit($scope, $routeParams, MyService);
}
function itemBarCtrl($scope, $routeParams, MyService) {
  $scope.view = {name: 'bar', template: 'partials/itemBar.html'};
  itemCtrlInit($scope, $routeParams, MyService);
}

Rozkład.

Status : użycie zapytania wyszukiwania zgodnie z zaleceniami w zaakceptowanej odpowiedzi pozwoliło mi podać różne adresy URL bez ponownego ładowania głównego kontrolera.

app.js

var app = angular.module('myModule', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/items', {templateUrl: 'partials/items.html',   controller: ItemsCtrl}).
      when('/item/:itemId/', {templateUrl: 'partials/item.html', controller: ItemCtrl, reloadOnSearch: false}).
      otherwise({redirectTo: '/items'});
    }]);

Item.html

<!-- Menu -->
<dd id="fooTab" item-tab="view.name" ng-click="view = views.foo;"><a href="#/item/{{item.id}}/?view=foo">Foo</a></dd>
<dd id="barTab" item-tab="view.name" ng-click="view = views.bar;"><a href="#/item/{{item.id}}/?view=foo">Bar</a></dd>

<!-- Content -->
<div class="content" ng-include="" src="view.template"></div>

controller.js

function ItemCtrl($scope, $routeParams, Appts) {
  $scope.views = {
    foo: {name: 'foo', template: 'partials/itemFoo.html'},
    bar: {name: 'bar', template: 'partials/itemBar.html'},
  }
  $scope.view = $scope.views[$routeParams.view];
}

directives.js

app.directive('itemTab', function(){
  return function(scope, elem, attrs) {
    scope.$watch(attrs.itemTab, function(val) {
      if (val+'Tab' == attrs.id) {
        elem.addClass('active');
      } else {
        elem.removeClass('active');
      }
    });
  }
});

Treść w moich stronicach jest zapakowana ng-controller=...

Jeśli nie trzeba używać adresów jak #/item/{{item.id}}/fooi #/item/{{item.id}}/barale #/item/{{item.id}}/?fooi #/item/{{item.id}}/?barzamiast tego można skonfigurować trasy dla /item/{{item.id}}/mieć reloadOnSearchzestaw do false( https://docs.angularjs.org/api/ngRoute/provider/$routeProvider ). To mówi AngularJS, aby nie przeładowywał widoku, jeśli zmieni się część wyszukiwania adresu URL.

Jeśli chcesz zmienić ścieżkę, dodaj ją po pliku .config w pliku aplikacji. Następnie możesz zrobić, $location.path('/sampleurl', false);aby zapobiec przeładowaniu

app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}])

Kredyt trafia do https://www.consolelog.io/angularjs-change-path-without-reloading za najbardziej eleganckie rozwiązanie, jakie znalazłem.

dlaczego po prostu nie ustawić kontrolera ng o jeden poziom wyżej,

<body ng-controller="ProjectController">
    <div ng-view><div>

I nie ustawiaj kontrolera na trasie,

.when('/', { templateUrl: "abc.html" })

mi to pasuje.

Dla tych, którzy potrzebują zmiany path () bez ponownego ładowania sterowników - oto wtyczka: https://github.com/anglibs/angular-location-update

Stosowanie:

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

Na podstawie https://stackoverflow.com/a/24102139/1751321

PS To rozwiązanie https://stackoverflow.com/a/24102139/1751321 zawiera błąd po wywołaniu ścieżki (, false) - spowoduje przerwanie nawigacji przeglądarki do tyłu / do przodu, dopóki ścieżka ((prawda) nie zadzwoni

Chociaż ten post jest stary i ma zaakceptowaną odpowiedź, użycie reloadOnSeach = false nie rozwiązuje problemu dla tych z nas, którzy muszą zmienić rzeczywistą ścieżkę, a nie tylko parametry. Oto proste rozwiązanie do rozważenia:

Użyj ng-include zamiast ng-view i przypisz kontroler do szablonu.

<!-- In your index.html - instead of using ng-view -->
<div ng-include="templateUrl"></div>

<!-- In your template specified by app.config -->
<div ng-controller="MyController">{{variableInMyController}}</div>

//in config
$routeProvider
  .when('/my/page/route/:id', { 
    templateUrl: 'myPage.html', 
  })

//in top level controller with $route injected
$scope.templateUrl = ''

$scope.$on('$routeChangeSuccess',function(){
  $scope.templateUrl = $route.current.templateUrl;
})

//in controller that doesn't reload
$scope.$on('$routeChangeSuccess',function(){
  //update your scope based on new $routeParams
})

Jedynym minusem jest to, że nie można użyć atrybutu resolver, ale dość łatwo można go obejść. Musisz także zarządzać stanem kontrolera, na przykład logiką opartą na $ routeParams, gdy trasa zmienia się w kontrolerze, gdy zmienia się odpowiedni adres URL.

Oto przykład: http://plnkr.co/edit/WtAOm59CFcjafMmxBVOP?p=preview

Korzystam z tego rozwiązania

angular.module('reload-service.module', [])
.factory('reloadService', function($route,$timeout, $location) {
  return {
     preventReload: function($scope, navigateCallback) {
        var lastRoute = $route.current;

        $scope.$on('$locationChangeSuccess', function() {
           if (lastRoute.$$route.templateUrl === $route.current.$$route.templateUrl) {
              var routeParams = angular.copy($route.current.params);
              $route.current = lastRoute;
              navigateCallback(routeParams);
           }
        });
     }
  };
})

//usage
.controller('noReloadController', function($scope, $routeParams, reloadService) {
     $scope.routeParams = $routeParams;

     reloadService.preventReload($scope, function(newParams) {
        $scope.routeParams = newParams;
     });
});

Takie podejście zachowuje funkcję przycisku Wstecz i zawsze masz bieżące routeParams w szablonie, w przeciwieństwie do niektórych innych podejść, które widziałem.

Odpowiedzi powyżej, w tym GitHub, miały pewne problemy z moim scenariuszem, a także przycisk Wstecz lub bezpośrednia zmiana adresu URL z przeglądarki ładowała kontroler, co mi się nie podobało. W końcu zastosowałem następujące podejście:

1. Zdefiniuj właściwość w definicjach tras, zwaną „noReload” dla tych tras, w których nie chcesz, aby kontroler ładował się ponownie po zmianie trasy.

.when('/:param1/:param2?/:param3?', {
    templateUrl: 'home.html',
    controller: 'HomeController',
    controllerAs: 'vm',
    noReload: true
})

2. W funkcji uruchamiania modułu umieść logikę, która sprawdza te trasy. Zapobiegnie to przeładowaniu tylko wtedy, gdy noReloadjest, truea poprzedni kontroler trasy jest taki sam.

fooRun.$inject = ['$rootScope', '$route', '$routeParams'];

function fooRun($rootScope, $route, $routeParams) {
    $rootScope.$on('$routeChangeStart', function (event, nextRoute, lastRoute) {
        if (lastRoute && nextRoute.noReload 
         && lastRoute.controller === nextRoute.controller) {
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                un();
                // Broadcast routeUpdate if params changed. Also update
                // $routeParams accordingly
                if (!angular.equals($route.current.params, lastRoute.params)) {
                    lastRoute.params = nextRoute.params;
                    angular.copy(lastRoute.params, $routeParams);
                    $rootScope.$broadcast('$routeUpdate', lastRoute);
                }
                // Prevent reload of controller by setting current
                // route to the previous one.
                $route.current = lastRoute;
            });
        }
    });
}

3. Na koniec, w kontrolerze, nasłuchuj zdarzenia $ routeUpdate, abyś mógł zrobić wszystko, co musisz zrobić, gdy zmienią się parametry trasy.

HomeController.$inject = ['$scope', '$routeParams'];

function HomeController($scope, $routeParams) {
    //(...)

    $scope.$on("$routeUpdate", function handler(route) {
        // Do whatever you need to do with new $routeParams
        // You can also access the route from the parameter passed
        // to the event
    });

    //(...)
}

Pamiętaj, że przy takim podejściu nie zmieniasz rzeczy w kontrolerze, a następnie odpowiednio aktualizujesz ścieżkę. Jest na odwrót. Najpierw zmieniasz ścieżkę, a następnie nasłuchujesz zdarzenia $ routeUpdate, aby zmienić rzeczy w kontrolerze po zmianie parametrów trasy.

Dzięki temu wszystko jest proste i spójne, ponieważ możesz używać tej samej logiki zarówno po prostu zmieniając ścieżkę (ale bez drogich żądań $ http, jeśli chcesz), jak i po całkowitym przeładowaniu przeglądarki.

Istnieje prosty sposób zmiany ścieżki bez ponownego ładowania

URL is - http://localhost:9000/#/edit_draft_inbox/1457

Użyj tego kodu, aby zmienić adres URL, strona nie zostanie przekierowana

Drugi parametr „false” jest bardzo ważny.

$location.path('/edit_draft_inbox/'+id, false);

Oto moje pełniejsze rozwiązanie, które rozwiązuje kilka rzeczy, których @Vigrond i @rahilwazir przegapili:

• Gdy parametry wyszukiwania zostały zmienione, uniemożliwiłoby to nadawanie $routeUpdate .
• Gdy trasa pozostanie niezmieniona, $locationChangeSuccessnigdy się nie uruchamia, co powoduje następne uniemożliwia aktualizację trasy.

• Jeśli w tym samym cyklu podsumowania pojawiło się kolejne żądanie aktualizacji, tym razem chcąc przeładować, program obsługi zdarzeń anuluje to przeładowanie.

  app.run(['$rootScope', '$route', '$location', '$timeout', function ($rootScope, $route, $location, $timeout) {
      ['url', 'path'].forEach(function (method) {
          var original = $location[method];
          var requestId = 0;
          $location[method] = function (param, reload) {
              // getter
              if (!param) return original.call($location);
  
              # only last call allowed to do things in one digest cycle
              var currentRequestId = ++requestId;
              if (reload === false) {
                  var lastRoute = $route.current;
                  // intercept ONLY the next $locateChangeSuccess
                  var un = $rootScope.$on('$locationChangeSuccess', function () {
                      un();
                      if (requestId !== currentRequestId) return;
  
                      if (!angular.equals($route.current.params, lastRoute.params)) {
                          // this should always be broadcast when params change
                          $rootScope.$broadcast('$routeUpdate');
                      }
                      var current = $route.current;
                      $route.current = lastRoute;
                      // make a route change to the previous route work
                      $timeout(function() {
                          if (requestId !== currentRequestId) return;
                          $route.current = current;
                      });
                  });
                  // if it didn't fire for some reason, don't intercept the next one
                  $timeout(un);
              }
              return original.call($location, param);
          };
      });
  }]);

Dodaj następujący znacznik głowy

  <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>

Zapobiegnie to przeładowaniu.

Od wersji 1.2 możesz użyć $ location.replace () :

$location.path('/items');
$location.replace();