меню

Изменяют ли автономные компоненты способ написания кода в Angular?

С постепенным ростом приложения, бойлерплейт-код, введенный Angular, становится громоздким и трудным для поддержки. Команда Angular стремится сделать архитектуру приложения легче, поэтому одной из новых возможностей, которую они представили, являются автономные компоненты.

Что такое автономные компоненты в Angular?

Автономные компоненты позволяют разработчикам создавать веб-приложения без необходимости использования NgModule. Они были впервые представлены в версии 14, но только в режиме предварительного просмотра для разработчиков. Начиная с версии 15, автономные API являются частью стабильного API. Их можно полностью использовать с Angular Elements, Router, HttpClient и многими другими.

Кроме компонентов, мы также можем создавать автономные директивы и пайпы.

Создание автономного компонента.

В версии 15 Angular CLI представил команду для легкого создания новых автономных компонентов через:

  
ng g componentName --standalone
 

Они должны быть помечены как standalone: true и не должны быть частью какого-либо ngModule. Если вы попробуете добавить автономный компонент в модуль, Angular выдаст ошибку.

Любые зависимости, необходимые для компонента, могут быть объявлены непосредственно в массиве imports.

  
@Component({
  standalone: true,
  selector: 'app-card',
  imports: [ImageComponent, LayoutComponent],
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  ...
}
 

Любой существующий компонент может быть преобразован в автономный. При этом следует учитывать всего лишь три момента:

  • Добавить standalone: true.
  • Удалить компонент из массива объявлений модуля, в котором он использовался.
  • Использовать массив imports для добавления всех необходимых зависимостей.

Использование автономного компонента.

Автономный компонент, пайп или директива может использоваться внутри другого автономного компонента или внутри модуля. В обоих случаях вы должны добавить его в раздел imports так же, как и обычный NgModule.

 
@NgModule({
  declarations: [CardComponent],
  exports: [CardComponent], 
  imports: [ImageComponent],
})
export class CardsLayoutComponent {
  ...
}
  

Загрузка автономного компонента.

С версии 14 вы можете загрузить всё приложение, используя автономный компонент в качестве корневого компонента приложения. Для этого можно использовать функцию bootstrapApplication в файле main.ts.

 
import {bootstrapApplication} from '@angular/platform-browser';
import {CardComponent} from './card.component';

bootstrapApplication(CardComponent, {
  providers: []
});
 

Затем в файле index.html вы должны заменить app-root на селектор вашего автономного компонента.

  
<body>
  <app-card></app-card>
</body>
  

Настройка инъекции зависимостей (Dependency Injection).

При загрузке вашего приложения с помощью автономного компонента вы можете внедрять сервисы, передавая их в массив providers функции bootstrapApplication:

  
...
bootstrapApplication(AppComponent,{
  providers: [
    {provide: API_URL, useValue: 'standalonecomponents.com/api'},
    {provide: AuthService, useClass: AuthService},
    importProvidersFrom(RouterModule.forRoot(routes))]
});
...
 

Маршрутизация с использованием автономного компонента.

Для создания маршрутов вам нужно создать файл, который будет отвечать за это, и добавить компонент так же, как это делалось ранее.

 
import { CardComponent } from "./card.component";

export const routes: Routes = [
    {
        path: 'card',
        component: CardComponent
    }
];
 

После создания маршрутов вы должны загрузить приложение с помощью автономного компонента и импортировать маршруты в массив providers.

 
import { RouterModule } from '@angular/router';
import { importProvidersFrom, inject, enableProdMode } from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';

import { routes } from './routing';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent,{
  providers: [
    importProvidersFrom(RouterModule.forRoot(routes))]
});
  

Ленивая загрузка автономного компонента.

Автономные компоненты могут быть лениво загружены с легкостью. Это можно достичь с помощью использования loadComponent:

  
export const routes: Route[] = [
  {
    path: 'card', 
    loadComponent: () => 
      import('./card.component')
        .then(m => m.CardComponent)},
];
 

Если у вас есть случай, когда вы хотите загрузить сразу несколько маршрутов. Например, у вас есть конечные точки GET, POST и DELETE для компонента карточки, вы можете использовать функцию loadChildren вместо loadComponent.

  
export const routes: Route[] = [
  {
    path: 'card', 
    loadComponent: () => 
      import('./card/card.routes')
        .then(m => m.cardRoutes)},
];
  

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


Возможно, вам будет интересно

Route. Вынос настроек роутера

Пример переноса роутинговой конфигурации Angular5 в отдельный файл

Angular Signals

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

Subject

Использование класса Subject для создания сервиса, реализующего observable и observer в Angular

Кастомные элементы форм в Angular

Реактивные формы — это одна из лучших вещей в Angular. Поскольку они упрощают работу с большими и действительно динамичными формами. В этой мы рассмотрим создание кастомного элемента формы.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту