AngularJS поддерживает одностраничное приложение через несколько видов на одной странице. Для этого AngularJS предоставил директивы ng-view и ng-template и $routeProvider.
ng-view
Тег ng-view просто создает место, где соответствующий вид (html или ng-template view) может быть размещен на основе конфигурации.
Внимание!!!
Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!
Opera
![Свободу АНГУЛЯРУ в Opera!!! )))]( "Свободу АНГУЛЯРУ в Opera!!! )))")
Google Chrome
![Свободу АНГУЛЯРУ в Google Chrome!!! )))]( "Свободу АНГУЛЯРУ в Google Chrome!!! )))")
Mozilla Firefox
![Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))]( "Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))")
Yandex
![Свободу АНГУЛЯРУ в Yandex!!! )))]( "Свободу АНГУЛЯРУ в Yandex!!! )))")
Применение
Определите div с ng-view в главном модуле.
<div ng-app = "mainApp">
...
<div ng-view></div>
</div>
ng-template
Директива ng-template используется для создания html-представления с использованием тега script. Он содержит атрибут «id», который используется $ routeProvider для сопоставления представления с контроллером.
Применение
Определите блок сценария с типом как ng-шаблон в основном модуле.
<div ng-app = "mainApp">
...
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>
$routeProvider
$routeProvider - это ключевой сервис, который устанавливает конфигурацию URL-адресов, сопоставляет их с соответствующей html-страницей или ng-шаблоном и присоединяет контроллер с тем же.
Применение
Определите блок сценария с типом как ng-шаблон в основном модуле.
<div ng-app = "mainApp">
...
<script type = "text/ng-template" id = "addStudent1.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>
Применение
Определите блок сценария с основным модулем и настройте конфигурацию маршрутизации.
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent1.htm', controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
Ниже приведены важные моменты, которые следует учитывать в приведенном выше примере.
- $RouteProvider определяется как функция в конфигурации модуля mainApp, используя ключ как «$routeProvider».
- $RouteProvider.when определяет URL-адрес «/ addStudent», который затем отображается на «addStudent1.htm». addStudent1.htm должен присутствовать на том же пути, что и главная страница html. Если страница htm не определена, то ng-template используется с id = "addStudent.htm".
- "otherwise" используется для установки представления по умолчанию.
- «Контроллер» используется для установки соответствующего контроллера для представления.
Пример
В следующем примере будут показаны все вышеупомянутые директивы.
<html>
<head>
<title>Angular JS Views</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp">
<p><a href = ".addStudent1.htm">Add Student</a></p>
<p><a href = ".viewStudents.htm">View Students</a></p>
<div ng-view></div>
<script type = "text/ng-template" id = "addStudent2.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent2.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>
Результат
Откройте textAngularJS.htm в веб-браузере.
