Comment créer un site Web complet en angulaire

Sep 17, 2025

Comment

Page 1 sur 4:

Page 1

Page 1

[dix] Page 2 [dix] Page 3 [dix] Page 4

La dernière version de Angular est souvent considérée comme un cadre qui vient du côté de l'entreprise des pistes et aime généralement la compagnie de la ligne d'applications métier. Bien qu'il soit vrai que l'angulaire a effectivement évolué d'un cadre à une plate-forme qui soutient toutes sortes d'applications, il existe de nombreuses fonctionnalités vraiment étonnantes qui existent pour les développeurs pour créer des expériences immersives pour leurs utilisateurs.

Ceci est la première partie d'une série sur la manière de créer un site Web animé complet en angulaire. Nous allons commencer par construire un site Web complet, puis l'animer dans l'acompte suivant.

Dans ce didacticiel, nous allons nous concentrer principalement sur les morceaux angulaires et nous nous soucions de parler des parties HTML et CSS qui ne sont pas directement liées à la construction de l'application. S'il vous plaît télécharger le code source suivre le long. Pas vendu sur angulaire? Trouvez le parfait Générateur de site Web ici (et les meilleurs prix ci-dessous).

01. Créer un projet

Il y a beaucoup de pièces mobiles qui vont dans une application Web non triviale. Quelles dépendances votre candidature a-t-elle? Comment allez-vous l'exécuter localement? Comment allez-vous le tester? Comment allez-vous regrouper vos actifs

Heureusement, le processus complexe de composition de ces éléments est traité à l'abri des regards, dans le @ angular / cli . Dans quelques commandes de notre terminal, nous pouvons avoir une application angulaire entièrement fonctionnelle prête à travailler avec nous.

La première étape pour travailler avec le CLI consiste à l'installer. Pour cela, utilisez la commande ci-dessous:

npm install -g @angular/cli

Une fois que la CLI est installée, à partir de la ligne de commande, nous pouvons naviguer dans le dossier que nous souhaitons installer notre projet. À partir de là, nous allons courir ng neuf avec le nom de notre projet. Cela créera un dossier avec ce même nom, que nous allons naviguer dans une fois le projet terminé.

 CD & LT; votre dossier-projets et votre GT;
NG Nouveau site angulaire-site
CD Angular-Animations-Site

Et c'est ça! Notre application angulaire est prête à courir. Vous pouvez soit commencer votre application avec NPM Démarrer ou NG Servir . Je préfère utiliser NPM Démarrer Parce qu'il est plus conventionnel et me permet d'ajouter des commandes supplémentaires. Vous pouvez ensuite naviguer à http: // localhost: 4200 pour voir l'application en cours d'exécution.

The stock Angular CLI application running — L'application CLI angulaires en stock

02. Inclure des animations et des matériaux angulaires

Parce que nous aimons de belles choses, nous allons faire quelques petites ajouts à notre application en ajoutant et en installant le @ angular / animations et @ Angular / Matériel paquets:

 NPM I - SAVE @ Angular / Matériel @ Angular / Animations

Nous pouvons laisser savoir angular sur ces dépendances en les ajoutant à notre app.module.ts déposer. Nous allons utiliser le bouton de matériau angulaire, la carte et la barre d'outils, nous allons donc importer leurs modules respectifs ainsi que le BrowserAnimationModileule .

 // app / app.module.ts
...
Importer {MDButtonModule, MDCardModule, MDToolBarmodule} de '@ Angular / Matériel';
Importer {BrowserAnimationsModule} de '@ Angular / Platform-Navigateur / Animations';

Nous pouvons ensuite les ajouter à la importations tableau avec notre Ngmodule déclaration.

 // app / app.module.ts
...
Importer {MDButtonModule, MDCardModule, MDToolBarmodule} de '@ Angular / Matériel';
Importer {BrowserAnimationsModule} de '@ Angular / Platform-Navigateur / Animations';

@NgModule ({
  ...
  Importations: [
    ...
    BrowserAnimationsModile,
    Mdtoolbarmodule,
    MDButtonModule,
    MDCardModule
  ],
  ...
})

Et pour un ajout final, nous importerons le thème Indigo rose dans notre styles.css déposer.

 / * styles.css * /
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Jusqu'à présent, nous nous sommes entièrement concentrés sur la mise en place de la demande afin que nous puissions commencer à développer. Ces commandes peuvent se sentir maladroites au début, mais une fois que vous les avez habituées, vous trouverez que cela ne prend que quelques minutes pour avoir un environnement entièrement intégré avec toutes les cloches et toutes les sifflets que nous devons construire un site Web sucré.

