Сегодня я создам небольшое веб-приложение списка дел с Angular 4.x с самого начала.
Создание проекта Angular
В качестве первого шага мы создадим новый проект Angular 4.x. Как видно из веб-сайта Angular, вы должны предоставить следующие требования, чтобы продолжить:
Убедитесь, что вы используете хотя бы узел
6.9.x
и npm3.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