Приложение 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()}}

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




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