Angular est une plate-forme et un framework de développement TypeScript utilisés pour créer des applications d'une seule page.

Angular a une histoire complexe. Les développeurs ont utilisé JavaScript pour construire la première version de ce framework (AngularJS). Les développeurs d'Angular ont ensuite utilisé TypeScript pour construire toutes les versions successives d'Angular (en raison du nombre de bugs dans la première version).

À partir de 2021, la dernière version d'Angular est 12.0. Dans cet article, vous apprendrez tout ce que vous devez savoir sur le framework Angular.

Qu'est-ce qu'Angulaire ?

Beaucoup de gens décrivent Angularas comme un framework, et bien que cette définition ne soit pas incorrecte, Angular n'est pas seulement un framework. Angular est aussi une plateforme de développement. Cela signifie qu'il dispose d'un système matériel et logiciel qui exécute des applications angulaires.

Bien qu'il soit construit sur TypeScript, vous pouvez écrire la plupart du code de la plate-forme en JavaScript. Comme la plupart des frameworks, Angular est basé sur des composants. Cela signifie que chaque section d'une interface utilisateur Angular est traitée comme une entité indépendante, ce qui conduit à la création de code réutilisable et d'applications évolutives.

Pour utiliser Angular, vous devez vous familiariser avec HTML, CSS et JavaScript (savoir que TypeScript est un atout, mais pas une exigence). Angular est fréquemment comparé à VueJS et ReactJS, et l'une des principales plaintes est qu'Angular a une courbe d'apprentissage plus raide.

En rapport: Qu'est-ce que ReactJS et à quoi peut-il servir ?

Ce n'est pas surprenant, car Angular (étant une plate-forme de développement), a un plus grand nombre de structures de base avec lesquelles vous pouvez vous familiariser. Ces structures comprennent:

• Modules
• Composants
• Modèles

Et comprendre ces fonctionnalités de base vous assurera que vous êtes sur la bonne voie pour devenir un développeur Angular.

Explorer les fichiers angulaires

L'application Angular génère de nombreux fichiers dans votre nouveau dossier de projet (comme vous pouvez le voir dans l'image ci-dessous). Consultez le site Web officiel d'Angular pour savoir comment installer Angular sur votre ordinateur.

L'un des fichiers les plus importants du dossier principal du projet est le package.json déposer. Ce fichier vous indique le nom de votre projet, comment démarrer votre projet (ng servir), comment construire votre projet (ng construire), et comment tester votre projet (ng test) entre autres.

Votre dossier de projet principal contient également deux dossiers—node_modules et src. Les src le dossier est l'endroit où vous ferez tout votre développement; il contient plusieurs fichiers et dossiers.

Le dossier src

Les styles.css fichier est l'endroit où vous mettrez toutes vos préférences de style globales, et le index.html fichier est la page unique qui s'affiche dans votre navigateur.

Exploration du fichier index.html

La seule chose que vous voudriez changer dans le index.html fichier ci-dessus est le titre de l'application. Les balise dans le corps du fichier HTML ci-dessus des liens vers le app.component.ts fichier, qui se trouve dans le dossier de l'application (comme vous pouvez le voir dans l'image ci-dessous).

Exploration du fichier app.component.ts

importer {Composant } de '@angular/core' ;
@Composant({
sélecteur: 'app-root',
templateUrl: './app.component.html',
URL de style: ['./app.component.css']
})
classe d'exportation AppComponent {
title = 'mon-application';
}

Les app.component.ts fichier utilise le racine de l'application sélecteur, qui se trouve dans le index.html fichier ci-dessus. Il utilise le app.component.html fichier comme modèle et le app.component.css fichier pour le style.

Les app.component.css est vide lorsqu'il est généré car toutes les préférences de style, ainsi que la mise en page HTML, se trouvent dans le app.component.html déposer.

Exécuter l'application Angular avec le ng serve --open La commande affichera ce qui suit dans votre navigateur:

Pour modifier ce qui s'affiche dans votre navigateur, vous devez modifier le app.component.html déposer.

Remplacement du contenu de ce fichier par le code suivant:

Bonjour le monde

Produira la sortie suivante dans votre navigateur:

Comprendre les modules angulaires

Tous Angulaire L'application est construite sur un système de modules de base, connu sous le nom de NgModules. Chaque application contient au moins un NgModule. Angulaire génère deux modules à partir du nouveau commande (app-routing.module.ts et app.module.ts).

Les app.module.ts contient le module racine, qui doit être présent pour que l'application s'exécute.

Exploration du fichier app.module.ts

