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

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

1
<div ng-app = "" ng-controller = "studentController">
2
   ...
3
</div>

Cхематический пример взаимодействия контроллера и DOM:

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

1
<script>
2
   function studentController($scope) {
3
      $scope.student = {
4
         firstName: "Mahesh",
5
         lastName: "Parashar",
6

7
         fullName: function() {
8
            var studentObject;
9
            studentObject = $scope.student;
10
            return studentObject.firstName + " " + studentObject.lastName;
11
         }
12
      };
13
   }
14
</script>

StudentController определен как JavaSctipt объект с переменной $scope как аргумент.
$scope.student это свойство studentController object.
firstName & lastName два свойства объекта $scope.student. Мы присвоили им значения по умолчанию.
fullName это функция объекта $scope.student, задача которой вернуть имя и фамилию.
В функции fullName мы получаем объект студент и потом возвращаем полное имя (имя + фамилия).
Примечание: мы можем определить контроллер в отдельном JS файле и подключить его к нашему HTML.

Теперь мы можем использовать свойства студента из studentController используя ng-model или используя выражения как показано в примере ниже.

1
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
2
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
3
<br>
4
You are entering: {{student.fullName()}}

Мы связали имя и фамилию студента с двумя полями input
А полное имя студена привязали к HTML
Теперь вводя любые другие значения имени и фамилии в поля, полное имя и фамилия будут автоматически обновлятся.

Полный пример:

1
<html>
2

3
   <head>
4
      <title>Angular JS Controller</title>
5
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
6
   </head>
7

8
   <body>
9
      <h2>AngularJS Sample Application</h2>
10

11
      <div ng-app = "mainApp" ng-controller = "studentController">
12
         Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
13
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
14
         <br>
15

16
         You are entering: {{student.fullName()}}
17
      </div>
18

19
      <script>
20
         var mainApp = angular.module("mainApp", []);
21

22
         mainApp.controller('studentController', function($scope) {
23
            $scope.student = {
24
               firstName: "Mahesh",
25
               lastName: "Parashar",
26

27
               fullName: function() {
28
                  var studentObject;
29
                  studentObject = $scope.student;
30
                  return studentObject.firstName + " " + studentObject.lastName;
31
               }
32
            };
33
         });
34
      </script>
35

36
   </body>
37
</html>

Вывод в браузер: