Маршрутизация AngularJS

В этой главе мы познакомимся с маршрутизацией AngularJS.

Маршрутизация AngularJS позволяет нам получать доступ к разному содержимому через разные URL-адреса.

С помощью AngularJS можно реализовать одностраничные веб-приложения с несколькими представлениями (SPA).

Обычно наш URL имеет видhttp://example.com/first/page, но в одностраничных веб-приложениях AngularJS использует#! + маркердля реализации этого, например:

http://example.com/#!/first
http://example.com/#!/second
http://example.com/#!/third

Примечание: В версиях до Angular 1.6 маршрутизация реализуется через# + маркер.

Когда мы нажимаем на любую из ссылок выше, адрес, запрашиваемый с сервера, один и тот же (http://example.com/). Поскольку содержимое после знака #! игнорируется браузером при запросе к серверу. Поэтому нам нужно реализовать функциональность содержимого после знака #! на стороне клиента. Маршрутизация AngularJS использует#! + маркер, чтобы помочь нам различать разные логические страницы и привязывать разные страницы к соответствующим контроллерам.

На приведённой выше диаграмме мы видим, что созданы два URL-адреса: /ShowOrders и /AddNewOrder. Каждому URL-адресу соответствует своё представление и контроллер.

Теперь давайте рассмотрим простой пример:

Анализ примера:

• 1. Загрузите JS-файл, реализующий маршрутизацию: angular-route.js.

• 2. Включите модуль ngRoute в качестве зависимого модуля основного модуля приложения.

  angular.module('routingDemoApp',['ngRoute'])
  

• 3. Используйте директиву ngView.

  <div ng-view></div>

  HTML-содержимое внутри этого div будет меняться в соответствии с изменениями маршрута.

• 4. Настройте $routeProvider. AngularJS $routeProvider используется для определения правил маршрутизации.

  module.config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/',{template:'这是首页页面'})
          .when('/computers',{template:'这是电脑分类页面'})
          .when('/printers',{template:'这是打印机页面'})
          .otherwise({redirectTo:'/'});
  }]);
  

Функция config модуля AngularJS используется для настройки правил маршрутизации. Используя API config, мы запрашиваем внедрение $routeProvider в нашу функцию конфигурации и используем API $routeProvider.when для определения наших правил маршрутизации.

$routeProvider предоставляет нам функции when(path,object) и otherwise(object) для определения всех маршрутов по порядку. Функция when содержит два параметра:

• Первый параметр — это URL или правило регулярного выражения URL.
• Второй параметр — это объект конфигурации маршрутизации.

---

Объект конфигурации маршрутизации

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

Первый параметр функции $routeProvider.when — это URL или правило регулярного выражения URL, а второй параметр — объект конфигурации маршрутизации.

Правила синтаксиса объекта конфигурации маршрутизации следующие:

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function или  array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

Описание параметра:

• template:

  Если нам нужно вставить только простой HTML-контент в ng-view, используйте этот параметр:

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  Если нам нужно вставить только файл HTML-шаблона в ng-view, используйте этот параметр:

  $routeProvider.when('/computers', {
      templateUrl: 'views/computers.html',
  });
  

  Приведённый выше код получит содержимое файла views/computers.html с сервера и вставит его в ng-view.

• controller:

  Тип Function, string или array; функция контроллера, выполняемая в текущем шаблоне и создающая новую область видимости.

• controllerAs:

  Тип String; задаёт псевдоним для контроллера.

• redirectTo:

  Адрес перенаправления.

• resolve:

  Задаёт другие модули, от которых зависит текущий контроллер.

Пример

Другие расширения