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

AngularJS - Области

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

Область применения - специальный объект javascript, который играет роль соединения контроллера с представлениями. Область содержит данные модели. В контроллерах доступ к данным модели осуществляется через объект $scope.

<script>
   var mainApp = angular.module("mainApp", []);
  
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
</script>

Ниже приведены важные моменты, которые следует учитывать в приведенном выше примере.

  • $Scope передается как первый аргумент контроллеру во время определения его конструктора.
  • $Scope.message и $ scope.type - это модели, которые должны использоваться на странице HTML.
  • Мы установили значения для моделей, которые будут отображаться в прикладном модуле, контроллер которого является shapeController.
  • Мы также можем определять функции в $scope.

Внимание!!!

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

Opera

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

Google Chrome

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

Mozilla Firefox

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

Yandex

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

Наследование

Область применения - это специальные контроллеры. Если мы определяем вложенные контроллеры, то дочерний контроллер будет наследовать область его родительского контроллера.

<script>
   var mainApp = angular.module("mainApp", []);
  
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
  
   mainApp.controller("circleController", function($scope) {
      $scope.message = "In circle controller";
   });
           
</script>

Ниже приведены важные моменты, которые следует учитывать в приведенном выше примере.

  • Мы установили значения для моделей в shapeController.
  • Мы переопределили сообщение в контроллере circleController. Когда «сообщение» используется в модуле контроллера circleController, будет использоваться переопределенное сообщение.

Пример

В следующем примере будут показаны все вышеупомянутые директивы.

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
  
   <body>
      <h2>AngularJS Sample Application</h2>
     
      <div ng-app = "mainApp" ng-controller = "shapeController">
         <p>{{message}} 
 {{type}} </p>
        
         <div ng-controller = "circleController">
            <p>{{message}} 
 {{type}} </p>
         </div>
        
         <div ng-controller = "squareController">
            <p>{{message}} 
 {{type}} </p>
         </div>
                                    
      </div>
                       
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     
      <script>
         var mainApp = angular.module("mainApp", []);
        
         mainApp.controller("shapeController", function($scope) {
            $scope.message = "In shape controller";
            $scope.type = "Shape";
         });
        
         mainApp.controller("circleController", function($scope) {
            $scope.message = "In circle controller";
         });
        
         mainApp.controller("squareController", function($scope) {
            $scope.message = "In square controller";
            $scope.type = "Square";
         });
                                    
      </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