Сегодня я создам небольшое веб-приложение списка дел с Angular 4.x с самого начала.

Создание проекта Angular

В качестве первого шага мы создадим новый проект Angular 4.x. Как видно из веб-сайта Angular, вы должны предоставить следующие требования, чтобы продолжить:

Убедитесь, что вы используете хотя бы узел 6.9.x и npm 3.x.x, запустив node -v и npm -v в окне терминала/консоли. Старые версии выдают ошибки, но новые версии в порядке.

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

npm install -g @angular/cli

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

ng new todo-app

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

Структура проекта

Когда мы посмотрим на папку проекта, мы увидим структуру проекта ниже:

Я не буду объяснять назначение всех этих файлов. Если вы хотите изучить их, вы можете заглянуть на веб-сайт Angular здесь.

Текущий проект

Теперь мы запустим наш проект, чтобы посмотреть, что произойдет, запустив код ниже:

cd my-app //change directory to project's folder
ng serve — open

Как видно с веб-сайта Angular; вот что делает команда ng-serve:

Команда ng serve запускает сервер, просматривает ваши файлы и перестраивает приложение по мере внесения изменений в эти файлы.

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

Проекты Angular 4.x состоят из простых частей, называемых компонентами. Эти компоненты формируют страницу. Если вы собираетесь использовать в своем проекте повторяющиеся части, такие как заголовки, нижние колонтитулы, боковые панели и т. д., я предлагаю вам использовать их как отдельные компоненты. Когда мы создаем наш проект Angular в первый раз, он создает для нас компонент по умолчанию с именем AppComponent.

Каждый компонент в Angular имеет свой собственный файл css для стилей, файл html и файл ts для нашего машинописного текста — коды javascript.

Начнем кодировать

Теперь мы отредактируем наш файл app.component.html, как показано ниже:

Если я объясню, что я сделал здесь:

<input type=”text” id=”myInput” placeholder=”Title…” [(ngModel)]=”txtItem” name=”txtItem”>
 <span (click)=”addItem()” class=”addBtn”>Add</span>

Здесь у нас есть ввод текста, и он принимает модель с именем txtItem. Он сохраняет текстовое значение нашего элемента. И у нас есть кнопка для добавления нового элемента в наш список дел. Он имеет функцию addItem.

*ngFor=”let item of list;let i=index”

У нас есть список ul, и мы повторяем внутри этого списка столько же, сколько пунктов в нашем списке задач. Здесь list — наш массив элементов.

(click)=”checkItem(item)”

Чтобы проверить элемент, когда мы нажимаем на элемент, у нас есть функция checkItem, которая принимает элемент в качестве параметра.

<span class=”close” (click)=”deleteItem(i)”>×</span>

Чтобы удалить элемент, у нас есть диапазон, и он принимает функцию deleteItem с параметром индекса нашего массива списка дел.

После этого мы отредактируем наш файл app.component.css для оформления нашей HTML-страницы, как показано ниже:

Затем мы редактируем наш файл app.component.ts, как показано ниже:

interface TodoList {
 text: string;
 checked: boolean;
}

Здесь мы создали интерфейс в качестве модели нашего списка задач. Он имеет текстовое свойство в виде строки и проверенное свойство для сохранения состояния элемента.

 list:TodoList[];
 txtItem:””;
 constructor() {
 this.list=[];
 }

Здесь мы объявили нашу переменную списка как массив модели TodoList и внутри нашего конструктора мы инициализировали его как пустой массив, потому что у нас нет элементов в начале приложения.

addItem()
{
 this.list.push({text:this.txtItem,checked:false});
}
checkItem(item){
 item.checked=!item.checked;
}
deleteItem(index){
 this.list.splice(index,1);
}

В функции addItem мы помещаем новый элемент в наш список с текстом, который привязан к нашей переменной txtItem в виде строки.

В функции checkItem мы изменяем состояние элемента. Если он отмечен, он будет снят, если не отмечен, он будет проверен.

В функции deleteItem мы удаляем элемент с заданным индексом из нашего массива списка.

Наконец, мы импортируем FormsModule в файл app.module.ts, чтобы использовать объявление ngModel в наших входных данных внутри html-файла:

import { FormsModule } from ‘@angular/forms’;

Наш файл app.module.ts будет таким:

Когда мы запустим наш проект, мы увидим такой экран:

Вы можете добавить новый элемент, удалить элемент или отметить элемент как выполненный.

Вот и все! Если вы хотите увидеть исходный код проекта, вы можете взять его здесь.

Бонус: хорошая Angular IDE