Маршрутизация в AngularJs с использованием параметров

Прежде чем рассматривать, как работает маршрутизация в AngularJS, полезно понять, для какого типа приложений она была разработана. В разделе ниже задается этот контекст, и каждый последующий метод основывается на нем.

Что такое одностраничные приложения?

Одностраничные приложения (SPA) — это веб-приложения, которые загружают одну HTML-страницу, а затем динамически обновляют её по мере взаимодействия пользователя с ней. Вместо того чтобы запрашивать новый документ с сервера при каждом клике, SPA заменяет только ту часть страницы, которая изменилась.

Такая конструкция создает одну проблему. Если браузер никогда не переходит к новому документу, адресная строка никогда не меняется, поэтому пользователь не может добавить страницу в закладки, поделиться ею или использовать кнопку «Назад». Маршрутизация решает именно эту проблему.

Что такое маршрутизация в AngularJS?

Маршрутизация в AngularJS Это метод, позволяющий создавать одностраничные приложения. Он позволяет создавать различные URLМаршрутизация AngularJS позволяет отображать различный контент в зависимости от выбранного маршрута. Она указывается в файле конфигурации. URL после знака #.

Рассмотрим пример сайта, размещенного через URL http://example.com/index.html.

На этой странице размещен главный экран вашего приложения. Предположим, приложение организует мероприятие, и пользователь хочет просмотреть список мероприятий, просмотреть подробное описание одного из них или удалить его. В одностраничном приложении с включенной маршрутизацией все это доступно по следующим ссылкам.

Символ # будет использоваться вместе с различными маршрутами (ShowEvent, DisplayEvent и DeleteEvent).

• Чтобы просмотреть все события, пользователь перенаправляется на следующую страницу. http://example.com/index.html#ShowEvent
• Чтобы посмотреть какое-либо конкретное событие, их направляют по следующему адресу: http://example.com/index.html#DisplayEvent
• Для удаления события их перенаправляют на следующую страницу: http://example.com/index.html#DeleteEvent

Обратите внимание, что главный URL Остаётся неизменным. Меняется только фрагмент после символа #, и именно за этим фрагментом следит AngularJS. После того, как концепция была установлена, в следующем разделе рассматриваются компоненты, которые необходимо соединить, прежде чем всё заработает.

Добавление маршрута AngularJS с использованием $routeProvider

Как обсуждалось ранее, маршруты в AngularJS Они используются для перенаправления пользователя на другую страницу вашего приложения. Это перенаправление осуществляется на той же HTML-странице, поэтому у пользователя создается впечатление, что он не покидал эту страницу.

Для реализации маршрутизации необходимо выполнить следующие основные шаги в вашем приложении в любом указанном порядке.

1. См. файл angular-route.js. JavaСценарий файл, разработанный GoogleСодержит весь функционал маршрутизации и должен быть включен, чтобы приложение могло ссылаться на потребности модуля в маршрутизации.
2. Добавьте зависимость от модуля ngRoute в ваше приложение. Без этой зависимости маршрутизация в приложении AngularJS вообще невозможна.

Ниже приведен общий синтаксис этого оператора. Это просто обычное объявление модуля с включением ключевого слова ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);

3. Настройте свой $routeProvider. Он предоставляет различные маршруты в вашем приложении, а синтаксис просто указывает, что при выборе соответствующего пути используйте этот маршрут для отображения заданного представления.

when(path, route)

4. Ссылки на ваш маршрут на вашей HTML-странице. На своей HTML-странице вы добавите справочные ссылки на различные доступные маршруты в вашем приложении.

<a href="#!/route1">Route 1</a><br/>

5. Наконец, было бы включение директива ng-view, который обычно находится в теге div. Это будет использоваться для ввода содержимого представления при выборе соответствующего маршрута.

Примечание: Наконечник: Все пять шагов обязательны. Отсутствие ссылки на angular-route.js — наиболее распространенная причина, по которой маршрут молча ничего не делает, поскольку $routeProvider не существует без него. В следующем разделе все пять шагов объединены в работающем примере.

Пример маршрутизации AngularJS

Теперь давайте рассмотрим пример маршрутизации с использованием вышеупомянутых шагов.

В нашем примере маршрутизации AngularJS с параметрами:

