От автора: Сегодня мы рассмотрим, как создаются в Angular компоненты. Эта статья из серии – создание простого приложения на Angular 5.
Вторая часть — Angular 5 — первичная загрузка.
Прежде чем продолжить, внесем некоторые изменения в angular-cli.json.
Добавьте в apps.styles ссылку на styles.scss. Переименуйте файл styles.css в папке src в styles.scss. Мы будем использовать Sass препроцессор для стилей.
Измените defaults.styleExt на scss.
Удалите свойство prefix.
Перейдем к компоненту. pokemon-list – наш первый компонент, который мы создадим. Компонент просто получает данные с удаленного URL (super-crud-api в нашем случае) и показывает список. Создайте новый компонент с помощью ng generate
ng generate component pokemon-list
Разберем класс компонента PokemonListComponent. Код:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'pokemon-list', templateUrl: './pokemon-list.component.html', styleUrls: ['./pokemon-list.component.scss']
})
export class PokemonListComponent implements OnInit { constructor() { } ngOnInit() { } }
Помимо основных функций компонентов, которые мы обсудили в последней статье, этот класс реализует интерфейс OnInit библиотеки Core.
«У каждого компонента есть жизненный цикл создания, обновления и уничтожения. В Angular есть хуки для подключения к происходящим событиям во время жизни компонента. Хуки можно реализовать с помощью соответствующего интерфейса хуков жизненного цикла из библиотеки Angular.»
ngOnInit – один такой хук, объявленный в интерфейсе OnInit (см. ниже). Вызывается один раз в самом начале.
export interface OnInit { ngOnInit(): void;
}
«Это эквивалент this.$onInit из компонентов angular1.x.» Во время выполнения OnInit мы будем получать данные о покемонах через запрос к API. При создании компонента через ng generate Angular CLI также импортировал его и добавил в массив declarations AppModule.
...
import { PokemonListComponent } from './pokemon-list/pokemon-list.component';
...
@NgModule({ declarations: [ ... PokemonListComponent ... ]
})
Теперь наш компонент должен выполнить запрос к API для получения данных с удаленного сервера, но компоненты не должны делать этого. Для этого есть services, а компонент может сосредоточиться на отображении данных и их передаче в другие компоненты при необходимости.
Создадим pokemon service, который будет получать данные из компонента pokemon-list. Создайте новый сервис pokemon –
ng generate service pokemon --module=app
команда сгенерирует новый класс PokemonService
import { Injectable } from '@angular/core'; @Injectable()
export class PokemonService { constructor() { } }
И добавьте класс сервиса выше в модуль приложения providers. «Позже нам понадобится добавить этот сервис в компонент, поэтому его необходимо добавить в систему вставки зависимостей. Один из способов – добавить сервис в массив providers.»
Перед сервисами прописывается декоратор @Injectable. Более подробно разберем его чуть позже. Для связи с удаленным сервером Angular использует класс HttpClient.
Чтобы использовать HttpClient в нашем сервисе (и в любом месте в приложении), необходимо импортировать HttpClientModule в AppModule.
...
import { HttpClientModule } from '@angular/common/http';
... @NgModule({ ... imports: [ ... HttpClientModule ] ...
})
export class AppModule { }
Теперь мы можем вставить HttpClient в конструктор pokemon service.
...
import { HttpClient } from '@angular/common/http'; @Injectable()
export class PokemonService { constructor(private http: HttpClient) { } }
Определим метод getPokemon в сервисе, который будет делать http запрос к super-crud api, получать данные о покемонах и возвращать общий Observable.
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable"; @Injectable()
export class PokemonService { private url = "https://super-crud.herokuapp.com/pokemon"; constructor(private http: HttpClient) {} getPokemons(): Observable<any> { return this.http.get<any>(this.url); }
}
В отличие сервиса $http в Angular 1.x, который возвращал promis, HttpClient возвращает Observable из rxjs.
Для получения данных ответа можно подписаться на observable, который можно считать эквивалентом promise. Конечно, работают они по-разному.
Вставьте PokemonService в конструктор PokemonListComponent и вызовите getPokemons на вставленном объекте во время выполнения OnInit
import { Component, OnInit } from "@angular/core";
import { PokemonService } from "../pokemon.service"; @Component({ selector: "pokemon-list", templateUrl: "./pokemon-list.component.html", styleUrls: ["./pokemon-list.component.scss"]
})
export class PokemonListComponent implements OnInit { private pokemonData: any; constructor(private svc: PokemonService) {} ngOnInit() { this.svc.getPokemons().subscribe(data => { this.pokemonData = data; }); }
}
Мы подписались на возвращаемый observable и присвоили полученные данные в приватную переменную pokemonData. Переменная доступна для назначения в шаблоне компонента.
Переберите в цикле список покемонов и выведите их имена в шаблон компонента pokemon-list.component.html.
<div *ngIf="pokemonData"> <ul> <li *ngFor="let pokemon of pokemonData.pokemons"> <span>{{pokemon.name}}</span> </li> </ul>
</div>
В примере выше мы использовали 2 директивы *ngIf и *ngFor.
*ngIf проверяет значение в переданной переменной, и если значение равно true, то создается DOM из шаблона. Эквивалент ng-if из Angular 1.x.
*ngFor – директива-повторитель, которая пробегает по списку элементов и оборачивает их во внутренний блок HTML для отображения в DOM. Эквивалент директивы ng-repeat в Angular 1.x.
Обновим корневой компонент, чтобы он показывал компонент pokemon-list.
<pokemon-list></pokemon-list>
Запустите в терминале ng serve и откройте http://localhost:4200. Должен открыться список имен покемонов. Мы создали наш первый компонент, но он не динамический. Далее нам нужно кликнуть на все имена и посмотреть детали. Перейдем к созданию компонента pokemon-details.
Автор: Manish
Источник: https://medium.com/
Редакция: Команда webformyself.