importer { NgModule } depuis '@angular/core' ;
importer { BrowserModule } depuis '@angular/platform-browser' ;
importer { AppRoutingModule } de './app-routing.module';
importer { AppComponent } de './app.component' ;
@NgModule({
déclarations: [
AppComponent
],
importations: [
NavigateurModule,
AppRoutingModule
],
fournisseurs: [],
bootstrap: [AppComponent]
})
classe d'exportation AppModule { }

Le fichier ci-dessus utilise le JavaScript importer déclaration pour importer le NgModule, les NavigateurModule, les AppComponent, et le AppRoutingModule (qui est le deuxième NgModule du projet).

Les @NgModule décorateur vient après les importations. Il indique que le app.module.ts le fichier est en effet un NgModule. Les @NgModule décorateur configure alors plusieurs tableaux: le déclarations, les importations, les fournisseurs, et le amorcer.

Les déclarations le tableau stocke les composants, les directives et les canaux qui appartiennent à un NgModule. Cependant, dans le cas d'un module racine, seul le AppComponent est stocké dans le déclaration array (comme vous pouvez le voir dans le code ci-dessus).

Les importations le tableau importe l'autre NgModules que vous utilisez dans l'application. Les importations tableau dans le code ci-dessus importe le NavigateurModule (ce qui lui permet d'utiliser des services spécifiques au navigateur, tels que le rendu DOM), et le AppRoutingModule (qui permet à l'application d'utiliser le Angulaire routeur).

En rapport: Le héros caché des sites Web: comprendre le DOM

Les fournisseurs le tableau doit contenir des services que les composants d'autres NgModules peut utiliser.

Les amorcer tableau est très important car il contient le composant d'entrée qu'Angular crée et insère dans le index.html fichier dans le dossier principal du projet. Chaque application Angular se lance à partir du amorcer tableau à la racine NgModule par amorçage les NgModule (ce qui implique un processus qui insère chaque composant dans le amorcer tableau dans le DOM du navigateur).

Comprendre les composants angulaires

Chaque composant angulaire est généré avec quatre fichiers spécifiques. Si vous regardez l'image du dossier de l'application ci-dessus, vous verrez les fichiers suivants:

• app.component.css (un fichier CSS)
• app.component.html (un fichier modèle)
• app.component.spec.ts (un fichier de spécification de test)
• app.component.ts (un fichier composant)

Tous les fichiers ci-dessus sont associés au même composant. Si vous utilisez le ng générer commande pour générer un nouveau composant, quatre fichiers similaires à ceux ci-dessus seront générés. Les app.component.ts fichier contient le composant racine, qui relie les différents aspects du composant (comme le modèle et le style).

Exploration du fichier app.component.ts

importer { Composant } de '@angular/core' ;
@Composant({
sélecteur: 'app-root',
templateUrl: './app.component.html',
URL de style: ['./app.component.css']
})
classe d'exportation AppComponent {
title = 'mon-application';
}

Les app.component.ts utilise l'instruction d'importation JavaScript pour importer « Component » à partir du noyau d'Angular. Puis le @Composant decorator identifie la classe comme un composant. Les @Composant décorateur contient un objet composé d'un sélecteur, une URL du modèle, et un URL de style déployer.

Les sélecteur raconte Angulaire pour insérer une instance du composant d'application dans n'importe quel modèle HTML qui a une balise correspondant au sélecteur (alors le étiqueter). Et si vous revoyez le code dans le index.html fichier ci-dessus, vous trouverez le étiqueter.

Le fichier de composant principal de l'application est également lié au fichier modèle, à l'aide de URL du modèle biens. C'est le app.component.html fichier, qui décrit comment un composant spécifique doit être rendu dans une application angulaire.

La propriété finale de l'objet est la URL de style. Cette propriété fait référence à un tableau de feuilles de style, ce qui signifie que vous pouvez appliquer plusieurs feuilles de style à un seul composant (vous pouvez donc ajouter la feuille de style globale dans le dossier src au tableau styleUrls comme bien).

Comprendre les modèles angulaires

Les app.component.html est un exemple de modèle angulaire. Ce fichier est un fichier HTML ainsi qu'un fichier de composant (le composant d'application). Par conséquent, chaque composant doit avoir un modèle HTML, simplement parce qu'il décrit le rendu d'un composant dans le DOM.

Et après?

Comprendre le DOM est votre prochain meilleur coup. Adopter la plate-forme et le framework Angular est sans aucun doute un défi. Cependant, c'est possible, et étant donné qu'Angular restitue ses composants dans le DOM, l'apprentissage du DOM - alors que vous essayez de maîtriser Angular - est un autre grand pas.

Le héros caché des sites Web: comprendre le DOM

Vous apprenez la conception de sites Web et souhaitez en savoir plus sur le modèle objet de document? Voici ce que vous devez savoir sur le DOM.

Lire la suite

A propos de l'auteur