AngularJS-маршрутизация
Модуль ngRouteпомогает вашему приложению стать одностраничным приложением.
Что такое маршрутизация в AngularJS?
Если вы хотите переходить на разные страницы в своем приложении, но также хотите, чтобы приложение было SPA (одностраничное приложение) без перезагрузки страницы, вы можете использовать этот ngRouteмодуль.
Модуль ngRouteнаправляет ваше приложение на разные страницы без перезагрузки всего приложения.
Пример:
Перейдите к «red.htm», «green.htm» и «blue.htm»:
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
Что мне нужно?
Чтобы ваши приложения были готовы к маршрутизации, вы должны включить модуль AngularJS Route:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Затем вы должны добавить ngRouteкак зависимость в модуль приложения:
var app = angular.module("myApp", ["ngRoute"]);
Теперь у вашего приложения есть доступ к модулю маршрута, который предоставляет файл $routeProvider.
Используйте $routeProviderдля настройки различных маршрутов в вашем приложении:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Куда это идет?
Вашему приложению нужен контейнер для размещения контента, предоставляемого маршрутизацией.
Этот контейнер является ng-viewдирективой.
Есть три разных способа включить ng-viewдирективу в ваше приложение:
Пример:
<div ng-view></div>
Пример:
<ng-view></ng-view>
Пример:
<div
class="ng-view"></div>
Приложения могут иметь только одну ng-viewдирективу, и она будет заполнителем для всех представлений, предоставляемых маршрутом.
$routeProvider
С помощью $routeProviderвы можете определить, какая страница будет отображаться, когда пользователь щелкнет ссылку.
Пример:
Определите $routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
Определите $routeProviderиспользование configметода вашего приложения. Работа, зарегистрированная в configметоде, будет выполняться при загрузке приложения.
Контроллеры
С помощью $routeProviderвы также можете определить контроллер для каждого «представления».
Пример:
Добавьте контроллеры:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
«london.htm» и «paris.htm» — это обычные файлы HTML, в которые вы можете добавлять выражения AngularJS, как и в любые другие разделы HTML вашего приложения AngularJS.
Файлы выглядят так:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Шаблон
В предыдущих примерах мы использовали templateUrlсвойство в
$routeProvider.whenметоде.
Вы также можете использовать templateсвойство, которое позволяет писать HTML непосредственно в значении свойства, а не ссылаться на страницу.
Пример:
Напишите шаблоны:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
В противном случае метод
В предыдущих примерах мы использовали whenметод $routeProvider.
Вы также можете использовать otherwiseметод, который является маршрутом по умолчанию, когда ни один из других не находит соответствия.
Пример:
Если ни ссылка «Банан», ни ссылка «Помидор» не были нажаты, сообщите об этом:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});