Angular 5 — создание нового компонента

Angular 5 — создание нового компонента

От автора: Сегодня мы рассмотрим, как создаются в Angular компоненты. Эта статья из серии – создание простого приложения на Angular 5.

Вторая часть — Angular 5 — первичная загрузка.

Прежде чем продолжить, внесем некоторые изменения в angular-cli.json.

Добавьте в apps.styles ссылку на styles.scss. Переименуйте файл styles.css в папке src в styles.scss. Мы будем использовать Sass препроцессор для стилей.

Измените defaults.styleExt на scss.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Удалите свойство 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.»

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Перед сервисами прописывается декоратор @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.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Курс по Angular 4 NgRx

Прямо сейчас посмотрите курс по Angular 4 NgRx

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree