Эта статья посвящена созданию простого приложения списка задач с использованием Angular 5.
У нас есть изображение вверху, заголовок, текстовое поле для ввода задачи и кнопка для добавления введенной задачи в список.
В этой истории мы создаем только однокомпонентное приложение.
Итак, давайте начнем,
Создайте новое приложение Angular с помощью Angular CLI, это создаст стартовый проект, с которого мы сможем начать разработку нашего приложения.
Откройте окно командной строки и перейдите к любой папке (щелкните правой кнопкой мыши, удерживая нажатой клавишу Shift, на любой папке, чтобы запустить оттуда командную строку)
новое приложение для моей задачи
Это создаст новое угловое приложение в выбранном каталоге.
установка нпм
Это установит все необходимые модули для приложения.
Установить Bootstrap
npm install — сохранить бутстрап
Добавьте Bootstrap в angular.cli.json
…..
«стили»: [
«../node_modules/bootstrap/dist/css/bootstrap.min.css», //Путь начальной загрузки
«стили.css»
]
……
Откройте index.html, где у нас есть ‹app-root›‹/app-root›, где будет загружено наше приложение.
Откройте редактор по вашему выбору, я использую Visual Studio Code
Это файлы, сгенерированные angular cli
main.ts — файл, с которого начинается выполнение
платформаBrowserDynamic().bootstrapModule(AppModule)
AppModule — это корневой модуль нашего приложения, который будет содержать наши компоненты (компоненты — это блоки, имеющие бизнес-логику).
Для простоты у нас есть только один компонент в нашем приложении.
Внутри AppModule у нас есть
импортировать {BrowserModule} из ‘@angular/platform-browser’;
импортировать {NgModule} из ‘@angular/core’;
импортировать {FormsModule} из ‘@angular/forms’
импортировать {AppComponent} из ‘./app.component’;
@NgModule({
декларации: [
AppComponent
],
импорт: [
БраузерМодуль,
ФормыМодуль
],
провайдеры: [],
начальная загрузка: [AppComponent]
})
экспортировать класс AppModule { }
Импортируйте FormsModule, чтобы включить двустороннюю привязку данных, и добавьте его в массив импорта.
У нас есть наш AppComponent, определенный в объявлениях, который является нашим единственным компонентом.
импортировать {Компонент} из ‘@angular/core’;
@Компонент({
селектор: «приложение-root-start»,
URL-адрес шаблона: ‘./app.component.html’,
URL-адреса стилей: [‘./app.component.css’]
})
экспортный класс AppComponent {
имя_задачи=""; // Содержит имя задачи, введенное в текстовое поле
clipboardImage="https://static.appvn.com/a/uploads/thumbnails/112015/clipboard-manager-pro_icon.png;
//Изображение отображается вверху
items=[] //содержит список задач
добавитьItemToList=()=›{
//Синтаксис ES6 аналогичен функции addItemToList(){….}
//Проверяем, пусто ли имя задачи
если (это.taskName.trim (). длина == 0) {
alert("Пожалуйста, введите название задачи");
возвращение
}
//Добавляем нашу задачу в массив задач
this.items.push(this.taskName);
}
}
Этот компонент отвечает за добавление и отображение задач.
‹! — Содержимое ниже является лишь заполнителем и может быть заменено. →
‹класс div="строка"›
‹div class="col-md-2›‹/div›
‹класс div=”col-md-4›
‹h6 style="margin-top:150px;"›
‹img [src]="clipboardImage" style="width:120px;height:120px;"/›//Привязка свойства
Добро пожаловать в {{ «Диспетчер задач» }}!
//Интерполяция строк
</h6>
‹input class=”form-control” type=”text” [(ngModel)]=”taskName” placeholder=”Enter Task Name”/›
//Двусторонняя привязка данных
‹div style=”height: 10px;text-align: end”›‹/div›
‹класс кнопки = ”btn btn-lg btn-success” стиль = ”margin-left:510px;” (клик)="addItemToList()"›Добавить задачу‹/кнопка›
//Обработка событий
‹/дел›
‹класс div=”col-md-1›‹/div›
‹div class="col-md-4 style="margin-top:50px;"›
//Привязка свойства
‹div class="panel panel-default" [скрытый]="items.length==0›
‹div class="заголовок панели"›
‹h3 class="panel-title"›Мои задачи‹/h3›
‹/дел›
‹div class="панель-корпус"›
‹ul class="list-group"›
//Список предметов
‹li *ngFor="let item of items" class="list-group-item"›{{item}}‹/li›
</ul>
‹/дел›
‹/дел›
‹/дел›
‹класс div=”col-md-1›‹/div›
‹/дел›
Мы используем привязку свойств
‹img [src]="clipboardImage" style="width:120px;height:120px;"/›//Привязка свойства
[src] в квадратных скобках означает, что значение исходного атрибута для изображения будет получено из нашего компонента, где мы определили
clipboardImage="https://static.appvn.com/a/uploads/thumbnails/112015/clipboard-manager-pro_icon.png;
‹input class=”form-control” type=”text” [(ngModel)]=”taskName” placeholder=”Enter Task Name”/›
Символ [()] представляет собой двустороннюю привязку данных, данные будут обновляться как в представлении, так и в контроллере (компоненте).
вы можете поместить ‹p›{{taskName}}‹/p› для предварительного просмотра привязки данных, имя задачи будет обновляться в реальном времени при изменении данных ввода
‹класс кнопки = ”btn btn-lg btn-success” стиль = ”margin-left:510px;” (клик)="addItemToList()"›Добавить задачу‹/кнопка›
Мы используем () для обозначения событий (щелчок) обозначает событие щелчка, которое запускает функцию addItemToList, которая затем добавляет его в список элементов.
‹li *ngFor="let item of items" class="list-group-item"›{{item}}‹/li›
Это отобразит все наши задачи из предметов
- ngFor обозначает структурное изменение, так как в items может быть несколько элементов или не быть ни одного. let определяет локальную переменную, которая выводит значение элемента
Вы можете запустить замену содержимого app.component.html и app.component.ts вышеуказанным содержимым и запустить
нг служить
