angular:angularjs:route:ngroute []

Это старая версия документа!

Angular-route в AngularJS

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

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

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
	<meta charset="UTF-8">
	<title>AngularJS</title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
 
<main>
	<div class="container">
 
		<div ng-view></div>		
 
	</div>
 
</main>
<script src="angular/angular.min.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="scipts.js"></script>
<script src="controllers/books-controller.js"></script>
</body>
</html>

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

var app = angular.module('MyApp', ['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 поменялся на #/ и мы видим наш шаблон. Что произошло?

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

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

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

Инструменты пользователя

Инструменты сайта

Боковая панель

Angular-route в AngularJS

Инструменты страницы