Всем привет. Сегодня мы с вами разберем, что такое 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 поменялся на #/ и мы видим наш шаблон. Что произошло?
Давайте добавим еще какой-нибудь путь.
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}}
Мы видим, что мы легко можем использовать любые переменные из контроллера прямо в нужном нам роуте.