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>'
    })
});

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

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

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

Angular-route в AngularJS

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