Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS - Timer Application

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

AngularJS - Timer Application

Что такое AngularJS?

Прежде чем мы начнем создавать наш таймер, давайте на минутку разберемся, что такое AngularJS. Представьте, что вы строите дом. AngularJS - это как магический ящик с инструментами, который упрощает строительство стен, крыши и всего остального. Это JavaScript-фреймворк, который помогает нам создавать динамические веб-приложения с меньшими усилиями.

Настройка нашего проекта

Шаг 1: Включение AngularJS

Для начала нам нужно включить AngularJS в наш проект. Это как пригласить суперсмартного друга помочь нам с домашним заданием. Мы сделаем это, добавив одну строку кода в наш HTML-файл:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Эта строка говорит нашей веб-странице загрузить AngularJS с серверов Google. Это как открыть магический ящик, о котором мы говорили раньшe.

Шаг 2: Создание HTML-структуры

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

<!DOCTYPE html>
<html ng-app="timerApp">
<head>
<title>AngularJS Timer</title>
</head>
<body ng-controller="TimerController">
<h1>AngularJS Timer</h1>
<p>Время: {{time}}</p>
<button ng-click="startTimer()">Старт</button>
<button ng-click="stopTimer()">Стоп</button>
<button ng-click="resetTimer()">Сброс</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Разберем это:

  • ng-app="timerApp": Это говорит AngularJS, что весь наш HTML-документ является Angular-приложением с именем "timerApp".
  • ng-controller="TimerController": Это применяет контроллер (который мы создадим скоро) к нашему элементу <body>.
  • {{time}}: Это место, где наш таймер будет отображать текущее время.
  • Кнопки имеют атрибуты ng-click, которые будут запускать функции при нажатии.

Создание AngularJS приложения

Шаг 3: Настройка JavaScript

Теперь создадим наш файл app.js. Вот где происходит магия!

var app = angular.module('timerApp', []);

app.controller('TimerController', function($scope, $interval) {
$scope.time = 0;
var timer;

$scope.startTimer = function() {
if (!timer) {
timer = $interval(function() {
$scope.time++;
}, 1000);
}
};

$scope.stopTimer = function() {
if (timer) {
$interval.cancel(timer);
timer = null;
}
};

$scope.resetTimer = function() {
$scope.stopTimer();
$scope.time = 0;
};
});

Уф, это много! Давайте разберем это по шагам:

  1. var app = angular.module('timerApp', []);: Это создает наше AngularJS приложение.

  2. app.controller('TimerController', function($scope, $interval) { ... });: Это определяет наш контроллер. Представьте это как мозг нашего приложения.

  3. $scope.time = 0;: Это инициализирует наш таймер в 0.

  4. Функции startTimer, stopTimer и resetTimer:

  • startTimer использует $interval, чтобы увеличивать $scope.time каждую секунду.
  • stopTimer отменяет интервал, когда мы хотим暂停.
  • resetTimer останавливает таймер и сбрасывает время до 0.

Как все это работает вместе

Когда вы открываете HTML-файл в браузере, AngularJS начинает действовать. Он видит директивы ng-app и ng-controller и знает, что использовать наш JavaScript-код для управления страницей.

{{time}} в нашем HTML автоматически обновляется каждый раз, когда $scope.time изменяется в нашем JavaScript. Это называется двусторонняя привязка данных, и это одна из coolest особенностей AngularJS!

Когда вы нажимаете кнопку, вызывается соответствующая функция в нашем контроллере, обновляя таймер по мере необходимости.

У avanzados concepts

Теперь, когда у нас есть базовые знания, давайте посмотрим на некоторые более сложные concepts:

Зависимости

Вы, возможно, заметили $scope и $interval в функции нашего контроллера. Это зависимости, которые AngularJS "вкалывает" в наш контроллер. Это как если бы фреймворк предоставлял нам особые инструменты для использования в коде.

Сервисы

$interval - это AngularJS сервис. Сервисы - это повторно используемые фрагменты кода, выполняющие конкретные задачи. В данном случае, $interval помогает нам запускать функцию через определенные интервалы.

Таблица методов

Вот таблица методов, которые мы использовали в нашем приложении-таймере:

Метод Описание
startTimer() Запускает таймер, увеличивая время каждую секунду
stopTimer() Останавливает таймер
resetTimer() Останавливает таймер и сбрасывает время до нуля

Заключение

Поздравляю! Вы только что создали свое первое приложение на AngularJS. Мы covered много ground, от базовой HTML-структуры до AngularJS контроллеров и сервисов. Помните, что обучение кодированию похоже на изучение нового языка - это требует практики и терпения. Не волнуйтесь, если все не сойдется сразу. Продолжайте экспериментировать, и вскоре вы начнете создавать потрясающие веб-приложения!

Заканчивая, я вспоминаю свой первый урок программирования, где студент спросил: "Когда я пойму, что я настоящий программист?" Я улыбнулся и ответил: "В тот момент, когда вы понимаете, что Google - лучший друг каждого программиста!" Так что не бойтесь искать ответы, экспериментировать с кодом и, самое главное, получать удовольствие от обучения!

Счастливого кодирования, будущие мастера AngularJS!

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Погодное приложение
Следующий учебник:
AngularJS - Приложение Leaflet