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 с использованием тегов сценариев. Он содержит свойство «ID» для представления контроллера, отображаемого $ routeprovider.
использовать
Определите тип как блок сценария NG-Template в основном модуле.
<div ng-app = "mainApp"> ... <script type = "text/ng-template" id = "addStudent.html"> <h2> добавить студент </h2> {{сообщение}} </script> </div>$ routeprovider
$ routeprovider-это конфигурация групповых URL-адресов, отображает их на соответствующую HTML-страницу или NG-Template, и прикрепляет сервис, который использует те же ключи к контроллеру.
использовать
Определите тип как блок сценария NG-Template в основном модуле.
<div ng-app = "mainApp"> ... <script type = "text/ng-template" id = "addStudent.html"> <h2> добавить студент </h2> {{сообщение}} </script> </div>использовать
Определите блок сценария основного модуля и установите конфигурацию маршрутизации.
var mainApp = angular.module ("maneApp", ['ngroute']); mainapp.config (['$ routeprovider', function ($ routeprovider) {$ routeprovider. Когда ('/addStudent', {templateurl: 'addStudent.html', Controller: 'AddStudentController'}). 'Viewstudentscontroller'}).Ниже приведены важные вопросы, которые следует рассмотреть в примере выше
$ routeprovider определяется как функция конфигурации модуля MainApp, используя ключевое слово в качестве «$ routeprovider»;
$ routeprovider Когда определяется URL "/AddStudent", карты "addStudent.html". addStudent.html должен существовать на том же пути, что и основная HTML -страница. Если страница HTM не определена, то ng-template используется id = "addStudent.html". Мы использовали NG-Template;
«В противном случае» - это представление по умолчанию, используемое для установки;
«Conlloer» используется для установки соответствующего контроллера представления;
пример
В следующих примерах будут показаны все вышеперечисленные инструкции.
testangularjs.html
<html> <head> <title> Angular JS Views </title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"> </script> <body> <h2> Angularjs Применение </h2> <div ng-app = "mainapp"> <p> <a href = "opdStud"> addStud "> addStud"> <p> <p> <a href = "opdStud"> <p> <a href = "#viewStudents"> Просмотреть студентов </a> </p> <div ng-view> </div> <script type = "text/ng-template" id = "addStudent.html"> <h2> добавить студент </h2> {{message}} </script> <script = "text/ng-temportate" id = "viewstudents.html"> <h2> Просмотр студентов </h2> {{Message}} </script> <script> var mainApp = angular.module ("mainApp", ['ngroute']); mainapp.config (['$ routeprovider', function ($ routeprovider) {$ routeprovider. Когда ('/addStudent', {templateurl: 'addStudent.html', Controller: 'AddStudentController'}). 'Viewstudentscontroller'}). mainapp.controller ('addStudentController', function ($ scope) {$ scope.message = "Эта страница будет использоваться для отображения добавления студенческой формы";}); mainapp.controller ('viewstudentscontroller', function ($ scope) {$ scope.message = "Эта страница будет использоваться для отображения всех студентов";}); </script> </body> </html>результат
Откройте TextAngularjs.html в веб -браузере. Результаты следующие:
Выше приведено сборник информации AngularJS. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!