Angular 7: Créer votre premier projet Angular

Angular est un framework pour développer un frontend c'est à dire une application cliente. Dans mon article qu'est ce que Angular 2 j'ai expliqué ce framework créé par Google. Dans cet article, je vais vous aider à créer votre premier projet Angular mais aussi je vais expliquer l'utilité de chaque fichier.

Préparez votre environnement pour Angular 7

Angular étant un framework sur nodejs, il faut d'abord installer nodejs. Si vous ne connaissez pas nodejs, je vous invite à lire mon article qu'est ce que nodejs. Téléchargez et installez gratuitement nodejs sur votre ordinateur.
Pour créer un projet Angular, il nous faut angular-cli. Angular-cli est un utilitaire qui permet de générer un projet Angular et qui facilite la création des composants.
Installer angular cli

npm install -g @angular/cli

Si vous avez déjà utilisé angular-cli, je vous invite à le mettre à jour avec les commandes suivantes:

npm uninstall -g angular-cli
npm cache verify
npm install -g @angular/cli@latest

Créer un projet Angular 7

Une fois angular-cli installé, nous allons pouvoir créer notre projet angular.

mkdir angular7
cd angular7
ng new myproject

Après cette commande, angular-cli vous posera quelques questions pour configurer votre projet.

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

Après avoir répondu à ces questions, angular-cli va vous générer un nouveau projet Angular 7.

CREATE myproject/README.md (1026 bytes)
CREATE myproject/angular.json (3795 bytes)
CREATE myproject/package.json (1316 bytes)
CREATE myproject/tsconfig.json (408 bytes)
CREATE myproject/tslint.json (2837 bytes)
CREATE myproject/.editorconfig (245 bytes)
CREATE myproject/.gitignore (503 bytes)
CREATE myproject/src/favicon.ico (5430 bytes)
CREATE myproject/src/index.html (296 bytes)
CREATE myproject/src/main.ts (372 bytes)
CREATE myproject/src/polyfills.ts (3234 bytes)
CREATE myproject/src/test.ts (642 bytes)
CREATE myproject/src/styles.css (80 bytes)
CREATE myproject/src/browserslist (388 bytes)
CREATE myproject/src/karma.conf.js (964 bytes)
CREATE myproject/src/tsconfig.app.json (166 bytes)
CREATE myproject/src/tsconfig.spec.json (256 bytes)
CREATE myproject/src/tslint.json (314 bytes)
CREATE myproject/src/assets/.gitkeep (0 bytes)
CREATE myproject/src/environments/environment.prod.ts (51 bytes)
CREATE myproject/src/environments/environment.ts (662 bytes)
CREATE myproject/src/app/app-routing.module.ts (245 bytes)
CREATE myproject/src/app/app.module.ts (393 bytes)
CREATE myproject/src/app/app.component.css (0 bytes)
CREATE myproject/src/app/app.component.html (1173 bytes)
CREATE myproject/src/app/app.component.spec.ts (1104 bytes)
CREATE myproject/src/app/app.component.ts (213 bytes)
CREATE myproject/e2e/protractor.conf.js (752 bytes)
CREATE myproject/e2e/tsconfig.e2e.json (213 bytes)
CREATE myproject/e2e/src/app.e2e-spec.ts (305 bytes)
CREATE myproject/e2e/src/app.po.ts (208 bytes)
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.

Après la création de votre projet, exécutez les commandes suivantes pour le démarrer.

cd cd myproject/
ng serve

Après ces commandes, votre projet démarre

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                                          
Date: 2018-11-10T20:41:44.948Z
Hash: 9780eaf80a6600655875
Time: 11161ms
chunk {main} main.js, main.js.map (main) 12.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.55 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

Naviguez vers http://localhost:4200/ pour afficher votre projet.

Structure d'un projet Angular 7

Nous allons maintenant regarder le contenu du projet. Ouvrez le dossier avec un éditeur comme visual studio code.

Un projet Angular contient plusieurs répertoires et fichiers. Nous allons nous intéresser d'abord au répertoire src. Ce répertoire contient l'ensemble de vos codes.

1. app : Ce répertoire contient le module AppModule. Rappelons que l'unité de base dans un projet Angular c'est le module. Le répertoire app contient, le module AppModule (app.module.ts), un component (app.component.ts), un template (app.component.html), le fichier css du template(app.component.css), le module de navigation (app-routing.module.ts) et le fichier de spécification du component (app.component.spec.ts) pour le tester.
2. assets: ce répertoire est réservé pour les contenus statiques comme les images.
3. environnements: ce répertoire permet de définir l'environnement d'exécution: production ou developpement
4. index.html: c'est le fichier qui héberge votre application Angular. Ce sera la seule page html de votre application. C'est pour ça qu'on parle de SPA (Single Page Application).
5. karma.conf.js: fichier de configuration pour des tests
6. main.ts: le fichier de démarrage de votre application Angular
7. polyfills.ts: c'est un fichier de compatibilité pour permettre à votre application de s'exécuter dans la plupart des navigateurs.
8. style.css: fichier css global pour votre application
9. test.ts: fichier pour tester votre application
   10.tsconfig.app.json: fichier de congiguration du language typescript pour votre application
10. tsconfig.spec.json: fichier de configuration de typescript pour les tests
11. tslint.json: fichier de configuration de tslint
    En dehors du répertoire src, nous avons encore d'autres fichiers
12. .editorconfig: fichier de configuration de l'éditeur ici visual studio code
13. .gitignore: fichier de configuration pour git
14. angular.json: fichier de configuration pour votre application Angular
15. package-lock.json: fichier de traçabilité des modules
16. package.json: fichier contenant la liste des modules dont depend votre application Angular.
17. README.md: un fichier qui vous permet de décrire votre projet
18. tsconfig.json: un fichier de configuration globale pour typescript
19. tslint.json: un fichier de configuration globale pour tslint.

Conclusion

Vous venez de créer votre premier projet Angular 7. Je ferai d'autres articles pour expliquer plus en détail le contenu du répertoire src/appqui constitue le coeur de votre application.
Merci d'avoir lu cet article et n'hésitez pas à le partagez sur les réseaux sociaux. A très bientôt.