Le meilleur des deux mondes angulaires : autonome et modules combinés

Les modules angulaires ont constitué un obstacle pour les nouveaux arrivants, c’est pourquoi Angular a introduit des composants autonomes. Vous pouvez réellement utiliser le meilleur des deux dans vos applications : découvrez comment !

Ces dernières années, lors de la création d’applications en Angular, les modules (ngModules) ont joué un rôle central. Les modules nous permettent de regrouper des composants, des canaux et des services en une seule fonctionnalité, comme customer.module.ts. Cependant, en dehors d’Angular, le concept de ngModules n’existe pas.

Pour les nouveaux arrivants ou les développeurs qui découvrent Angular, le système de modules peut sembler un travail supplémentaire inutile. Ils ne sont pas habitués à organiser des applications avec ngModules ; au lieu de cela, ils préfèrent créer des applications avec plus de liberté, sans avoir besoin d’enregistrer chaque élément dans un ngModule ou un AppModule.

L’équipe Angular reconnaît ce problème. À partir de la version 14 d’Angular, ils ont introduit des composants autonomes, permettant aux utilisateurs de créer des applications sans avoir besoin de modules. Depuis la version 17, les composants autonomes sont devenus la valeur par défaut dans nos applications. Ils sont entièrement intégrés à Angular CLI, permettant la génération de composants, de tuyaux et de directives sans nécessiter de modules. La meilleure façon d’apprendre est de créer vous-même une application.

Nous en construirons un avec l’aide de Progress Interface utilisateur Kendo pour angulaire pour nous rendre la vie encore plus facile. Commençons!

Configuration d’Angular 17

Pour installer Angular CLI globalement sur votre ordinateur, vous permettant de créer et de gérer des projets Angular depuis n’importe où, vous pouvez utiliser la commande suivante :

npm install -g @angular/cli

Une fois l’installation terminée, vous pouvez confirmer que tout est correctement configuré en exécutant cette commande dans votre terminal ou votre invite de commande :

ng version

Cette commande affichera la version installée d’Angular CLI, vérifiant que l’installation a réussi.

Nous sommes sur la bonne voie. Pour créer votre nouveau projet Angular nommé « kendostore », exécutez la commande ng new kendostore:

du nouveau magasin de kendo ?  Quelle feuille de style format Voudriez-vous utiliser ?  SCSS   [ 
https://sass-lang.com/documentation/syntax
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation 
(SSG/Prerendering)? No
✔ Packages installed successfully.
    Successfully initialized git.
dany ~/Desktop  $

After that’s finished, navigate to the directory and run ng serve -o to see your first Angular 17 project ready! This is just the beginning, and you can now start developing your module-less “kendostore” application.

The New Structure

The Angular team has done excellent work in reducing the number of files and the amount of boilerplate code in our applications, making it easier for both experienced and new Angular developers to learn and work with Angular.

With the latest updates, the Angular CLI now generates standalone components, pipes and directives by default. This change eliminates the need to register them in the app.module.ts file.

What About app.module and router.module?

Most configurations previously managed in modules like app.module or router.module are now part of the app.config.ts file. By default, this includes the provideRouter() function, which provides everything necessary for routing and additional feature services.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

Ne vous inquiétez pas de manquer RouterModule ou HttpClientModule : tout au long de cet article, nous démontrerons les nouvelles façons d’incorporer ces fonctionnalités. Mais d’abord, commençons par ajouter la navigation à votre application Angular !

Importation de composants, modules et directives

Le fichier app.component.ts inclut l’indicateur autonome défini sur true. Cela signifie qu’il n’est pas nécessaire de l’enregistrer dans un module, offrant ainsi un processus de développement plus rationalisé. Cependant, il peut toujours importer des modules, directives et canaux existants selon les besoins.

Les composants ont deux options principales : fournir et importer :

• fournir: Cela donne accès à des services ou à des cours. Il est utilisé pour mettre des services à disposition d’une partie de l’application.
• importations: Ceci est utilisé pour accéder à tout ce qui concerne le HTML ou le modèle. Il comprend des directives, des tuyaux et des composants essentiels à la construction de la partie visuelle de l’application.

De plus, nous pouvons importer des modules. N’oubliez pas qu’un ngModule est un ensemble de services, de directives, de canaux et de composants. Il simplifie le processus en regroupant ces éléments. Nous nous éloignons de l’utilisation de modules, les développeurs angulaires devront coexister avec des applications autonomes et remplies de modules pendant encore assez longtemps.

Par exemple, dans le app.component, nous importons le RouterOutlet directive et la CommonModule. Le RouterOutlet est utilisé pour le routage dans l’application, et le CommonModule fournit des fonctionnalités courantes telles que des boucles et des conditions dans les modèles.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';
import { NavigationModule } from "@progress/kendo-angular-navigation";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

}

Mais que se passe-t-il si nous avons déjà un groupe de composants et de directives regroupés dans un module ? Pouvons-nous encore les utiliser ?

Découvrons-le!

Utilisation de modules dans un composant autonome

