Angular est un framework pour construire des applications clientes, il se base sur HTML/CSS et JavaScript/TypeScript.
Angular propose les avantages suivants :
- Revealing Module Pattern : permet d’organiser le code en un ou plusieurs modules et donne une meilleure structure.
- Architecture propre et structurée.
- Code réutilisable.
- Application plus facilement testable.
Architecture :
- Front-End : S’occupe de la logique de présentation. Constitué de HTML / CSS / TypeScript / Angular
- Backend : S’occupe de la logique métier. Constitué de Data + API
Créer une première application Angular :
NodeJS : L’environnement d’exécution Node.js comprend tout ce dont vous avez besoin pour exécuter un programme écrit en JavaScript. Pour l’installer le lien https://node.js.org
Node Package Manager : il s’agit d’un utilitaire en ligne de commande qui facilite l’installation de packages, la gestion des versions et la gestion des dépendances.
Angular-Cli : une interface de ligne de commande pour automatiser votre flux de travail de développement. Il vous permet de:
- Créer une nouvelle application Angular.
- Exécutez un serveur de développement avec prise en charge de “Live Reload” pour prévisualiser votre application pendant le développement.
- Ajouter des fonctionnalités à votre application Angular.
- Exécuter des tests unitaires
- Exécuter les tests de end to end
- Construire l’application pour le déploiement en production
- Déployer votre application sur un serveur
Installation de Angular-cli en ligne de commande :
npm install -g @angular-cli
Cette notation avec @ permet aux packages NPM d’être espacés de noms. Chaque utilisateur et organisation sur NPM a sa propre portée et ils sont les seuls à pouvoir y ajouter des packages.
Ceci est utile pour plusieurs raisons:
- Permet aux organisations d’indiquer clairement quels packages sont «officiels» et lesquels ne le sont pas. Exemple, la portée @angular, assure qu’il a été publié par l’équipe de base Angular.
- Le nom du package doit être unique à dans sa portée de publication mais pas à l’ensemble du registre npm.
Exemple, le nom du package http est déjà pris dans le référentiel principal npm, mais Angular peut également avoir @ angular / http.
Pour plus de détails la documentation est consultable à ce lien : https://docs.npmjs.com/
Créer un paquet Angular :
ng new paquet-test-angular
Éditer le code du projet Angular créé :
Je vous conseille d’éditer le code avec l’éditeur VsCode : https://code.visualstudio.com/ ou avec l’éditeur de code Sublime Text https://www.sublimetext.com/
Si vous utilisez vscode la commande suivante peut être utilisée à la racine de votre projet.
code .
Déployer votre projet angular sur le serveur de la machine locale :
ng serve
L’application est alors consultable sur le localhost:4200.