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 /.
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%;
}
Ç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.
| Fichier | Objectif |
|---|---|
app/app.component.{ts,html,css,spec.ts} |
|
app/app.module.ts |
|
assets/* |
|
environments/* |
|
favicon.ico |
|
index.html |
|
main.ts |
|
polyfills.ts |
|
styles.css |
|
test.ts |
|
tsconfig.{app|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 /.
| Fichier | Objectif |
|---|---|
e2e/ |
|
node_modules/ |
|
.angular-cli.json |
|
.editorconfig |
|
.gitignore |
|
karma.conf.js |
|
package.json |
|
protractor.conf.js |
|
README.md |
|
tsconfig.json |
|
tslint.json |