Disons que nous voulons créer un menu de navigation attrayant en utilisant Navigation dans l’interface utilisateur du Kendo. Cet outil offre une gamme de composants pour créer des systèmes de navigation puissants, ce qui nous fait gagner du temps par rapport à la création d’un système à partir de zéro.

Tout d’abord, nous devons installer le package Kendo UI Navigation, en répondant oui pour tout configurer automatiquement dans notre application.

ng add @progress/kendo-angular-navigation 
i Using package manager: npm
√ Found compatible package version: @progress/kendo-angular-navigation@14.3.0.
√ Package information loaded.

The package @progress/kendo-angular-navigation@14.3.0 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
UPDATE package.json (1404 bytes)
UPDATE angular.json (3017 bytes)
√ Packages installed successfully.
UPDATE src/main.ts (295 bytes)
UPDATE tsconfig.app.json (294 bytes)
UPDATE tsconfig.spec.json (300 bytes)

Kendo UI Navigation est livré avec le NavigationModule, qui donne accès à tous ses composants et directives, comme kendo-appbar. Nous ajoutons ce module à notre fichier app.component.ts dans la section importations, avec la directive RouterLink :

import {NavigationModule} from "@progress/kendo-angular-navigation";
...

imports: [CommonModule, RouterOutlet, NavigationModule, RouterLink],

Désormais, dans notre modèle app.component.html, nous pouvons utiliser divers composants de Kendo UI pour Angular, tels que kendo-appbar et kendo-appbar-section. Voici un extrait pour ajouter une navigation de base à votre application en utilisant routerLink avec kendo-appbar au-dessus du <router-outlet></router-outlet>:

<kendo-appbar position="top">
  <kendo-appbar-section>
    <h1>The Store</h1>
  </kendo-appbar-section>
  <kendo-appbar-spacer width="32px"></kendo-appbar-spacer>
  <kendo-appbar-section>
    <a [routerLink]="['']">Home</a>
    <a [routerLink]="['products']">Products</a>
  </kendo-appbar-section>
  <kendo-appbar-spacer></kendo-appbar-spacer>
</kendo-appbar>

Pour avoir un meilleur menu, ajoutez l’extrait CSS suivant dans app.component.scss pour ajouter un remplissage entre les liens dans la section kendo-appbar.

kendo-appbar-section a {
  padding: 4px;
}

Après avoir enregistré et rechargé la page, le composant kendo-appbar devrait être visible, grâce à la collaboration du NavigationModule et de la directive RouterLink.

Nous avons maintenant configuré notre navigation, mais qu’en est-il des itinéraires et du célèbre RouterModule ? Comment pouvons-nous définir des itinéraires sans le RouterModule ? Explorons cela ensuite !

Navigation et routage

Avant de commencer avec le routeur, nous devons créer deux composants supplémentaires : home et products.

Utilisez la CLI pour créer ces composants :

ng g c pages/home
ng g c pages/products

Initialement, la CLI génère pour nous un fichier app.routes.ts, qui contient un Routes tableau. Nous devons ajouter des itinéraires pour notre application. Les exigences de base pour un itinéraire sont un chemin et un composant.

Importez les composants et définissez le chemin : '' pour HomeComponent et 'products' pour le composant Produits. Le code final devrait ressembler à ceci :

import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { ProductsComponent } from './pages/products/products.component';

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'products',
    component: ProductsComponent,
  },
];

Nous avons maintenant les itinéraires configurés. Mais comment l’application connaît-elle ces itinéraires ? Au lieu de configurer directement le RouterModule, vous souvenez-vous du app.config.ts depuis le début ? Il dispose de fournisseurs et de la fonction provideRouter, qui accepte les routes comme paramètre pour configurer le routeur.

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
  ]
};

Nous pouvons également ajouter plus de fonctionnalités comme withDebugTracing():

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withDebugTracing()),
  ]
};

Désormais, lorsque les utilisateurs accèdent à la racine ou au chemin des produits, le composant correspondant se chargera dans le <router-outlet></router-outlet>.

Après l’enregistrement, la page d’accueil devrait apparaître. Si vous cliquez sur 'products'il affichera les composants vides.

Pour rendre cela plus intéressant, affichons quelques produits et faisons une requête HTTP. Il est temps d’en savoir plus sur HttpClient !

Obtenir des données avec HttpClient

À l’ère des modules, nous utilisions HttpClientModule pour accéder au service HttpClient dans nos applications Angular. Mais maintenant, dans une configuration sans module, au lieu d’importer HttpClientModule, nous utilisons le provideHttpClient() fonction dans app.config.ts. Semblable à provideRouternous pouvons également passer des fonctions supplémentaires comme withFetch à cela. Le code final ressemblera à ceci :

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withDebugTracing } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient, withFetch } from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, 
withDebugTracing()
),
    provideHttpClient(
      withFetch(),
    )
  ]
};

Avec cette configuration, nous accédons au service httpClient. Dans product.component.ts, nous pouvons accéder à httpClient en utilisant la fonction inject.

