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

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

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

 

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

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

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

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

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

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

Отключите, пожалуйста, AdBlock / uBlock. Поддержите наш проект! Сайт не переполнен рекламными блоками, поп-андерами и другими видами рекламы.