• Одна из ссылок позволяет отобразить темы для AngularJS конечно, а другой для Node.js Конечно.
• Когда пользователь нажимает любую ссылку, отображаются темы этого курса.

Шаг 1) Включите файл angular-route в качестве ссылки на скрипт.

Этот файл маршрутов необходим для использования функций, позволяющих работать с несколькими маршрутами и представлениями. Этот файл можно скачать с сайта AngularJS.

Шаг 2) Добавьте теги href, которые будут представлять ссылки на «Темы Angular JS» и «Темы Node JS».

Шаг 3) Добавьте тег div с директивой ng-view, который будет представлять представление.

Это позволит вводить соответствующее представление каждый раз, когда пользователь нажимает «Темы Angular JS» или «Темы Node JS».

Шаг 4) В тег скрипта для AngularJS добавьте «модуль ngRoute» и сервис «$routeProvider».

Code Объяснение:

1. Включите модуль «ngRoute». Благодаря этому Angular будет автоматически обрабатывать маршрутизацию и понимать все команды маршрутизации.
2. Объект `$routeProvider` — это служба, которая в фоновом режиме отслеживает вызываемые маршруты. Когда пользователь щелкает по ссылке, служба это обнаруживает и решает, какой маршрут выбрать.
3. Создайте один маршрут для ссылки Angular: при нажатии на неё внедрите файл Angular.html и используйте 'AngularController' для реализации бизнес-логики.
4. Создайте один маршрут для ссылки Node, который будет внедрять Node.html и использовать 'NodeController' аналогичным образом.

Шаг 5) Далее нужно добавить контроллеры для обработки бизнес-логики как для AngularController, так и для NodeController.

В каждом контроллере мы создаём массив пар ключ-значение для хранения названий и описаний тем для каждого курса. Переменная массива 'tutorial' добавляется в объект области видимости для каждого контроллера.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">Node JS Topics</a></li>
</ul>
<div ng-view></div>
</div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  });
}]);

sampleApp.controller('AngularController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Исправления внесены. <title> бирка лежала внутри <body>, chrset="UTF 8" была допущена орфографическая ошибка, вторая ссылка указывала на #Node.html вместо зарегистрированного маршрута /NodeПути к шаблонам содержали начальную косую черту, которая разрешалась из корня домена.

Шаг 6) Создайте страницы под названием Angular.html и Node.html. Для каждой страницы мы выполняем следующие шаги.

Эти шаги гарантируют, что все пары ключ-значение массива будут отображаться на каждой странице.

1. Посмотрите на график директива ng-repeat чтобы пройтись по каждой паре ключ-значение, определенной в переменной tutorial.
2. Отображение имени и описания каждой пары ключ-значение.

• Угловой.html

<h2>Angular</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

• Узел.html — Идентичен приведенному выше описанию, за исключением того, что заголовок изменен на «Узел». Оба шаблона читаются одинаково. tutorial переменная, которую каждый контроллер предоставляет из своей собственной области видимости.

⚠️ Исправление: В исходном файле Angular.html заголовок гласил «Anguler». Орфографическая ошибка исправлена ​​выше.

Если код будет выполнен успешно, при запуске кода в браузере отобразится следующий результат.

Выход:

Если вы перейдете по ссылке «AngularJS Topics», отобразится следующий результат.

Результаты ясно показывают, что

• При нажатии на ссылку «Темы Angular JS» RouteProvider, который мы объявили в нашем коде, решает, что следует внедрить код Angular.html.
• Этот код будет вставлен в тег «div», который содержит директиву ng-view. Кроме того, содержимое описания курса берется из «учебной переменной», которая была частью объекта области, определенного в AngularController.
• При нажатии на Node.js Темы, произойдет тот же результат, и будет проявлено представление для тем Node.js.
• Также обратите внимание, что страница URL Остаётся неизменным. Меняется только маршрут после тега #, и это соответствует концепции одностраничных приложений. Хэш-тег # в URL является разделителем между маршрутом (который в нашем случае — 'Angular') и основной HTML-страницей (Sample.html).

Данный пример работает только в том случае, если пользователь щелкает по ссылке, соответствующей зарегистрированному маршруту. В следующем разделе рассматривается, что должно произойти, если ничего не соответствует маршруту.

Создание маршрута по умолчанию в AngularJS

Маршрутизация в AngularJS также предоставляет возможность использовать маршрут по умолчанию. Это маршрут, который выбирается, если существующий маршрут не соответствует.

Маршрут по умолчанию создается путем добавления следующего условия при определении службы $routeProvider.

Приведённый ниже синтаксис просто означает перенаправление на другую страницу, если ни один из существующих маршрутов не подходит.

otherwise({
  redirectTo: 'page'
});

Давайте воспользуемся тем же примером, что и выше, и добавим маршрут по умолчанию в нашу службу $routeProvider.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  }).
  otherwise({
    redirectTo: '/Angular'
  });
}]);

Code Объяснение:

1. Здесь мы используем тот же код, что и выше, с той лишь разницей, что используем оператор otherwise и опцию “redirectTo”, чтобы указать, какое представление должно быть загружено, если маршрут не указан. В нашем случае мы хотим, чтобы отображалось представление '/Angular'.

Если код будет выполнен успешно, при запуске кода в браузере отобразится следующий результат.

Выход:

Из вывода,

• На первый взгляд видно, что по умолчанию отображается представление AngularJS.
• Это связано с тем, что при загрузке страницы она переходит к опции «иначе» в функции $routeProvider и загружает представление «/Angular».

Маршрут по умолчанию определяет, какое представление будет загружено. В следующем разделе рассматривается, как один маршрут может обслуживать множество записей, передавая значение в URL.

Как получить доступ к параметрам из маршрута AngularJS

Angular также предоставляет возможность передавать параметры во время маршрутизации. Параметры добавляются в конец маршрута. URLНапример, http://guru99/index.html#/Angular/1. В этом примере маршрутизации Angular

1. http://guru99/index.html это наше основное приложение URL
2. Символ # является разделителем между основными приложениями. URL и маршрут
3. Angular — наш путь
4. И, наконец, «1» — это параметр, который добавляется к нашему маршруту.

Общий синтаксис: HTMLPage#/маршрут/параметрТаким образом, более ранние темы становятся Sample.html#/Angular/1, #/Angular/2 и #/Angular/3, где цифра — это идентификатор темы.

Давайте подробно рассмотрим, как реализовать маршрут в Angular с параметром.

Шаг 1) Добавьте следующий код в свое представление

1. Добавьте таблицу, чтобы отобразить пользователю все темы курса Angular JS.
2. Добавьте строку таблицы для отображения темы «Контроллеры». Для этой строки установите атрибут href на «#!/Angular/1», чтобы при нажатии на тему передавался параметр 1. URL вдоль маршрута.
3. Добавьте строку для темы «Модели» с атрибутом href, установленным на «#!/Angular/2», чтобы параметр 2 перемещался внутри URL.
4. Добавьте строку для темы «Директивы» с атрибутом href, установленным на «#!/Angular/3», чтобы параметр 3 отображался в URL.

Шаг 2) Добавьте идентификатор темы в функцию сервиса routeProvider.
В функцию сервиса routeProvider добавьте следующее: :topicId заполнитель для обозначения любого параметра, переданного в URL После этого маршрут должен быть присвоен переменной topicId.

Шаг 3) Добавьте необходимый код в контроллер

1. При определении функции контроллера обязательно добавьте параметр «$routeParams». Этот параметр будет иметь доступ ко всем параметрам маршрута, переданным в функцию. URL.
2. Параметр «$routeParams» содержит идентификатор темы, переданный в маршруте. Прикрепляем $routeParams.topicId в рамках как $scope.tutorialid делает его доступным для представления в качестве tutorialid.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Исправления внесены. В оригинале использовалась буква l вместо цифры 1 in href="#Angular/l"опущено ng-view контейнер, поэтому шаблону негде было отображаться, и он загрузился. angular-route.js до angular.min.jsчто приводит к ошибке модуля.

Шаг 4) Добавьте выражение для отображения переменной.
Добавьте выражение для отображения переменной Tutorialid на странице Angular.html.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Если код будет выполнен успешно, при запуске кода в браузере отобразится следующий результат.

Выход:

На экране вывода

• Если вы нажмете на ссылку «Подробности темы» для первой темы, к ней будет добавлена ​​цифра 1. URL.
• Это число передается в качестве аргумента «routeParams» и становится доступным в контроллере.