Faisons une demande au https://fakestoreapi.com/products API, qui renvoie une liste de produits. Tout d’abord, définissez un type pour le produit :

export type Product = {
  id: string;
  title: string;
  description: string;
  price: string;
  image: string;
};

Puisque nous avons une propriété price, nous pouvons utiliser le CurrencyPipe pour la formater dans le modèle. Ensuite, ajoutez une nouvelle variable http pour stocker la réponse. Comme httpClient renvoie un observable, une bonne approche consiste à utiliser toSignal() pour convertir l’observable en signal.

Oui, les signaux sont une autre fonctionnalité intéressante d’Angular. Apprendre encore plus!

Le code final du composant ressemble à ceci :

export type Product = {
  id: string;
  title: string;
  description: string;
  price: string;
  image: string;
};

@Component({
  selector: 'app-products',
  standalone: true,
  imports: [ CurrencyPipe],
  templateUrl: './products.component.html',
  styleUrl: './products.component.scss',
})
export class ProductsComponent {
  http = inject(HttpClient);
  products = toSignal(
    this.http.get<Product[]>('https://fakestoreapi.com/products'),
  );
}

Maintenant, comment afficher les données ?

Utilisons les cartes Kendo UI pour la mise en page. Tout d’abord, installez le package kendo-angular-layout, en répondant oui pour tout configurer automatiquement :

ng add @progress/kendo-angular-layout
i Using package manager: npm
√ Found compatible package version: @progress/kendo-angular-layout@14.3.0.
√ Package information loaded.

The package @progress/kendo-angular-layout@14.3.0 will be installed and executed.
Would you like to proceed? Yes                                                   
√ Packages successfully installed.
            @progress/kendo-theme-default already installed, skipping styles registration.
UPDATE package.json (1555 bytes)
√ Packages installed successfully.

Nous n’avons besoin que du CardModule, alors importez-le dans la section des importations du composant. Le code final du composant sera alors :

import { Component, inject } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import {CardModule} from "@progress/kendo-angular-layout";
import {CurrencyPipe} from "@angular/common";
import {toSignal} from "@angular/core/rxjs-interop";
export type Product = { 
id: string; 
title: string; 
description: string; 
price: string; 
image: string; 
};
@Component({
  selector: 'app-products',
  standalone: true,
  imports: [
    CardModule, CurrencyPipe ],
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent {
  http = inject(HttpClient);
  products = toSignal(this.http.get<Product[]>('https://fakestoreapi.com/products'));
}

Afficher les données et utiliser le flux de contrôle

Dans le modèle, nous accédons à la gamme de produits en utilisant products(). Nous parcourons le tableau en utilisant @foret à l’intérieur, nous utilisons <kendo-card>, <kendo-card-body>, kendoCardSeparatoret <kendo-footer>, en les liant aux informations sur le produit. Le code final du modèle ressemble à :

  @for (product of products();track product.id) {
    <kendo-card width="360px">
      <img [src]="product.image" kendoCardMedia alt="cover_img"/>
      <kendo-card-body>
        <h4>{{ product.title }}</h4>
        <hr kendoCardSeparator/>
        <p>
          {{ product.description }}
        </p>
      </kendo-card-body>
      <kendo-card-footer class="k-hstack">
        <span>Price {{ product.price | currency }}</span>
      </kendo-card-footer>
    </kendo-card>
  } @empty {
    <h2> No products! 😌</h2>
  }

Avant d’enregistrer, ajoutez l’extrait CSS suivant pour améliorer la visualisation des produits :

:host {
  display: flex;
  flex-wrap: wrap;
  gap: 7rem;
  justify-content: center;
  padding: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  :host {
    gap: 3rem;
    padding: 1.5rem; 
  }
}

Fait! Nous avons notre application minimale sans module combinée avec des modules et des tuyaux Kendo UI, tirant le meilleur des deux mondes.

Que puis-je faire avec les applications de modules ?

La plupart des entreprises et des développeurs ont des applications construites sur des modules. Devons-nous mettre à niveau manuellement ? Non! L’équipe Angular a créé un outil de migration autonome.

Montre Migrons vers sans module : un flux de refactorisation angulaire ou en apprendre davantage Migration autonome.

résumer

Nous avons beaucoup appris ! Nous avons construit notre première application sans module avec des composants autonomes, en utilisant des directives, des tuyaux, en configurant le routeur et HttpClient. En bref, nous pouvons profiter du meilleur des modules des deux mondes pour accéder à une liste de composants, de directives et de services, ou accéder à des directives spécifiques lorsque nous n’avons pas besoin de tout charger.

Code source: https://github.com/danywalls/moduless-with-kendo/tree/master

Curieux de connaître l’interface utilisateur de Kendo ?

L’interface utilisateur du Kendo Bibliothèque de composants angulaires est livré avec plus de 110 composants optimisés pour la facilité d’utilisation et l’accessibilité. La bibliothèque est livrée avec un essai gratuit de 30 jours :Essaie!