Angular 17 tutoriel

Angular est un framework JavaScript open source développé par Google. Il est utilisé pour créer des applications web dynamiques et interactives. Angular est basé sur des composants, qui sont des unités de code réutilisables qui peuvent être combinées pour créer des applications complexes.

Ce tutoriel vous apprendra les bases d'Angular 17. Vous apprendrez à créer des composants, à les connecter à des données et à les utiliser pour créer une application simple.

Prérequis

Pour suivre ce tutoriel, vous devez avoir les connaissances suivantes :

• JavaScript
• HTML
• CSS

Installation

La première étape consiste à installer Angular. Vous pouvez le faire en suivant les instructions sur le site Web d'Angular.

Une fois Angular installé, vous pouvez créer un nouveau projet Angular en utilisant la commande suivante :

ng new mon-projet

Cette commande créera un nouveau dossier appelé mon-projet avec les fichiers suivants :

• package.json : le fichier de configuration du projet
• src/index.html : le fichier HTML de l'application
• src/app/app.component.ts : le composant racine de l'application

Création d'un composant

Un composant Angular est une unité de code réutilisable qui peut être combinée avec d'autres composants pour créer une application. Pour créer un composant, vous devez utiliser la directive @Component().

Voici un exemple de composant simple :

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

@Component({
  selector: 'mon-composant',
  templateUrl: './mon-composant.component.html',
  styleUrls: ['./mon-composant.component.css']
})
export class MonComposant {

  title = 'Mon composant';

}

Ce composant a un selector nommé mon-composant. Il utilise également un template HTML et un fichier CSS pour définir son apparence.

Connecter un composant à des données

Pour connecter un composant à des données, vous pouvez utiliser la propriété data. La propriété data est un objet qui contient les données que le composant doit afficher.

Voici un exemple de composant connecté à des données :

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

@Component({
  selector: 'mon-composant',
  templateUrl: './mon-composant.component.html',
  styleUrls: ['./mon-composant.component.css']
})
export class MonComposant implements OnInit {

  title = 'Mon composant';

  data = {
    nom: 'John Doe',
    prenom: 'Jane'
  };

  constructor() { }

  ngOnInit() { }

}

Ce composant a un objet data qui contient les données suivantes :

• nom : le nom de la personne
• prenom : le prénom de la personne

Utiliser un composant

Pour utiliser un composant, vous devez l'importer dans votre composant racine. Vous pouvez ensuite l'utiliser en ajoutant son selector à votre template HTML.

Voici un exemple d'utilisation d'un composant :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'Mon application';

  constructor() { }

}

Ce composant racine utilise le composant MonComposant en ajoutant son selector mon-composant à son template HTML.

Conclusion

Ce tutoriel vous a appris les bases d'Angular 17. Vous avez appris à créer des composants, à les connecter à des données et à les utiliser pour créer une application simple.

Pour en savoir plus sur Angular, vous pouvez consulter la documentation officielle.

• Date: 15 Dec 2023