03. Introduire un composant de page

Parce que nous construisons un site Web avec angular, nous devrons introduire un mécanisme pour afficher nos pages. En angulaire, le bloc de construction atomique d'une application est le composant. En archivant notre application avec des composants encapsulés bien définis, nous sommes en mesure de réutiliser facilement la fonctionnalité et de composer de nouvelles fonctionnalités, en introduisant de nouveaux composants.

Le CLI est livré avec une prise en charge du générateur hors de la boîte, et c'est ce que nous utilisons pour créer notre composant de page. Nous pouvons générer notre composant de page en exécutant la commande ci-dessous (la g commande est sténographique pour produire ).

 Page de composant NG G

Remarque: Je recommande de prendre le temps d'apprendre à construire les principales pièces angulaires à la main jusqu'à ce que vous ayez construit votre mémoire musculaire. Ce n'est que lorsque vous comprenez vraiment ce qui se passe que vous optimisez votre flux de travail avec des générateurs.

La CLI générera un dossier dans le src Annuaire nommé page Avec un fichier HTML, CSS et dossier ainsi qu'un fichier de spécification. Dans notre page.component.ts Fichier, nous avons la structure de base d'un composant. Notre composant fait référence à nos fichiers de modèle et de style dans le @Composant métadonnées et a notre constructeur et nontilité méthodes stupéfiées.

// app / page / page.component.ts

import {composant, oninit} de '@ angular / noyau';

@Composant({
  Sélecteur: 'App-Page',
  templateurl: './page.component.html',
  STYSTURLS: ['./Page.component.css']
})
Exporter Class PageComponent implémente oninit {

  constructeur () {}

  ngoninit () {}
}

En plus de générer notre composant, la CLI modifiera également notre app.module.ts inclure un Pagecomponent entrée dans notre déclarations déployer. Cela signifie que notre composant de page est maintenant disponible dans tout le module.

 // app / app.module.ts

@NgModule ({
  Déclarations: [
    AppComponent,
    Pagecomponent
  ],
  ...
})

En tant que vérification de la santé mentale, nous pouvons sauter dans notre app.component.html Fichier et ajouter & lt; app-page & gt; & lt; / app-page & gt; vers le bas. Notez que l'étiquette de l'élément que nous utilisons correspond à la sélecteur propriété définie dans notre @Composant métadonnées.

 & lt;! - app / app.component.html - & gt;

& lt; h1 & gt;
  {{Titre}}
& lt; / h1 & gt;

& lt; App-page & GT; & lt; / App-Page & GT;

The page component rendering in our main application component — Le composant de page Rendu dans notre composant d'application principal

04. Construire votre composant de page

Avec notre composant de page vivant et bien, nous pouvons le construire afin qu'il commence à ressembler à une page Web réelle. Nous allons introduire un page s'opposer à Titre , Sous-titre , teneur , et image Propriétés.

 // app / page / page.component.ts

Exporter Class PageComponent implémente oninit {
  page = {
    Titre: 'home',
    Sous-titre: "Bienvenue à la maison!",
    Contenu: "Quelques contenus à domicile".
    Image: 'Actifs / BG00.JPG'
  };

  constructeur () {}

  ngoninit () {}
}

The styled page component with Angular Material — Le composant de la page de style avec du matériel angulaire

Nous mettrons à jour notre modèle pour lier à la page objet. Il existe un élément d'image qui sera éventuellement augmenté pour remplir toute la fenêtre du navigateur. Nous allons également ajouter dans une composante de carte de matériau angulaire que nous allons lier le reste de notre page objet à.

 & lt;! - app / page / page.component.html - & gt;
& lt; img classe = "Fullbg" [src] = "page.Image" & gt;

& lt; md-carte & gt;
& lt; MD-Card-Header & GT;
& lt; md-card-title & gt; & lt; h1 & gt; {{page.title}} & lt; / h1 & gt; & lt; / md-carte-titre & gt;
& lt; md-card-sous-titre & gt; {{page.subtitle}} & lt; / md-carte-sous-titres & gt;
& lt; / md-carte-en-tête & gt;
& lt; MD-Card-Content & GT;
{{Contenu de la page}}
& lt; / md-carte-content & gt;
& lt; / md-carte & gt;

Notre composant de page commence à mieux regarder! Notre prochaine étape consiste à ajouter de la possibilité d'avoir plusieurs pages et de naviguer entre eux.

Page 2: Comment créer plusieurs pages

[dix] 1

[dix] 2 [dix] 3 [dix] 4

Page actuelle: Page 1

Page suivante Page 2