AngularJS поддерживает одностраничное приложение через несколько видов на одной странице. Для этого AngularJS предоставил директивы ng-view и ng-template и $routeProvider.

ng-view

Тег ng-view просто создает место, где соответствующий вид (html или ng-template view) может быть размещен на основе конфигурации.

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

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 в веб-браузере.


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok