Компьютерапия

AngularJS - View

Категория: AngularJS
Просмотров: 3627

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




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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok