ANGULAR en plus de 128 mots – Partie 1

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *