Угловое приложение состоит из компонентов. В приложении Angular компонент состоит из шаблона HTML и класса компонента. Из официальных документов:
Компоненты являются самым основным строительным блоком пользовательского интерфейса в приложении Angular. Приложение Angular — это дерево компонентов Angular. Угловые компоненты являются подмножеством директив. В отличие от директив, компоненты всегда имеют шаблон, и для каждого элемента в шаблоне может быть создан только один компонент.
Из этого урока вы узнаете, как начать работу с менеджером списка покупок с помощью Angular.
Начиная
Вам понадобится Node version> 6.9.x и Node Package Manager (npm)> 3.xx После того, как вы получите оба варианта, попробуйте установить Angular CLI, используя npm .
|
1
|
npm install -g @angular/cli
|
После установки Angular CLI попробуйте создать проект, используя тот же.
|
1
|
ng new AngularGrocery —skip-npm
|
Приведенная выше команда создаст структуру проекта. Перейдите в каталог проекта и установите необходимые зависимости.
|
1
2
|
cd AngularGrocery
npm install
|
Чтобы запустить веб-сервер приложения, введите следующую команду:
|
1
|
ng serve
|
После запуска сервера приложений укажите в браузере адрес http: // localhost: 4200 /, и вы сможете просмотреть приложение по умолчанию.
Структура приложения
На приведенном выше рисунке показана структура приложения для нашего менеджера списка покупок. Папка src содержит исходный код для приложения по умолчанию. Папка app внутри папки src содержит код TypeScript. index.html внутри папки src — это основной файл HTML, в котором отображаются созданные компоненты Angular.
Создание представления Добавить элементы
По умолчанию в приложении есть компонент app-root . Давайте создадим новый компонент под названием app-grocery для создания нашего приложения для управления продуктами. Внутри папки приложения создайте файл с именем app.grocery.ts .
Импортируйте модуль Component из angular-core .
|
1
|
import { Component } from ‘@angular/core’;
|
Вы будете использовать Bootstrap для разработки компонента. Скачайте и включите пакет Bootstrap с официального сайта . Храните файлы в папке src/assets .
Давайте определим компонент внутри файла app.grocery.ts . Компонент будет иметь три свойства: selector , template и styleUrls . selector указывает, каким образом компонент будет использоваться. template определяет HTML, который будет отображаться при использовании определенного селектора. styleUrls определяет URL стилей, используемых в компоненте.
Внутри app.grocery.ts после импорта модуля компонента определите компонент app-grocery app.grocery.ts , как показано ниже:
|
1
2
3
4
5
6
7
|
@Component({
selector: ‘app-grocery’,
templateUrl: ‘./app.grocery.html’,
styleUrls: [
‘../assets/css/bootstrap.min.css’
]
})
|
Как видно из приведенного выше кода, компонент использует шаблон с именем app.grocery.html . Создайте файл с именем app.grocery.html в папке src/app . Добавьте следующий код в файл app.grocery.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<div>
<h2> Grocery list manager </h2>
<div class=»row»>
<div class=»col-xs-6 col-md-4″>
<div class=»input-group»>
<input type=»text» class=»form-control» placeholder=»enter grocery items» id=»txtSearch» />
<div class=»input-group-btn»>
<button class=»btn btn-primary» type=»button»>
<span class=»glyphicon glyphicon-ok»>
</button>
</div>
</div>
</div>
</div>
</div>
|
В файле app.grocery.ts добавьте класс GroceryComponent для экспорта.
|
1
2
3
|
export class GroceryComponent {
}
|
Вам необходимо импортировать недавно созданный компонент в app.module.ts прежде чем вы сможете его использовать. Импортируйте GroceryComponent в app.module.ts .
|
1
|
import { GroceryComponent } from ‘./app.grocery’;
|
app.module.ts и app.module.ts только что созданный компонент Grocery в файл app.module.ts .
|
01
02
03
04
05
06
07
08
09
10
11
12
|
@NgModule({
declarations: [
GroceryComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [GroceryComponent]
})
|
Теперь все готово для использования компонента Grocery на странице index.html . Удалите компонент по умолчанию со страницы index.html и добавьте следующий HTML-код:
|
1
|
<app-grocery>Loading…</app-grocery>
|
Сохраните вышеуказанные изменения и перезагрузите сервер. Перейдите в браузере по адресу http: // localhost: 4200 /, и вы увидите компонент Grocery.
Добавление предметов
Как только элемент введен в текстовое поле ввода, вам необходимо прочитать его и сохранить в виде списка. Чтобы прочитать ввод, вы будете использовать ngModel , который свяжет его с переменной. Добавьте ngModel в текстовое поле ввода.
|
1
|
<input type=»text» class=»form-control» placeholder=»enter grocery items» id=»txtSearch» [(ngModel)]=»task» />
|
Каждый раз, когда в текстовое поле ввода вводится некоторый текст, переменная task обновляется соответствующим образом. Определите переменную task внутри GroceryComponent в файле app.grocery.ts . Добавьте переменную под названием tasks чтобы сохранить набор введенных задач.
|
1
2
|
task: string;
tasks = [];
|
При нажатии кнопки ОК задача будет добавлена в список сбора tasks который вы определили в GroceryComponent . Определите метод GroceryComponent внутри GroceryComponent для обработки нажатия кнопки ОК. Вот как это выглядит:
|
1
2
3
4
|
onClick(){
this.tasks.push({name: this.task});
this.task = »;
}
|
Добавьте событие click к кнопке OK, как показано:
|
1
2
3
|
<button class=»btn btn-primary» type=»button» (click)=»onClick()»>
<span class=»glyphicon glyphicon-ok»>
</button>
|
При нажатии кнопки ОК новая задача добавляется в список сбора tasks . Переменная task также сбрасывается, чтобы очистить текстовое поле ввода.
Сохраните вышеуказанные изменения и при входе в task и нажатии кнопки ОК задача добавляется в коллекцию tasks . Чтобы отобразить коллекцию задач, добавьте диапазон внутри app.grocery.html .
|
1
2
3
|
<span>
{{tasks |
|
Введите задачу в поле ввода и нажмите кнопку ОК . На странице будет отображаться переменная tasks виде JSON.
Вот полный файл app.grocery.ts :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-grocery’,
templateUrl: ‘./app.grocery.html’,
styleUrls: [
‘../assets/css/bootstrap.min.css’
]
})
export class GroceryComponent {
task: string;
tasks = [];
onClick(){
this.tasks.push({name: this.task});
this.task = »;
}
}
|
Отображение добавленных предметов
Теперь, поскольку у вас есть добавленные элементы в переменной tasks , вы можете использовать ее для отображения задач. Вы будете использовать директиву NgFor для итерации коллекции tasks и динамически создавать HTML для отображения задач. Вы будете отображать задачу внутри элемента UL и повторять LI, используя директиву NgFor . Вот как это выглядит:
|
1
2
3
4
5
|
<ul class=»list-group»>
<li *ngFor=»let task of tasks» class=»list-group-item»>
<span> {{ task.name }}
</li>
</ul>
|
Как видно из приведенного выше кода, вы перебираете переменную tasks и динамически создаете элемент LI и span. Вот как выглядит файл шаблона app.grocery.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<div>
<h2> Grocery list manager </h2>
<div class=»row»>
<div class=»col-xs-6 col-md-4″>
<div class=»input-group»>
<input type=»text» class=»form-control» placeholder=»enter grocery items» [(ngModel)]=»task» />
<div class=»input-group-btn»>
<button class=»btn btn-primary» type=»button» (click)=»onClick()»>
<span class=»glyphicon glyphicon-ok»>
</button>
</div>
</div>
</div>
</div>
<br />
<ul class=»list-group»>
<li *ngFor=»let task of tasks» class=»list-group-item»>
<span> {{ task.name }}
</li>
</ul>
</div>
|
Сохраните вышеуказанные изменения и перезагрузите сервер. В браузере укажите http: // localhost: 4200 /, введите задачу и нажмите кнопку « ОК» . Каждая добавленная задача будет отображаться в списке ниже.
Завершение
В этом уроке по Angular вы увидели, как начать создавать менеджер списков продуктов с помощью Angular. Вы узнали, как создать представление для компонента «Бакалея», добавить элементы в список «Бакалея» и отобразить добавленные элементы.
В следующей части этого руководства вы реализуете функции для маркировки завершенных элементов, архивирования завершенных элементов и удаления добавленных элементов.
Исходный код из этого урока доступен на GitHub . Дайте нам знать ваши предложения в комментариях ниже.