AngularJS поддерживает одностраничное приложение через несколько просмотров на одной странице. Для этого AngularJS предоставил директивы ng-view и ng-template, а также службы $ routeProvider.
Директива ng-view
Директива ng-view просто создает заполнитель, в который может быть помещено соответствующее представление (представление HTML или ng-template) в зависимости от конфигурации.
использование
Определите div с помощью ng-view внутри основного модуля.
<div ng-app = "mainApp"> ... <div ng-view></div> </div>
Директива ng-template
Директива ng-template используется для создания представления HTML с использованием тега script. Он содержит атрибут id, который используется $ routeProvider для сопоставления представления с контроллером.
использование
Определите блок скрипта с типом ng-template в основном модуле.
<div ng-app = "mainApp"> ... <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> </div>
Сервис $ routeProvider
$ RouteProvider — это ключевой сервис, который устанавливает конфигурацию URL-адресов, сопоставляет их с соответствующей HTML-страницей или ng-шаблоном и присоединяет контроллер с таким же.
Использование 1
Определите блок скрипта с типом ng-template в основном модуле.
<div ng-app = "mainApp"> ... <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> </div>
Использование 2
Определите блок скрипта с основным модулем и настройте конфигурацию маршрутизации.
var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/addStudent', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }) .when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }) .otherwise ({ redirectTo: '/addStudent' }); }]);
Следующие пункты важны для рассмотрения в приведенном выше примере:
-
$ routeProvider определяется как функция в конфигурации модуля mainApp с использованием ключа в качестве «$ routeProvider».
-
$ routeProvider.when определяет URL-адрес «/ addStudent», который сопоставляется с «addStudent.htm». addStudent.htm должен присутствовать в том же пути, что и основная HTML-страница. Если HTML-страница не определена, то необходимо использовать ng-template с id = «addStudent.htm». Мы использовали нг-шаблон.
-
«иначе» используется для установки вида по умолчанию.
-
«контроллер» используется для установки соответствующего контроллера для просмотра.
$ routeProvider определяется как функция в конфигурации модуля mainApp с использованием ключа в качестве «$ routeProvider».
$ routeProvider.when определяет URL-адрес «/ addStudent», который сопоставляется с «addStudent.htm». addStudent.htm должен присутствовать в том же пути, что и основная HTML-страница. Если HTML-страница не определена, то необходимо использовать ng-template с id = «addStudent.htm». Мы использовали нг-шаблон.
«иначе» используется для установки вида по умолчанию.
«контроллер» используется для установки соответствующего контроллера для просмотра.
пример
В следующем примере показано использование всех вышеупомянутых директив.
testAngularJS.htm
<html> <head> <title>Angular JS Views</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src = "https://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 = "#addStudent">Add Student</a></p> <p><a href = "#viewStudents">View Students</a></p> <div ng-view></div> <script type = "text/ng-template" id = "addStudent.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: 'addStudent.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>
Выход
Откройте файл testAngularJS.htm в веб-браузере и посмотрите результат.