Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS - Приложение Todo

Привет,野心勃勃ые программисты! Сегодня мы отправимся в увлекательное путешествие в мир AngularJS, создавая простое, но мощное приложение Todo. Как ваш доброжелательный сосед по компьютерной науке, я с радостью проведу вас через этот процесс, даже если вы никогда не писали ни строчки кода. Так что возьмите любимый напиток, устройтесь поудобнее и погружайтесь с нами!

AngularJS - ToDo Application

Что такое AngularJS?

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

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

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

Во-первых, давайте настроим наш проект. Нам понадобятся три файла:

  1. index.html ( наш основной HTML-файл)
  2. app.js (наша AngularJS-программа)
  3. style.css (наша таблица стилей)

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

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Мое приложение Todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
<h1>Мой список Todo</h1>
<!-- Мы добавим больше здесь позже -->
</body>
</html>

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

  • ng-app="todoApp": Это говорит AngularJS, что это корневой элемент нашего приложения.
  • ng-controller="TodoController": Это specifies, который контроллер должен использоваться для этой части нашего приложения.
  • Мы включили AngularJS из CDN и включили наши файлы app.js и style.css.

Создание нашей AngularJS-программы

Теперь давайте создадим нашу AngularJS-программу в app.js:

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

app.controller('TodoController', function($scope) {
$scope.todos = [
{text: 'Изучить AngularJS', done: false},
{text: 'Создать приложение', done: false}
];

$scope.addTodo = function() {
$scope.todos.push({text: $scope.newTodo, done: false});
$scope.newTodo = '';
};
});

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

  • Мы создаем AngularJS модуль с именем 'todoApp'.
  • Мы определяем контроллер с именем 'TodoController'.
  • Внутри контроллера мы создаем массив элементов todo и функцию для добавления новых todo.
  • $scope - это как мост между нашим HTML и JavaScript. Он позволяет нам доступа к переменным и функциям в нашем HTML.

Отображение наших Todo

Давайте обновим наш HTML, чтобы отобразить наши todo:

<body ng-controller="TodoController">
<h1>Мой список Todo</h1>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span ng-class="{'done': todo.done}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="newTodo" placeholder="Добавить новый todo">
<input type="submit" value="Добавить">
</form>
</body>

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

  • ng-repeat="todo in todos": Это создает новый <li> для каждого todo в массиве todos.
  • ng-model="todo.done": Это связывает флажок с свойством 'done' нашего todo.
  • ng-class="{'done': todo.done}": Это применяет класс 'done', когда todo.done истинно.
  • {{todo.text}}: Это отображает текст нашего todo.
  • ng-submit="addTodo()": Это вызывает функцию addTodo, когда форма отправлена.
  • ng-model="newTodo": Это связывает ввод с переменной newTodo в контроллере.

Оформление нашего приложения

Наконец, давайте добавим базовое форматирование в наш style.css:

body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

.done {
text-decoration: line-through;
color: #888;
}

form {
margin-top: 20px;
}

input[type="text"] {
width: 70%;
padding: 5px;
}

input[type="submit"] {
padding: 5px 10px;
}

Этот CSS сделает наше приложение выглядеть чистым и организованным.

Заключение

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

Концепция Описание
ng-app Определяет корневой элемент AngularJS приложения
ng-controller Указывает, какой контроллер использовать для HTML элемента
ng-repeat Повторяет HTML элемент для каждого элемента в массиве
ng-model Связывает ввод, select или textarea с свойством на scope
ng-submit Указывает, какую функцию запустить, когда форма отправлена
ng-class Динамически применяет CSS классы

Помните, что обучение программированию похоже на изучение нового языка. Это требует времени и практики, но с Persistence, вы будете создавать сложные приложения в кратчайшие сроки. Продолжайте программировать, продолжайте учиться и, самое главное, получайте удовольствие!

Credits: Image by storyset

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