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

AngularJS - Контроллеры

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

Приложение AngularJS в основном полагается на контроллеры для управления потоком данных в приложении. Контроллер определяется с помощью директивы ng-controller. Контроллер - это объект JavaScript, содержащий атрибуты / свойства и функции. Каждый контроллер принимает $scope в качестве параметра, который относится к приложению / модулю, который контроллер должен контролировать.

Внимание!!!

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

Opera

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

Google Chrome

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

Mozilla Firefox

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

Yandex

Свободу АНГУЛЯРУ в Yandex!!! ))) 
<div ng-app = "" ng-controller = "studentController">
   ...
</div>

Здесь мы объявили контроллер studentController, используя директиву ng-controller. В качестве следующего шага мы определим studentController следующим образом:

<script>
   function studentController($scope) {
      $scope.student = {
         firstName: "Иван",
         lastName: "Тайга",
        
         fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
         }
      };
   }
</script>
  • StudentController определяется как объект JavaScript с аргументом $scope в качестве аргумента.
  • $Scope относится к приложению, которое должно использовать объект studentController.
  • $Scope.student - свойство объекта studentController.
  • FirstName и lastName - это два свойства объекта $scope.student. Мы передали им значения по умолчанию.
  • FullName - это функция объекта $scope.student, задачей которого является возвращение комбинированного имени.
  • В функции fullName мы получаем объект-ученик, а затем возвращаем комбинированное имя.
  • В качестве примечания мы также можем определить объект контроллера в отдельном JS-файле и ссылаться на этот файл на странице html.

Теперь мы можем использовать свойство studentController для учащихся с использованием ng-модели или используя выражения следующим образом.

Enter first name: <input type = "text" ng-model = "student.firstName">

Enter last name: <input type = "text" ng-model = "student.lastName">


You are entering: {{student.fullName()}}
  • Мы ограничили student.firstName и student.lastname двумя полями ввода.
  • Мы ограничили student.fullName () в HTML.
  • Теперь, когда вы вводите что-либо в поля ввода имени и фамилии, вы можете увидеть, как полное имя автоматически обновляется.

Пример

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

testAngularJS.htm
<html>
  
   <head>
      <title>Angular JS Controller</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
  
   <body>
      <h2>AngularJS Sample Application</h2>
     
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName">


         Enter last name: <input type = "text" ng-model = "student.lastName">

         

        
         You are entering: {{student.fullName()}}
      </div>
     
      <script>
         var mainApp = angular.module("mainApp", []);
        
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Иван",
               lastName: "Тайга",
              
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
     
   </body>
</html>
Enter first name:

Enter last name:

You are entering: {{student.fullName()}}



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

Новые статьи

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


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