Оновлення URL-адреси в Angular JS без перегляду рендеринга

Я будую систему інформаційних панелей в AngularJS і стикаюся з проблемою встановлення URL-адреси через $location.path

На нашій інформаційній панелі ми маємо купу віджетів. Кожне з них показує збільшене розгорнутий вигляд при натисканні на нього. Ми намагаємось налаштувати глибокі посилання, щоб дозволити користувачам посилатися на інформаційну панель із розгорнутим віджетом.

На даний момент у нас є 2 маршрути, які виглядають як /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
});

Ви можете встановити для властивості reloadOnSearch $ routeProvider значення 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);
   };
   

Це все. Трохи потворно мати окрему директиву для кожної сторінки, але використання динамічного templateUrl (як функції) в директиві провокує повторний візуалізацію сторінки (і втрату даних входів).

Якщо я правильно зрозумів ваше запитання, ви хочете,

1. Розгорніть віджет, коли користувач знаходиться на / dashboard /: dashboardId, і він розгортає віджет.
2. Ви хочете, щоб у користувача була можливість повернутися до / dashboard /: dashboardId /: maximizedWidgetId і все одно бачити віджет максимально.

Ви можете налаштувати лише перший маршрут у routerConfig і використовувати RouteParams, щоб визначити, чи передано розгорнутий віджет у параметри в контролері цього налаштованого маршруту, та максимізувати той, що передається як параметр. Якщо користувач максимізує його вперше, надішліть URL-адресу цього розгорнутого подання з maximizedWidgetId в інтерфейсі.

Поки ви використовуєте $ location (який є просто обгорткою над об'єктом власного розташування) для оновлення шляху, він оновлює вигляд.

У мене є ідея використовувати

window.history.replaceState ('Об'єкт', 'Заголовок', '/ new-url');

Якщо ви зробите це, і трапиться цикл перетравлення, це повністю зіпсує речі. Однак, якщо ви встановите правильну URL-адресу, яка, як очікує кутова, це нормально. Отже, теоретично ви можете зберегти правильну URL-адресу, яку очікує кутова, і скинути її безпосередньо перед тим, як дізнатись, що дайджест загоряється.

Однак я це не тестував.

Нижче код дозволить вам змінити URL-адресу без переспрямування, наприклад: http: // localhost / # / 691? Foo? Bar? Blabla

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

Але коли ви перейдете на http: // localhost / # / 692 , ви будете перенаправлені.