Считывание параметра — это простая задача. Получение записи, которую идентифицирует параметр, до появления представления — это задача свойства, рассмотренного далее.

Как предварительно загрузить данные с помощью свойства resolve

Контроллер из предыдущего раздела считывает идентификатор темы и немедленно отображает его. В реальных приложениях сначала необходимо получить запись с сервера, и если представление отобразится до того, как запрос вернется, пользователь увидит пустой шаблон, который заполнится чуть позже. resolve Это свойство устраняет этот мелькающий пустой контент.

Каждый ключ внутри resolve Объект — это зависимость, которую AngularJS подготавливает перед активацией маршрута. Если значение является промисом, маршрутизатор ожидает его завершения. Только после того, как все промисы будут разрешены, AngularJS создает экземпляр контроллера и отображает шаблон, а разрешенные значения внедряются в контроллер по имени, точно так же, как и в любой другой сервис.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Здесь важны два момента. Отклонённый промис отменяет изменение маршрута и оставляет браузер на текущем представлении, поэтому неудачный запрос никогда не приведёт к отображению неработающей страницы. Однако, поскольку маршрутизатор блокируется, пока промис находится в состоянии ожидания, медленная конечная точка создаёт впечатление зависания приложения. resolve с индикатором выполнения, управляемым $routeChangeStart и $routeChangeSuccess Мероприятия.

⚠️ Внимание! Никогда не размещайте проверки аутентификации только внутри resolveОтклонение маршрута скрывает представление, но не защищает данные, находящиеся за ним, и конечная точка API по-прежнему должна обеспечивать доступ со стороны сервера.

Помимо предварительной загрузки данных, маршрут также может содержать статические значения конфигурации. Далее будет описан способ, которым контроллер считывает эти значения.

Как использовать службу Angular $route

Сервис `$route` позволяет получить доступ к свойствам маршрута. Сервис `$route` доступен в качестве параметра, когда функция определена в контроллере. Общий синтаксис того, как параметр `$route` становится доступным из контроллера, показан ниже.

myApp.controller('MyController', function($scope, $route) { ... });

1. myApp — это модуль AngularJS, определенный для вашего приложения.
2. MyController — это имя контроллера, определенного для вашего приложения.
3. Подобно тому, как `$scope` передает информацию из контроллера в представление, `$route` предоставляет доступ к свойствам текущего маршрута.

Давайте посмотрим, как можно использовать сервис `$route`.

В этом примере

• Мы собираемся создать простую пользовательскую переменную под названием «mytext», которая будет содержать строку «Это angular».
• Мы собираемся прикрепить эту переменную к нашему маршруту. Later Мы собираемся получить доступ к этой строке из нашего контроллера, используя сервис $route, а затем использовать объект scope для отображения её в нашем представлении.

Итак, давайте посмотрим, какие шаги нам необходимо предпринять для достижения этой цели.

Шаг 1) Добавьте в маршрут пользовательскую пару ключ-значение. Здесь мы добавляем ключ под названием «mytext» и присваиваем ему значение «Это угловой».

Шаг 2) Добавьте соответствующий код в контроллер.

1. Добавьте параметр `$route` в функцию контроллера. Параметр `$route` — это ключевой параметр, определенный в Angular, который позволяет получить доступ к свойствам маршрута.
2. Доступ к переменной «mytext», которая была определена в маршруте, можно получить через ссылку $route.current. Затем это значение присваивается переменной «текст» объекта области. Соответственно, к текстовой переменной можно будет получить доступ из представления.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

Шаг 3) Добавьте ссылку на текстовую переменную из объекта области в виде выражения. Он будет добавлен на нашу страницу Angular.html, как показано ниже.

Это приведет к тому, что в представление будет добавлен текст «Это угловой». Выражение {{tutorialid}} такое же, как и в предыдущем разделе, и оно отображает число «1».

<h2>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

Если код будет выполнен успешно, при запуске кода в браузере отобразится следующий результат.

Выход:

Из вывода,

• Мы видим, что текст «Это угловой» также отображается, когда мы нажимаем на любую ссылку в таблице. Идентификатор темы также отображается одновременно с текстом.

