В первой части серии мы говорили о настройке нашей угловой среды и запуске ее на желаемом порту. Если вы это пропустили, вы можете прочитать больше здесь. В этой части мы создадим простой список сотрудников компании, и они отправят электронное письмо. Мы бы использовали это простое приложение, чтобы узнать следующее
- Единая привязка данных
- Отправить форму
- Типы данных
- Общие модули Angular
Во-первых, позвольте мне определить следующие термины, перечисленные выше
Привязка одиночных данных. Проще говоря, это способ передачи переменных из вашего компонента машинописного текста в компонент HTML и обновления HTML DOM всякий раз, когда переменная в вашем машинописном тексте изменяется.
Отправка формы: это способ получить данные от пользователя и отправить их в центральный пул (в нашем случае мы будем использовать массив).
Типы данных: определяет тип данных, который будет принимать наша переменная, например, строка, массив ‹number›, объект, любой и т. д.
Общие модули Angular. Это модуль, содержащий директивы * ngFor, * ngIf и * ngSwitch. Название директив говорит само за себя. * NgFor используется для перебора коллекции элементов, * ngIf принимает тип данных true или false и показывает DOM, если он истинен, но скрывает его, если false, а * ngSwitch использует знакомый нам случай переключения.
А теперь давайте код
Теперь откройте свой src / app / app.component.html и очистите все внутри, кроме
<router-outlet></router-outlet>
Эта розетка маршрутизатора важна для нашей маршрутизации в будущем, поэтому мы хотим ее сохранить.
Мы также хотели бы создать новый компонент и сделать его нашей целевой страницей. Angular делает это для нас очень простым. Просто откройте терминал в каталоге своего проекта и введите команду
ng g c home
Это создаст домашний компонент в вашей папке src / app и добавит его как объявление в ваш app.module.ts это позволит модулю узнать, что у вас есть новый компонент. Если вы откроете домашнюю папку, вы увидите пару созданных файлов. В файле home.component.css находится весь наш CSS для домашнего компонента, home.component.html содержит наш домашний компонент Html, home.component.spec.ts предназначен для тестирования нашего домашнего компонента, а home.component.ts - это машинописный текст для нашего домашнего компонента, в котором идет вся наша логика.
Теперь давайте сделаем это нашей целевой страницей. Первое, что нужно сделать, - это импортировать домашний компонент в ваш src / app / app-routing.module.ts и добавить его в качестве базового пути вот так
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{
path:'',
component:HomeComponent
}
];
Это сообщит Angular, что мы хотим загрузить этот компонент, когда мы находимся в базовом URL-адресе нашего приложения. Если все работает нормально, вы должны увидеть сообщение «Дом работает!» в вашем браузере.
А теперь давайте приступим к составлению нашего списка сотрудников, не так ли?
Теперь откройте свой home.component.ts и объявите переменную, которая будет содержать наш список. Поскольку эта переменная будет содержать список объектов, мы говорим
list:Array<object>
Итак, теперь Typescript знает, что в этом массиве разрешены только объекты. После этого мы увидим очень популярный ngOnInt. Это ловушка жизненного цикла Angular, которая выполняет код внутри фигурных скобок при каждой загрузке компонента. И, конечно же, мы хотим видеть наш список при загрузке компонента. Итак, мы добавляем в него наш массив объектов следующим образом:
ngOnInit() {
this.list=[
{
name:"Chidi Emma",
email:"[email protected]"
},
{
name:"Micheal Nwosu",
email:"[email protected]"
},
{
name:"Bisola Nkiru",
email:"[email protected]"
},
]
}
Если все пойдет правильно, ваш файл home.component.ts должен выглядеть следующим образом
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
list:Array<object>
constructor() { }
ngOnInit() {
this.list=[
{
name:"Chidi Emma",
email:"[email protected]"
},
{
name:"Micheal Nwosu",
email:"[email protected]"
},
{
name:"Bisola Nkiru",
email:"[email protected]"
},
]
}
}
Теперь давайте воспользуемся нашей директивой * ngFor, чтобы убедиться, что мы видим весь список в нашем браузере. И самый простой способ сделать это - написать следующее в нашем home.component.html.
<div>
<ul *ngFor="let i of list">
<li>
Name:{{i.name}}
Email:{{i.email}}
</li>
</ul>
</div>
Если все пойдет хорошо, мы должны увидеть список имен и адресов электронной почты в нашем браузере. И вот так у нас есть первое приложение Angular (давайте устроим вечеринку).
Теперь давайте добавим возможность добавления новых имен в список через форму. И в этом случае мы бы использовали реактивную форму Angular.
Первый шаг - добавить модуль формы в наш app.module.ts и добавить его в наш импорт как таковой.
//other code here
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports:[
//other items here
FormsModule,
ReactiveFormsModule
]
Это позволит angular узнать, что мы хотим использовать эту форму в нашем компоненте. Теперь, когда у нас это есть, давайте продолжим и воспользуемся формой в нашем home.component.ts
- импортируйте следующее в свой home.component.ts
import { FormControl, Validators, FormGroup, FormBuilder} from '@angular/forms';
2. Добавьте конструктор форм в свой конструктор как таковой.
constructor(private fb:FormBuilder){}
Это подготовит объект построителя формы для использования в нашем классе.
3. Создайте переменную с именем myForm, которая будет содержать нашу группу форм так же, как мы делали для списка, но она будет иметь тип данных FormGroup.
myForm:FormGroup
4. Создайте экземпляр формы при инициализации и добавьте проверку.
this.myForm=this.fb.group({
name:['', Validators.required],
email:['', [Validators.email, Validators.required]]
})
Пустая цитата сообщает, что форма будет пустой при инициализации, а проверка имени говорит, что имя является обязательным полем, в то время как в электронном письме говорится, что электронное письмо также является обязательным полем, которое должно быть действительным. Это нужно добавить в ngOnInt
5. Давайте создадим функцию, которая будет вызываться при отправке формы (она должна быть вне ngOnint).
submit(){
var formValue=this.myForm.value;
this.list.push(formValue)
}
Это берет значение из формы и добавляет его в наш массив
6. Сообщим нашему app.component.html об этой форме и функции отправки. Создайте форму следующим образом:
<form (ngSubmit)="submit()" [formGroup]="myForm"> <input type="text" formControlName="name" placeholder="name"> <input type="email" formControlName="email" placeholder="email"> <button [disabled]="myForm.invalid">submit</button> </form>
Кажется, здесь много всего происходит, поэтому позвольте мне объяснить. ngSubmit - это то, что сообщает форме, какую функцию следует вызывать, когда она хочет отправить, formGroup - это то, что связывает форму Html с группой форм myForm в нашем машинописном тексте, formControlName связывает ввод формы с именами и проверкой, которую мы указали в нашем машинописном тексте, в то время как disabled отключает кнопку до тех пор, пока проверки не будут выполнены
Если все работает хорошо, мы должны добавить имена в список, и он автоматически обновится в DOM без перезагрузки страницы. В этом сила односторонней привязки данных.
Поскольку мы обновили наш массив, данные также будут отражены в нашем списке.
Теперь мы можем хорошо разбираться во многих очень важных концепциях Angular. В свободное время обновите код и дайте ему возможность удалять имена из списка. Вы можете задать вопросы в комментарии.
До скорого
