Angular - Démarrage Rapide

Table Des Matières

Introduction

Cet article sera le début d’une série d’articles qui formeront un guide pratique (le 1er guide français complet et 100% pratique dans son genre) dont L’objectif est de créer et exécuter une application angulaire simple dans TypeScript, en utilisant Angular CLI tout en respectant les recommandations du Guide de style dont bénéficient tous les projets Angular.

Les bons outils facilitent la vie pour les développeur d’applications en rendant le développement d’applications plus rapide et plus facile à maintenir que s’ils fassent tout à la main.

L’interface de ligne de commande Angular CLI est un outil d’interface de ligne de commande qui permet de créer un projet, d’ajouter des fichiers et d’effectuer une variété de tâches de développement en cours telles que les tests, le regroupement (ou la mise en paquet) et le déploiement.

Étape 1. Configurer l’environnement de développement

avant de pouvoir faire quoi que ce soit, vous aurez besoin configurer votre environnement de développement.

Installez Node.js et npm s’ils ne sont pas déjà sur votre machine.

“Vérifiez que vous exécutez au moins les node 6.9.x et npm 3.x.x en exécutant node -v et npm -v dans une fenêtre de terminal / console. Les versions plus anciennes produisent des erreurs, mais les versions plus récentes sont correctes.”

Ensuite, installez l’interface CLI Angular globalement.

npm install -g @angular/cli

Étape 2. Créez un nouveau projet

Ouvrez une fenêtre de terminal. Générez un nouveau projet et une application squelette en exécutant les commandes suivantes:

ng new my-app

Patience, s’il vous plaît. Il faut du temps pour mettre en place un nouveau projet; la plus grande partie est consacrée à l’installation de paquets npm.

Étape 3: Servir l’application

Allez dans le répertoire du projet et lancez le serveur.

cd my-app
ng serve --open

La commande ng serve lance le serveur, surveille vos fichiers et reconstruit l’application lorsque vous apportez des modifications à ces fichiers.

L’utilisation de l’option –open (ou juste -o) ouvre automatiquement votre navigateur sur http: // localhost: 4200 /.

 

Angular - Servir l'application
Votre application vous accueille avec un message

Étape 4: Modifier votre premier composant Angular

La CLI a créé le premier composant angulaire pour vous. C’est le composant racine root et il s’appelle app-root. Vous pouvez le trouver dans ./src/app/app.component.ts.

Ouvrez le fichier du composant et modifiez la propriété title depuis  ‘app’ vers ‘My First Angular App!’.

src/app/app.component.ts

content_copy
export class AppComponent {
  title = 'My First Angular App!';
}

Le navigateur se recharge automatiquement avec le titre révisé. C’est bien, mais ça pourrait mieux paraître.

Ouvrez src / app / app.component.css et donnez du style au composant

src/app/app.component.css

content_copy
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
Angular - my first app
Ça semble bien!

Et Après?

C’est à peu près tout ce que vous attendez d’une application « Hello, World ».
Vous êtes prêt à suivre le tutoriel Tour of Heroes que je vais traiter profondément à partir du prochain article relevant de la « topic Angular – Guide Complet et pratique »  et à créer une petite application qui démontre les grandes choses que vous pouvez construire avec Angular.
Ou vous pouvez rester un peu plus longtemps pour en savoir plus sur les fichiers de votre tout nouveau projet.

Revue Du Dossier De Projet

Un projet CLI Angular est la base à la fois des expériences rapides et des solutions d’entreprise.

Le premier fichier que vous devez extraire est README.md. Il contient des informations de base sur l’utilisation des commandes CLI. Chaque fois que vous voulez en savoir plus sur la façon dont Angular CLI fonctionne, assurez-vous de visiter Angular CLI repository (le dépôt Angular CLI) et Wiki. Certains fichiers générés peuvent ne pas vous être familiers.

Le dossier src

Votre application réside dans le dossier src. Tous les composants angulaires, les modèles, les styles, les images et tout ce dont votre application a besoin se trouvent ici. Tous les fichiers en dehors de ce dossier sont destinés à soutenir la construction de votre application.Anngular - Le dossier src

 

Fichier Objectif
app/app.component.{ts,html,css,spec.ts}

Définit le composant AppComponent avec un modèle HTML, une feuille de style CSS et un test unitaire. C’est le composant racine de ce qui deviendra un arbre de composants imbriqués au fur et à mesure que l’application évolue.

app/app.module.ts

Définit AppModule, le module racine qui indique à Angular comment assembler l’application. À l’heure actuelle, il déclare uniquement l’AppComponent. Bientôt, il y aura plus de composants à déclarer.

