Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS - Переводчее приложение

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

AngularJS - Translate Application

Что такое AngularJS?

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Мой классный переводчик</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Здесь мы добавим содержимое нашего приложения -->
</body>
</html>

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

Шаг 2: Создайте модуль приложения

Теперь создадим наше приложение AngularJS. Мы сделаем это, добавив тег скрипта в конце нашего тела:

<body ng-app="translatorApp">
<!-- Содержимое приложения здесь -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

Здесь мы говорим AngularJS: "Эй, мы хотим создать приложение под названием 'translatorApp'." Атрибут ng-app в теге body как будто puts a name tag on our app, чтобы AngularJS знал, где живет наше приложение.

Создание нашего переводчика

Шаг 3: Создайте контроллер

В AngularJS контроллеры resemble the brains of our operation. They manage the data and behavior of our app. Давайте создадим один:

<script>
var app = angular.module('translatorApp', []);

app.controller('TranslatorController', function($scope) {
$scope.inputText = '';
$scope.outputText = '';

$scope.translate = function() {
// Здесь мы добавим нашу логику перевода
$scope.outputText = "Перевод в процессе...";
};
});
</script>

Этот контроллер устанавливает две переменные (inputText и outputText) и функцию translate. Представьте их как контейнеры для нашего входа, выхода и магического процесса перевода.

Шаг 4: Создайте пользовательский интерфейс

Теперь создадим простой интерфейс для нашего переводчика:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Мой классный переводчик</h1>
<textarea ng-model="inputText" placeholder="Введите текст для перевода"></textarea>
<button ng-click="translate()">Перевести</button>
<p>{{ outputText }}</p>
</div>

<!-- Теги скриптов здесь -->
</body>

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

  • Мы используем ng-controller, чтобы connect our HTML to our controller.
  • ng-model="inputText" связывает textarea с нашей переменной inputText.
  • ng-click="translate()" говорит AngularJS запускать нашу функцию translate, когда нажата кнопка.
  • {{ outputText }} отображает значение переменной outputText.

Добавление функциональности перевода

Шаг 5: Интегрируйте API перевода

Чтобы наш переводчик работал, нам нужно использовать сервис перевода. В этом примере мы будем использовать бесплатный API MyMemory Translation. Нам нужно сделать HTTP-запрос, поэтому добавим сервис $http в наш контроллер:

app.controller('TranslatorController', function($scope, $http) {
$scope.inputText = '';
$scope.outputText = '';
$scope.fromLang = 'en';
$scope.toLang = 'es';

$scope.translate = function() {
var url = "https://api.mymemory.translated.net/get?q=" + $scope.inputText + "&langpair=" + $scope.fromLang + "|" + $scope.toLang;

$http.get(url).then(function(response) {
$scope.outputText = response.data.responseData.translatedText;
}, function(error) {
$scope.outputText = "Ой! Что-то пошло не так.";
});
};
});

Этот обновленный контроллер теперь включает выбор языка и делает запрос к API перевода, когда вызывается функция translate.

Шаг 6: Обновите пользовательский интерфейс

Обновим наш HTML, чтобы включить выбор языка:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Мой классный переводчик</h1>
<select ng-model="fromLang">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
</select>
<select ng-model="toLang">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
</select>
<textarea ng-model="inputText" placeholder="Введите текст для перевода"></textarea>
<button ng-click="translate()">Перевести</button>
<p>{{ outputText }}</p>
</div>

<!-- Теги скриптов здесь -->
</body>

Заключение

Поздравления! Вы только что создали простое, но функциональное приложение для перевода с использованием AngularJS. Вот быстрый обзор того, что мы узнали:

  1. Мы настроили приложение AngularJS
  2. Мы создали контроллер для управления поведением нашего приложения
  3. Мы создали пользовательский интерфейс с использованием директив AngularJS
  4. Мы интегрировали API перевода для предоставления реальной функциональности

помните, что обучение кодированию - это путешествие. Не волнуйтесь, если некоторые части сначала seem confusing - с практикой все начнет иметь смысл. Continue experimenting, continue learning, and before you know it, you'll be building even more complex and exciting applications!

Вот таблица, резюмирующая основные концепции AngularJS, которые мы использовали:

Концепция Описание Пример
Модуль Контейнер для приложения angular.module('translatorApp', [])
Контроллер Управляет поведением приложения app.controller('TranslatorController', function($scope) {...})
Область Связывает контроллер с представлением $scope.inputText = ''
Директивы Расширяют HTML ng-app, ng-controller, ng-model, ng-click
Выражения Отображают значения {{ outputText }}

Счастливого кодирования и пусть ваши приключения в переводе будут без ошибок и полны обучения!

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Корзина Applications
Следующий учебник:
AngularJS - Приложение диаграммы