#22 Angular-route в AngularJS

poster
В этом уроке мы разберем как работать с разными страницами, делать переходы между ними и отрисовывать разный контент с помощью ngRoute.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. Сегодня мы с вами разберем, что такое ng-route, как его использовать в Angular и зачем он нужен.

Что такое роутер вообще? Когда мы делаем какое-то приложение, то мы естественно хотим, чтобы пользователь мог переходить по разным ссылкам без обновления страницы и видеть интересующую его информацию. angular-route - это как раз та вещь, которая поможет это сделать.

Вот у меня подключен скрипт angular, скрипт angular-route и main.js нашего приложения. Первое, что мы делаем для того, чтобы у нас что-то работало это выводим тег ng-view.

<ng-view></ng-view>

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

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

Теперь сконфигурируем наш роут.

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      template: '<h1>This is my home page</h1>'
    })
});

Что мы здесь сделали? Мы конфигурируем наш ng-route. В конфиг мы инджектим $routeProvider, с которой мы можем с помощью метода when определить, что будет происходить, когда мы заходим на урл /. Когда мы заходим на слеш, то мы будем грузить шаблон "This is my home page".

Если вы заметили, здесь я использую IntelliJ IDEA. Это самый простой вариант разрабатывать с помощью localhost, не поднимая специально бекенд для этого. Сейчас когда я нажимаю в index.html на пиктограмму Chrome, то у меня открывается не файл, а localhost с портом, в котором index.html является корневым файлом. Это очень удобно для таких вещей, как ui-router или angular-route, поскольку мы будем загружать шаблоны ajax запросами и у нас не будет работать код, если мы будем использовать обычные файлы.

Давайте посмотрим. Если мы обновляем страницу, то мы видим, что наш url поменялся на #/ и мы видим наш шаблон. Что произошло?

  1. Мы подключили angular-route
  2. Определили ng-view в html
  3. Сконфигурировали, что должно выводится, когда мы заходим на /

Давайте добавим еще какой-нибудь путь.

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      template: '<h1>This is my home page</h1>'
    })
    .when('/posts', {
      template: '<h1>Posts for my site</h1>'
    })
});

При заходе на роут /posts, мы будем выводить надпись "Posts for my site". Если в браузере мы напишем /posts, то мы видим это сообщение.

Теперь давайте добавим кнопки перехода между урлами.

<a href="#/">Home</a>
<a href="#/posts">Posts</a>

В браузере переход по ссылкам работает корректно, без перезагрузки страницы. Обратите внимание, что наш url идет с решеткой. Это выключеный html5 mode. Когда урлы идут через решетку, то бекенд в этом не задействован. По факту, бекенд нам всегда выдает файл index.html, а сам роутинг строится уже от этого файла. Если же вы хотите урлы без решетки, то вам нужно прописывать дополнительные настройки и настраивать ваш сервер таким образом, чтобы он редиректил всегда на тот файл, где у вас грузится angular и роутинг происходил всегда на стороне фронтенда.

Теперь давайте попробуем поменять темплейты.

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html'
    })
});

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

<h1>Homepage</h1>

Теперь, когда мы переходим на главную, мы видим, что у нас выводится Homepage. Если мы посмотрим в network, то мы увидим, что у нас есть get запрос, который выгребает файл home.html и выводит его. Если бы у нас сейчас не было localhost, а был бы просто открытый файл в браузере, то у нас бы падало с ошибкой, что оно не может сделать запрос.

Также, в роутере можно прописывать контроллер, который будет обрабатывать этот шаблон.

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'homeCtrl'
    })
});

И опишем его ниже

app.controller('homeCtrl', function ($scope) {
  console.log('HomeCtrl');
})

Теперь, когда мы заходим на homepage, мы видим в консоли HomeCtrl, а это значит, что каждый раз, когда перерисовывается шаблон, и когда мы переходим на homepage, у нас отрабатывает homeCtrl. Теперь мы можем в переменную $scope.model записать message.

$scope.model = {
  message: 'This is my beautifull homepage'
}

И теперь мы можем использовать ее в шаблоне.

<h1>Homepage</h1>
{{model.message}}

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

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.