assets/*

Un dossier où vous pouvez mettre des images et toute autre chose à copier en gros lorsque vous construisez votre application.

environments/*

Ce dossier contient un fichier pour chacun de vos environnements de destination, chacun exportant des variables de configuration simples à utiliser dans votre application. Les fichiers sont remplacés à la volée lorsque vous créez votre application. Vous pouvez utiliser un point de terminaison API différent pour le développement que pour la production ou différents jetons d’analyse. Vous pourriez même utiliser certains services fictifs. De toute façon, la CLI (interface de ligne de commande) vous a couvert.

favicon.ico

Chaque site veut bien paraître dans la barre de favoris. Commencez avec votre propre icône Angular.

index.html

La page HTML principale qui est diffusée lorsque quelqu’un visite votre site. La plupart du temps, vous n’aurez jamais besoin de la modifier. L’interface de ligne de commande ajoute automatiquement tous les fichiers js et css lors de la création de votre application. Vous n’avez donc jamais besoin d’ajouter des balises <script> ou <link> ici manuellement.

main.ts

Le principal point d’entrée pour votre application Compile l’application avec JIT compiler (le compilateur JIT) et amorce le module racine de l’application (AppModule) pour l’exécuter dans le navigateur. Vous pouvez également utiliser AOT compiler (le compilateur AOT) sans modifier le code en ajoutant l’indicateur –aot aux commandes ng build et ng serve.

polyfills.ts

Différents navigateurs ont différents niveaux de support des standards web. Les polyfills aident à normaliser ces différences. Vous devriez être assez sûr avec core-js et zone.js, mais assurez-vous de consulter le guide de support du navigateur pour plus d’informations.

styles.css

Vos styles globaux vont ici. La plupart du temps, vous voudrez avoir des styles locaux dans vos composants pour une maintenance plus facile, mais les styles qui affectent l’ensemble de votre application doivent être dans un endroit central.

test.ts

C’est le principal point d’entrée pour vos tests unitaires. Il a une configuration personnalisée qui pourrait ne pas vous être familière, mais ce n’est pas quelque chose que vous aurez besoin de modifier.

tsconfig.{app|spec}.json

Configuration du compilateur TypeScript pour l’application Angular (tsconfig.app.json) et pour les tests unitaires (tsconfig.spec.json)..

Le Dossier root (Racine)

Le dossier src / est juste l’un des éléments dans le dossier racine du projet. D’autres fichiers vous aident à créer, tester, gérer, documenter et déployer l’application. Ces fichiers vont dans le dossier racine à côté de src /.

Angular - Le dossier Racine (root)

Fichier Objectif
e2e/

Dans e2e / faites voss tests de bout en bout. Ils ne devraient pas être à l’intérieur de src / parce que les tests e2e sont vraiment une application séparée qui est là pour tester votre application principale. C’est aussi pourquoi ils ont leur propre tsconfig.e2e.json.

node_modules/

Node.js crée ce dossier et place tous les modules tiers listés dans package.json à l’intérieur.

.angular-cli.json

Configuration pour CLI angulaire. Dans ce fichier, vous pouvez définir plusieurs valeurs par défaut et également configurer les fichiers inclus lorsque votre projet est construit. Consultez la documentation officielle si vous voulez en savoir plus.

.editorconfig

Configuration simple pour votre éditeur pour vous assurer que tout le monde qui utilise votre projet a la même configuration de base. La plupart des éditeurs prennent en charge un fichier .editorconfig. Voir http://editorconfig.org pour plus d’informations.

.gitignore

Configuration Git pour s’assurer que les fichiers générés automatiquement ne sont pas validés par le contrôle de source.

karma.conf.js

Configuration de test unitaire pour Karma test runner (le testeur Karma), utilisé lors de l’exécution du test ng.

package.json

Configuration npm répertoriant les packages tiers utilisés par votre projet. Vous pouvez également ajouter vos propres scripts personnalisés ici.

protractor.conf.js

Configuration de test de bout en bout pour Protractor, utilisée lors de l’exécution de ng e2e.

README.md

Documentation de base pour votre projet, pré-remplie avec les informations de la commande CLI. Assurez-vous de l’améliorer avec la documentation du projet afin que quiconque vérifie le repo puisse créer votre application!

tsconfig.json

Configuration du compilateur de typeScript pour votre IDE à choisir et vous donner des outils utiles.

tslint.json

Configuration de Linting pour TSLint avec Codelyzer, utilisée lors de l’exécution de ng lint. Linting aide à garder votre style de code consistent.

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here