Каждая URL На показанном до сих пор изображении присутствует символ #. На заключительном этапе настройки он удаляется.

Включение маршрутизации HTML5

Маршрутизация HTML5 используется для создания чистого интерфейса. URLЭто означает удаление хештега из URLТаким образом, маршрутизация URLПри использовании маршрутизации HTML5 элементы будут выглядеть так, как показано ниже.

Образец.html/Angular/1

Образец.html/Angular/2

Образец.html/Angular/3

Эта концепция обычно известна как представление довольно URL для пользователя.

Для маршрутизации HTML2 необходимо выполнить два основных шага.

1. Настройка $locationProvider
2. Настройка нашей базы для относительных ссылок

Давайте подробно рассмотрим, как выполнить вышеупомянутые шаги в нашем примере.

Шаг 1) Добавьте соответствующий код в модуль Angular.

1. Добавить <base> Это необходимо для маршрутизации HTML5, чтобы приложение знало свое базовое местоположение.
2. Добавьте службу `$locationProvider`. Эта служба позволяет определить `html5Mode`.
3. Установите для html5Mode службы $locationProvider значение true.

Шаг 2) Удалите все теги # для ссылок ('Angular/1', 'Angular/2', 'Angular/3'), чтобы сделать их легко читаемыми. URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ Исправление: первоначальное объявление baseUrl Постоянная переменная указывает на локальный путь к IDE, что не влияет на html5Mode. AngularJS считывает базовое местоположение из <base href> метка. Оригинал также был добавлен. $locationProvider ни разу не позвонив html5Mode(true)Таким образом, хеш так и не был удален.

Если код будет выполнен успешно, при запуске кода в браузере отобразится следующий результат.

Выход:

Из вывода,

• Вы можете видеть, что тег # отсутствует при доступе к приложению.

Все вышеперечисленное использует ngRoute, маршрутизатор, поставляемый командой AngularJS. Это не единственный вариант, и сравнение ниже объясняет, когда альтернативный вариант является более подходящим.

ngRoute против ui-router: какой маршрутизатор выбрать?

ngRoute поддерживается командой AngularJS и соответствует URL напрямую к одному шаблону и контроллеру. ui-router — это проект сообщества, созданный для устранения основного ограничения ngRoute: он соответствует приложению. состояние а не на URL это позволяет одному экрану содержать несколько независимо маршрутизируемых областей.

Выбирайте ngRoute при каждом URL Он соответствует одному полноэкранному представлению, поскольку не требует дополнительных зависимостей, и весь API помещается на одной странице. Выбирайте ui-router, когда экран имеет панели, которые перемещаются независимо друг от друга, или когда дочерние представления должны повторно использовать данные, загруженные родительским элементом. Миграция позже возможна, но нетривиальна, поскольку имена состояний заменяют URL узоры, встречающиеся во всех шаблонах.

Распространенные ошибки маршрутизации в AngularJS и способы их исправления.

В большинстве случаев сбои маршрутизации приводят к появлению пустого окна ng-view вместо сообщения об ошибке в консоли, что затрудняет их диагностику. Для каждого симптома ниже указана причина и способ устранения.

• Неизвестный поставщик: $routeProvider: Библиотека angular-route.js либо не была загружена, либо была загружена раньше, чем angular.min.js. Сначала подключитесь к основной библиотеке.
• Поле остается пустым, без ошибок: Ни один элемент не содержит директиву ng-view, поэтому шаблону негде отобразиться.
• При первом посещении ничего не загружается: Ни один маршрут не соответствует пустому пути. Добавьте блок, содержащий значение redirectTo.
• Переменная $routeParams пуста: В шаблоне отсутствует заполнитель двоеточия. Он должен выглядеть так: '/Angular/:topicId'.
• Шаблоны выдают ошибку 404 после применения html5Mode: Настройте сервер так, чтобы он перезаписывал несовпадающие пути к базовой странице, и убедитесь, что тег `<href>` присутствует.
• Контроллер больше не запускается: Изменился только параметр, поэтому AngularJS повторно использовал экземпляр контроллера, а не перестраивал его. Вместо того чтобы полагаться на повторное срабатывание функции контроллера, следует прослушивать событие $routeUpdate.

Часто задаваемые вопросы (FAQ)