Маршрутизация AngularJS
- Предыдущая страница Анимации AngularJS
- Следующая страница Приложения AngularJS
ngRoute Модуль помогает вашему приложению стать одностраничным приложением.
Что такое маршрутизация в AngularJS?
Если вы хотите перейти на различные страницы приложения, но也希望 приложение было SPA (одностраничное приложение) и без перезагрузки страниц, вы можете использовать ngRoute Модуль.
ngRoute Модуль路由您的 приложение к различным страницам, не перезагружая весь приложение.
Пример
Перейти на "red.htm", "green.htm" и "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">главная страница</a></p>
<a href="#!red">красный</a>
<a href="#!green">зеленый</a>
<a href="#!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://cdn.staticfile.net/angular.js/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"
});
});
использование приложения config метод определения $routeProvider.Время загрузки приложения будет выполнять в 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 = "Я люблю Лондон";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "Я люблю Париж";
});
"london.htm" и "paris.htm" это обычные HTML-файлы, в которых вы можете добавить AngularJS-выражения, как и в других HTML-частях вашего AngularJS-приложения.
Эти файлы выглядят так:
london.htm
<h1>Лондон</h1>
<h3>Лондон является столицей Англии.</h3>
<p>Это самый густонаселенный город в Великобритании, с мегаполисом более 13 миллионов жителей.</p>
<p>{{msg}}</p>
paris.htm
<h1>Париж</h1>
<h3>Париж является столицей Франции.</h3>
<p>Район Парижа является одним из крупнейших городов Европы, с более чем 12 миллионами жителей.</p>
<p>{{msg}}</p>
шаблон
В предыдущем примере мы в $routeProvider.when метод, который используется в templateUrl атрибут.
Вы также можете использовать атрибут template атрибут, который позволяет вам напрямую писать HTML в значении атрибута, а не ссылаться на страницу.
Пример
Написать шаблон:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Нажмите на ссылки, чтобы изменить это содержимое</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Томаты содержат около 95% воды.</p>"
});
});
метод otherwise
В предыдущем примере мы использовали $routeProvider метод when.
Вы также можете использовать otherwise Метод, когда не совпадает ни один другой маршрут, он становится-default маршрутом.
Пример
Если ни на ссылку "Banana", ни на ссылку "Tomato" не было клика, пожалуйста, скажите им:
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>Томаты содержат около 95% воды.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Ничего не выбрано</p>"
});
});
- Предыдущая страница Анимации AngularJS
- Следующая страница Приложения AngularJS
