Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS - Приложение в线和

Введение

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

AngularJS - In-line Application

Что такое вилочное приложение?

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

Настройка вашего первого вилочного приложения

Шаг 1: Основной скелет HTML

Давайте начнем с основного скелета нашего HTML-файла:

<!DOCTYPE html>
<html>
<head>
<title>Мое первое вилочное приложение AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

Это может показаться знакомым, если вы уже занимались веб-разработкой. Если нет, не волнуйтесь! Мы просто настраиваем базовый HTML-документ и включаем библиотеку AngularJS из Content Delivery Network (CDN). Представьте это как приглашение AngularJS на наш coding-вечеринку.

Шаг 2: Добавление директивы ng-app

Теперь давайте скажем 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>

</body>
</html>

Мы добавили ng-app="myApp" к тегу <html>. Это как если бы мы повесили большую табличку на наш дом, говорящую: "AngularJS живет здесь!" Часть myApp - это имя, которое мы даем нашему приложению.

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

Что такое контроллер?

В AngularJS контроллер resembles the brain of your application. It manages the data and behavior of a specific part of your app. Let's create one!

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS In-line App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
});
</script>
</body>
</html>

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

  1. Мы добавили ng-controller="MainController" к тегу <body>. Это говорит AngularJS, какая часть нашего HTML контролируется этим контроллером.
  2. Внутри тегов <script>, мы создаем наш модуль приложения с angular.module('myApp', []).
  3. Затем мы определяем наш контроллер с помощью app.controller(). Параметр $scope используется для передачи данных между контроллером и представлением (нашим HTML).
  4. Мы устанавливаем свойство greeting на $scope. Это делает его доступным в нашем HTML.
  5. В HTML мы используем {{greeting}}, чтобы отобразить значение greeting.

Добавление взаимодействия с пользователем

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

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS In-line App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">Изменить приветствие</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
$scope.changeGreeting = function() {
$scope.greeting = "Greetings, Earthling!";
};
});
</script>
</body>
</html>

Вот что нового:

  1. Мы добавили кнопку с директивой ng-click. Это говорит AngularJS, чтобы вызвать функцию changeGreeting(), когда кнопка нажата.
  2. В нашем контроллере мы определили функцию changeGreeting() на $scope. Эта функция изменяет значение greeting.

В действие.bindings данных

Одна из самых мощных функций AngularJS - это двусторонняя привязка данных. Давайте увидим это в действии:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS In-line App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Привет, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Welcome to our AngularJS App!";
$scope.name = "Anonymous";
});
</script>
</body>
</html>

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

  1. Мы добавили поле ввода с ng-model="name". Это связывает значение поля ввода с свойством name на нашем $scope.
  2. Мы отображаем значение name с помощью {{name}} в нашем абзаце.
  3. Пока вы вводите текст в поле ввода, вы увидите, как приветствие обновляется в реальном времени. Это магия двусторонней привязки данных!

Заключение

Поздравления! Вы только что создали свое первое вилочное приложение AngularJS. Мы рассмотрели основы настройки приложения AngularJS, создания контроллера, обработки взаимодействий с пользователем и реализации двусторонней привязки данных. Помните, как и при изучении любого нового навыка, овладение AngularJS требует практики. Так что не бойтесь экспериментировать, ломать вещи и учиться на своих ошибках. Так мы все стали разработчиками, whom мы являемся сегодня!

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

Директива Назначение
ng-app Определяет и инициирует приложение AngularJS
ng-controller Указывает контроллер для определенного участка вашего приложения
ng-click Указывает функцию для выполнения при нажатии на элемент
ng-model Связывает ввод, select или textarea с свойством на scope

Продолжайте программировать, продолжайте учиться и, самое главное, получайте удовольствие! Помните, каждый expert когда-то был beginner. Ваше путешествие с AngularJS только началось!

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Загрузка файла
Следующий учебник:
AngularJS - Меню навигации