Разблокировка основ Angular: подробное руководство для начинающих по освоению основ

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

Давайте подробнее рассмотрим каждый из них:

Компоненты

Компоненты — это самые основные строительные блоки приложения Angular. Они представляют собой часть пользовательского интерфейса, такую ​​как верхний и нижний колонтитулы или область основного содержимого. Вот пример простого компонента в Angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  template: `
    <header>
      <nav>
        <a routerLink="/home">Home</a>
        <a routerLink="/about">About</a>
        <a routerLink="/contact">Contact</a>
      </nav>
    </header>
  `
})
export class HeaderComponent { }

В этом примере мы сначала импортируем модуль Component из ядра Angular. Затем мы используем декоратор @Component, чтобы определить наш компонент. Свойство selector указывает имя компонента, а свойство template указывает HTML-код, который должен отображаться на экране.

Услуги

Службы — это способ обмена данными и функциями между компонентами. В Angular службы отвечают за вызовы API, обработку вычислений, управление состоянием и обмен данными.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('https://api.example.com/data');
  }
}

Сначала мы импортируем модуль Injectable из ядра Angular и модуль HttpClient для выполнения вызовов API. Затем мы используем декоратор @Injectable, чтобы определить наш сервис. Свойство createdIn указывает, что эта служба должна быть доступна для всего приложения.

Затем мы определяем конструктор, который принимает HttpClient в качестве параметра. Это позволяет нам совершать вызовы API из нашего сервиса. Наконец, мы определяем метод getData(), который использует HttpClient для получения данных из API.

Директивы

Директивы — это способ добавить пользовательское поведение к элементу DOM. Их можно использовать для таких задач, как скрытие или отображение элементов, добавление стилей или добавление прослушивателей событий. Вот пример простой директивы в Angular:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }
}

В этом примере мы сначала импортируем модули Directive, ElementRef и Renderer2 из ядра Angular. Затем мы используем декоратор @Directive, чтобы определить нашу директиву. Свойство selector указывает имя директивы, которую можно использовать в HTML для применения пользовательского поведения.

Затем мы определяем конструктор, который принимает ElementRef и Renderer2 в качестве параметров. ElementRef позволяет нам получить доступ к элементу DOM, к которому прикреплена директива, а Renderer2 позволяет нам манипулировать элементом DOM.

В этом примере мы используем средство визуализации, чтобы установить желтый цвет фона элемента DOM. Таким образом, всякий раз, когда эта директива применяется к элементу, он становится желтым.

Внедрение зависимости

Внедрение зависимостей — это мощная функция Angular, которая позволяет компонентам и службам получать доступ к общим данным, хранящимся в службах, без необходимости их непосредственного создания. Это упрощает написание модульного повторно используемого кода и тестирование отдельных частей приложения. Вот пример компонента, использующего сервис с внедрением зависимостей:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-home',
  template: `
    <h2>Home Page</h2>
    <p>{{ data }}</p>
  `
})
export class HomeComponent {

  data: any;

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

В этом примере мы импортируем модуль Component из ядра Angular и DataService из нашего компонента. Затем мы используем декоратор @Component, чтобы определить наш компонент. Свойство selector и свойство template аналогичны нашему предыдущему примеру компонента.

Далее мы определяем конструктор, который принимает DataService в качестве параметра. Делая это, мы можем использовать DataService внутри нашего компонента, не создавая его напрямую. В этом примере мы используем метод getData() из нашего DataService для получения данных и их отображения на экране.

Хорошие узоры:

Презентация против компонентов контейнера

Шаблон «контейнер против компонента представления» в Angular относится к разделению обязанностей между двумя типами компонентов: компонентами представления и компонентами-контейнерами.

Компонент представления ориентирован на визуальное представление данных и отвечает за отображение информации пользователю. Обычно он получает данные через входы и часто не имеет состояния.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-display-data',
  template: `
    <p>{{ data }}</p>
  `
})
export class DisplayDataComponent {
  @Input() data: any;
}

Компонент-контейнер, с другой стороны, связан с управлением данными и состоянием приложения. Он предоставляет данные компоненту представления через выходные данные и часто имеет состояние.

import { Component } from '@angular/core';

@Component({
  selector: 'app-container',
  template: `
    <app-display-data [data]="data"></app-display-data>
  `
})
export class ContainerComponent implements OnInit {
  data = '';

  constructor(private dataService: DataService) {
  }

  ngOnInit {
    this.data = this.dataService.getData();
  }
}

В этом примере ContainerComponent отвечает за выборку управления данными и состоянием приложения и предоставление их DisplayDataComponent посредством ввода данных. DisplayDataComponent фокусируется только на визуальном представлении данных и отображает их пользователю. Этот шаблон позволяет лучше разделить проблемы и упрощает поддержку и тестирование приложения. Кроме того, компоненты контейнера отвечают за выборку данных из служб для предоставления компонентам представления.

Разделив обязанности приложения Angular на компоненты представления и контейнера, его становится проще поддерживать и тестировать. Это связано с тем, что каждый компонент имеет четкую и единую ответственность, что снижает риск тесно связанного и сложного кода. Этот шаблон также поддерживает модульность, упрощая понимание и разработку приложения в целом.

Таким образом, шаблон «контейнер против компонента представления» в Angular является полезным способом структурирования приложения за счет разделения обязанностей компонентов и обеспечения модульности, удобства обслуживания и тестируемости.

Разделение ответственности с помощью сервисов

В Angular различие между сервисом и компонентом определяется обязанностями кода. Службы служат арбитрами общих, независимых от компонентов данных и управления состоянием, выполняя такие обязанности, как вызовы API, управление преобразованием данных и обмен данными между компонентами.

И наоборот, компоненты воплощают визуальное представление данных и определяют способ отображения информации для пользователя. Кроме того, компоненты обрабатывают взаимодействия с пользователем, такие как отправка форм и нажатие кнопок, и снабжены логикой, необходимой для манипулирования данными, предоставляемыми службами.

По сути, код, который управляет общими, независимыми от компонентов данными и состоянием, принадлежит службе, а код, отвечающий за визуальное представление и взаимодействие с пользователем, принадлежит компоненту. Такое четкое разделение обязанностей обеспечивает ясность с точки зрения разделения задач и облегчает обслуживание и тестирование приложения.

Пример DataService, использованный в предыдущем примере, может выглядеть следующим образом.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://api.example.com/');
  }
}

Заключение

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

Если вы нашли это введение в Angular, пожалуйста, дайте мне несколько аплодисментов. Это действительно помогает мне!

Удачного кодирования!

Сценарист: Лэндон Баттарс