MEAN Stack: создание приложения с Angular 2+ и угловым интерфейсом командной строки

1. List свойство, которое является массивом типа List . Он поддерживает копию списков, полученных с сервера. Используя методы привязки Angular, свойства компонента доступны внутри шаблона.
2. loadLists() загружает все списки с сервера. Здесь мы вызываем this.ListSev.getAllLists() и subscribe на него. getAllLists() — это сервисный метод (мы его еще не определили), который выполняет фактический запрос http.get и возвращает список; loadLists() затем загружает его в свойство списка Компонента.
3. deleteList(list) обрабатывает процедуру удаления, когда пользователь нажимает кнопку « Удалить» . Мы будем вызывать метод deleteList службы deleteList с id в качестве аргумента. Когда сервер отвечает, что удаление loadLists() успешно, мы вызываем метод loadLists() для обновления нашего представления.

 /*view-list.component.ts*/ import { Component, OnInit } from '@angular/core'; import { ListService } from '../services/list.service'; import { List } from '../models/List' @Component({ selector: 'app-view-list', templateUrl: './view-list.component.html', styleUrls: ['./view-list.component.css'] }) export class ViewListComponent implements OnInit { //lists propoerty which is an array of List type private lists: List[] = []; constructor(private listServ: ListService) { } ngOnInit() { //Load all list on init this.loadLists(); } public loadLists() { //Get all lists from server and update the lists property this.listServ.getAllLists().subscribe( response => this.lists = response,) } //deleteList. The deleted list is being filtered out using the .filter method public deleteList(list: List) { this.listServ.deleteList(list._id).subscribe( response => this.lists = this.lists.filter(lists => lists !== list),) } } 

Шаблон ( view-list.component.html ) должен иметь следующий код:

  <h2> Awesome Bucketlist App </h2> <!-- Table starts here --> <table id="table"> <thead> <tr> <th>Priority Level</th> <th>Title</th> <th>Description</th> <th> Delete </th> </tr> </thead> <tbody> <tr *ngFor="let list of lists"> <td>{{list.category}}</td> <td>{{list.title}}</td> <td>{{list.description}}</td> <td> <button type="button" (click)="deleteList(list); $event.stopPropagation();">Delete</button></td> </tr> </tbody> </table> <app-add-list> </app-add-list> 

Мы создали таблицу для отображения наших списков. Там есть немного необычного кода, который не является частью стандартного HTML. Angular имеет богатый синтаксис шаблона, который добавляет немного изюминки в ваши обычные HTML-файлы. Следующее является частью синтаксиса углового шаблона.

• Директива *ngFor позволяет вам просматривать свойство lists .
• Здесь list является переменной шаблона, тогда как lists является свойством компонента.
• Затем мы использовали синтаксис интерполяции Angular {{ }} чтобы связать свойство компонента с нашим шаблоном.
• Синтаксис привязки к событию используется для привязки события click к deleteList() .

Мы близки к тому, чтобы иметь работающее приложение со списком ведра. В настоящее время наш list.service.ts пуст, и нам нужно заполнить его, чтобы наше приложение работало. Как было отмечено ранее, у сервисов есть методы, которые связываются с сервером.

 /*list.service.ts*/ import { Injectable } from '@angular/core'; import { Http,Headers } from '@angular/http'; import {Observable} from 'rxjs/Observable'; import { List } from '../models/List' import 'rxjs/add/operator/map'; @Injectable() export class ListService { constructor(private http: Http) { } private serverApi= 'http://localhost:3000'; public getAllLists():Observable<List[]> { let URI = `${this.serverApi}/bucketlist/`; return this.http.get(URI) .map(res => res.json()) .map(res => <List[]>res.lists); } public deleteList(listId : string) { let URI = `${this.serverApi}/bucketlist/${listId}`; let headers = new Headers; headers.append('Content-Type', 'application/json'); return this.http.delete(URI, {headers}) .map(res => res.json()); } } 

Базовый процесс довольно прост для обоих методов:

1. мы строим URL на основе адреса нашего сервера
2. мы создаем новые заголовки и добавляем их с помощью { Content-Type: application/json }
3. мы выполняем фактический http.get/http.delete по URL
4. Мы преобразуем ответ в формате json .

Если вы не знакомы со службами написания, которые взаимодействуют с сервером, я бы порекомендовал прочитать учебник по Angular и RxJS: создание службы API для связи с REST Backend .

Зайдите на http: // localhost: 4200 /, чтобы убедиться, что приложение работает. Он должен иметь таблицу, в которой отображаются все списки, которые мы создали ранее.

Компонент Add-List

Мы пропускаем функцию, хотя. В нашем приложении отсутствует механизм добавления / создания новых списков и автоматического обновления ViewListComponent при создании списка. Давайте заполнить эту пустоту.

AddListComponent — это место, куда мы поместим код для нашей HTML-формы.

 <div class="container"> <form (ngSubmit)="onSubmit()"> <div> <label for="title">Title</label> <input type="text" [(ngModel)]="newList.title" name="title" required> </div> <div> <label for="category">Select Category</label> <select [(ngModel)]="newList.category" name = "category" > <option value="High">High Priority</option> <option value="Medium">Medium Priority</option> <option value="Low">Low Prioirty</option> </select> </div> <div> <label for="description">description</label> <input type="text" [(ngModel)]="newList.description" name="description" required> </div> <button type="submit">Submit</button> </form> </div> 

Внутри нашего шаблона вы можете увидеть несколько примеров использования [(ngModel)] . Странно выглядящий синтаксис — это директива, которая реализует двустороннее связывание в Angular. Двухстороннее связывание особенно полезно, когда вам нужно обновить свойства компонента из вашего представления и наоборот.

Мы используем механизм привязки событий ( ngSubmit ) для вызова onSubmit() когда пользователь отправляет форму. Метод определен внутри нашего компонента.

 /*add-list.component.ts*/ import { Component, OnInit } from '@angular/core'; import { List } from '../models/List'; import { ListService } from '../services/list.service'; @Component({ selector: 'app-add-list', templateUrl: './add-list.component.html', styleUrls: ['./add-list.component.css'] }) export class AddListComponent implements OnInit { private newList :List; constructor(private listServ: ListService) { } ngOnInit() { this.newList = { title: '', category:'', description:'', _id:'' } } public onSubmit() { this.listServ.addList(this.newList).subscribe( response=> { if(response.success== true) //If success, update the view-list component }, ); } } 

Внутри onSubmit() мы вызываем метод addList для addList который отправляет запрос http.post на сервер. Давайте обновим наш сервис списков, чтобы это произошло.

 /*list.service.ts*/ public addList(list: List) { let URI = `${this.serverApi}/bucketlist/`; let headers = new Headers; let body = JSON.stringify({title: list.title, description: list.description, category: list.category}); console.log(body); headers.append('Content-Type', 'application/json'); return this.http.post(URI, body ,{headers: headers}) .map(res => res.json()); } } 

Если сервер возвращает { success: true } , нам нужно обновить наши списки и включить новый список в нашу таблицу.

Однако проблема здесь заключается в том, что свойство lists находится внутри компонента ViewList . Нам нужно уведомить родительский компонент о том, что список необходимо обновить через событие. Для этого мы используем @Output декоратор @Output .

Во-первых, вам нужно импортировать Output и EventEmitter из @angular/core .

 import { Component, OnInit, Output, EventEmitter } from '@angular/core'; 

Затем объявите @Output декоратором @Output .

 @Output() addList: EventEmitter<List> = new EventEmitter<List>(); 

Если сервер возвращает success: true , addList событие addList .

 public onSubmit() { console.log(this.newList.category); this.listServ.addList(this.newList).subscribe( response=> { console.log(response); if(response.success== true) this.addList.emit(this.newList); }, ); } 

Обновите ваш viewlist.component.html с помощью этого кода.

 <app-add-list (addList)='onAddList($event)'> </app-add-list> 

И наконец, добавьте метод с именем onAddList() который объединяет вновь добавленный список в свойство lists .

 public onAddList(newList) { this.lists = this.lists.concat(newList); } 

Последние штрихи

Я добавил несколько стилей с bootswatch.com, чтобы наше приложение со списком корзин выглядело великолепно.

Создайте свое приложение, используя:

 ng build 

Как упоминалось ранее, артефакты сборки будут храниться в общедоступном каталоге. Запустите npm start из корневого каталога проекта MEAN. Теперь у вас должно быть запущено работающее приложение стека MEAN по адресу http: // localhost: 3000 /

Завершение

В этом руководстве мы рассмотрели много вопросов, создавая стековое приложение MEAN с нуля. Вот краткое изложение того, что мы сделали в этом уроке. Мы:

• создал серверную часть приложения MEAN с использованием Express и MongoDB
• написал код для маршрутов GET / POST и DELETE
• сгенерировал новый проект Angular с использованием Angular CLI
• разработал два новых компонента, AddList и ViewList
• реализовал сервис приложения, в котором размещена логика взаимодействия с сервером.

И это все на данный момент. Надеюсь, вам понравилось читать. Я хотел бы прочитать ваши мысли и отзывы в комментариях ниже!

Рекомендуемые курсы

Ultimate Angular: AngularJS, Angular и TypeScript

Тодд девиз

Проводимые экспертами онлайн-курсы AngularJS, Angular и TypeScript для отдельных лиц и команд. Используйте код купона «SITEPOINT» при оформлении заказа, чтобы получить скидку 25% .

Эта статья была рецензирована Юргеном Ван де Моером . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!