AngularJS - Контроллеры: Пособие для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в захватывающий мир контроллеров AngularJS. Не волнуйтесь, если вы новички в программировании - я буду вашим дружелюбным проводником в этом путеше‌ствии, объясняя все шаг за шагом. Так что налейте себе чашечку кофе и давайте начнем!

AngularJS - Controllers

Что такое контроллеры в AngularJS?

Прежде чем мы перейдем к коду, давайте поймем, что такое контроллеры в AngularJS. Представьте контроллеры как мозг вашей программы. Они отвечают за управление данными и поведением вашей веб-страницы. Точно так же, как traffic controller управляет потоком автомобилей, контроллеры AngularJS управляют потоком данных в вашей программе.

Роль контроллеров

Контроллеры в AngularJS выполняют несколько важных функций:

Они инициализируют данные объекта $scope.
Они добавляют поведение объекту $scope.
Они действуют как мост между视图 (то, что видит пользователь) и моделью (данными).

Теперь давайте посмотрим, как мы можем создавать и использовать контроллеры в AngularJS.

Ваш первый контроллер AngularJS

Давайте начнем с простого примера, чтобы размяться.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Мой первый контроллер AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
<h2>{{ greeting }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyFirstController', function($scope) {
$scope.greeting = "Привет, AngularJS!";
});
</script>
</body>
</html>

Давайте разберем это:

Мы определяем приложение AngularJS с помощью ng-app="myApp".
Мы создаем контроллер с именем MyFirstController с помощью ng-controller.
В нашем JavaScript мы определяем контроллер и устанавливаем свойство greeting на $scope.
В нашем HTML мы используем {{ greeting }}, чтобы отобразить значение greeting.

Когда вы запустите этот код, вы увидите "Привет, AngularJS!" на странице. Волнующе, правда?

Добавление поведения в контроллеры

Контроллеры не только для отображения данных; они могут добавлять поведение к вашему приложению. Давайте создадим более интерактивный пример:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Интерактивный контроллер AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="CounterController">
<h2>Счетчик: {{ count }}</h2>
<button ng-click="increment()">Увеличить</button>
<button ng-click="decrement()">Уменьшить</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});
</script>
</body>
</html>

В этом примере:

Мы создаем CounterController, который инициализирует переменную count в 0.
Мы определяем две функции: increment() и decrement().
Мы используем ng-click, чтобы привязать эти функции к кликам по кнопкам.

Теперь, когда вы нажимаете кнопку "Увеличить", счетчик увеличивается, а при нажатии "Уменьшить" - уменьшается. Это как маленький калькулятор на вашей веб-странице!

Работа с формами

Контроллеры особенно полезны при работе с формами. Давайте создадим простую форму, которая здоровается с пользователем:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Контроллер формы AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<form ng-submit="greet()">
<input type="text" ng-model="name" placeholder="Введите ваше имя">
<button type="submit">Привет!</button>
</form>
<h2>{{ greeting }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('GreetingController', function($scope) {
$scope.name = '';
$scope.greeting = '';

$scope.greet = function() {
if ($scope.name) {
$scope.greeting = 'Привет, ' + $scope.name + '!';
} else {
$scope.greeting = 'Пожалуйста, введите имя.';
}
};
});
</script>
</body>
</html>

Вот что происходит:

Мы используем ng-model="name", чтобы привязать поля ввода к свойству name в нашем контроллере.
Функция greet() вызывается при отправке формы.
Если имя введено, мы создаем персонализированный привет. В противном случае, мы просим ввести имя.

Этот пример показывает, как контроллеры могут обрабатывать ввод пользователя и обновлять вид соответственно.

Методы контроллера

Давайте подытожим основные методы, которые мы использовали в наших контроллерах:

Метод	Описание
`$scope.variableName`	Используется для определения переменных, к которым можно получить доступ в виде
`$scope.functionName = function() {...}`	Используется для определения функций, которые можно вызвать из вида
`ng-click="functionName()"`	Используется в HTML для вызова функции при нажатии на элемент
`ng-model="variableName"`	Используется для привязки поля ввода к переменной в контроллере
`ng-submit="functionName()"`	Используется для вызова функции при отправке формы

Заключение

Поздравляю! Вы только что сделали первые шаги в мир контроллеров AngularJS. Мы рассмотрели основы создания контроллеров, добавления поведения и работы с формами. Помните, что практика makes perfect, так что не бойтесь экспериментировать с этими концепциями.

За годы преподавания я понял, что лучший способ учиться - это делать. Так что вот вам интересное задание: попробуйте создать простое приложение для списка дел, используя то, что вы узнали о контроллерах. Начните с добавления элементов, а затем попробуйте реализовать функции, такие как пометка элементов как выполненных или удаление их.

Продолжая ваше путеше‌ствие в мире AngularJS, вы обнаружите, что контроллеры - это только вершина айсберга. Есть так много всего, что можно исследовать, от сервисов до директив и дальше. Но пока что похлопайте себя по спине - вы на правильном пути к тому, чтобы стать экспертом в AngularJS!

Счастливо кодируйте и помните: в мире программирования каждая ошибка - это возможность чему-то новому научиться!

Credits: Image by storyset

Предыдущий учебник:

AngularJS - Выражения

Следующий учебник:

AngularJS - Фильтры