Guide pratique sur Angular: environnement et configuration du projet

Angular est un cadre permettant de créer des applications côté client utilisant HTML, CSS et JavaScript. Dans ce billet, le premier d'une série, je explique comment configurer une application Angular à l'aide de la CLI, les différentes commandes et options de la CLI et ce que font la plupart des fichiers générés par la CLI.

Angular est un cadre pour créer des applications côté client utilisant HTML, CSS et JavaScript. Il comporte des fonctionnalités qui prennent en charge le développement pour le Web, le Web mobile, le mobile natif et le bureau natif. Il est similaire à certaines autres bibliothèques JavaScript telles que React et Vue, qui sont également très pratiques. Tandis que React, Vue et Angular figurent parmi les meilleures cartes des frameworks JavaScripts à utiliser / à apprendre, Angular a une bonne position en raison de certaines fonctionnalités telles que:

• Le développement natif de postes de travail et de postes de travail natifs utilisant des produits tels que Ionic et NativeScript
• Encourage l'organisation de la logique en modules – cela facilite l'organisation et la réutilisation de la logique
• Augmentation de la productivité des développeurs grâce à la prise en charge des outils

Si vous souhaitez apprendre à utiliser Angular pour créer des applications riches en fonctionnalités, vous êtes au bon endroit. Dans cet article, et dans les prochains, je vous guiderai dans la création d’une application Angular utilisant HTML, CSS et TypeScript. Aucune expérience préalable requise avec Angular, React ou Vue. Vous n'avez pas besoin de comprendre TypeScript, car je vais vous expliquer quelle que soit la fonctionnalité TypeScript que vous utiliserez au fur et à mesure. Cependant, vous devez avoir des connaissances en HTML, CSS, JavaScript et installer Node et npm.

Tout au long de la série de blogs, vous apprendrez les concepts angulaires lors de la construction d’une application Dépenses. À la fin de tout cela, vous devriez avoir une application angulaire qui fonctionne comme ce que vous voyez ci-dessous.

Configuration de l'application angulaire

Nous allons utiliser le . Angular CLI pour générer une application angulaire, qui est un programme d’interface en ligne de commande permettant de générer une application angulaire, de générer des fichiers pour l’application, d’exécuter des tests, de l’exécuter et de la construire pour le déploiement. Si vous n’avez pas installé Node.js, vous pouvez le télécharger et l’installer à partir de la page de téléchargement officielle . Cela installera également npm aux côtés de Node. Au moment de la rédaction de ce document, la dernière version de la CLI angulaire est la 8.2.1, qui nécessite la version 10 de Node.js.

CLI

Installez la CLI à l’aide de npm:

 npm install -g @ angular / cli

Une fois la CLI installée, exécutez la commande ng qui doit afficher une liste des commandes disponibles pour la CLI, ainsi que leurs descriptions. Nous sommes intéressés par la commande pour créer une nouvelle application angulaire, qui est ng new . Avant d’exécuter cette commande, voyons les options disponibles.

Run nouvelle commande --help . Ceci listera les options disponibles pour la commande avec une description pour chacune. Nous allons utiliser certaines de ces options avec la commande ng new pour créer une application Web Angular.

Accédez à la ligne de commande, accédez au répertoire dans lequel vous souhaitez créer votre projet Angular et exécutez la commande. ci-dessous:

 une nouvelle dépense-tracker-angular -v = true --skipTests = true --skipGit = true --style = css --routing = true --prefix = et

Ceci créera une nouvelle application angulaire en fonction des options que vous avez spécifiées. Vous trouverez ci-dessous la description de ces options:

1. -v = true: L'option -v est la forme abrégée de - verbose . Il est utilisé pour spécifier si vous souhaitez que la CLI fournisse plus d'informations à la console lors de l'exécution, générant les fichiers nécessaires et installant les packages nécessaires.

       

2.     

   –skipTests = true: Ceci configure l'application de sorte que, lorsque vous utilisez la CLI pour générer des fichiers, les fichiers de test ne soient pas inclus. Nous avons utilisé cette option car je ne vous expliquerai pas comment tester les applications angulaires dans ce tutoriel.

       

3.     

   –skipGit = true: Lorsqu'il est défini sur true, il n'initialise pas de référentiel git pour le projet.

       

4.     

   –routing = true: Définir ce paramètre sur true lui indique de générer un module de routage pour l'application. Vous verrez comment cela fonctionne plus tard.

       

5.     

   –style = css: Définit l'extension de fichier ou le préprocesseur à utiliser pour les fichiers de style.

       

6.     

   –prefix = et: Définit le préfixe à appliquer aux sélecteurs générés pour le projet. Les sélecteurs sont les noms que vous donnez aux composants angulaires. Ils sont utilisés quand ils sont rendus sous forme d’éléments HTML sur la page. Vous en verrez plus quand nous couvrirons les composants angulaires dans le prochain article.

Les fichiers du projet

Dans la section précédente, nous avons utilisé la commande ng new pour créer un projet angulaire. . Cette commande crée un dossier Angular workspace et génère une nouvelle application. Un espace de travail peut contenir plusieurs applications, l'application initiale créée étant située au niveau racine de l'espace de travail. L'application de niveau racine porte le même nom que l'espace de travail et les fichiers source résident dans le sous-dossier src de l'espace de travail. Dans notre cas, l'application s'appelle cost-tracker-angular .

Le dossier racine de l'espace de travail contient les fichiers source de l'application, ainsi que des fichiers de configuration pour l'espace de travail et les applications. Le tslint.json contient la configuration TSLint par défaut pour les projets de l'espace de travail. TSLint est un outil d'analyse statique qui vérifie la lisibilité, la maintenabilité et les erreurs de fonctionnalité du code TypeScript.

Le tsconfig.json contient la configuration TypeScript par défaut pour les projets de l'espace de travail. Le fichier karma.conf.js est le fichier de configuration du programme d’essais karma . Le fichier .editorconfig contient une configuration pour les éditeurs de code.

Le fichier angular.json contient des paramètres par défaut de configuration pour l'ensemble de l'espace de travail et spécifiques au projet pour les outils de construction et de développement fournis par le CLI angulaire. Le dossier e2e / au niveau supérieur contient les fichiers source des tests de bout en bout correspondant à l'application de niveau racine, ainsi que des fichiers de configuration spécifiques aux tests. Le fichier browserlist configure le partage des navigateurs cibles et des versions de Node.js entre divers outils frontaux. Voir la page GitHub pour plus d'informations.

Ouvrez le fichier angular.json et examinez une partie de la configuration. La liste suivante décrit certaines des propriétés que vous voyez dans ce fichier:

1. defaultProject: La ​​valeur est définie sur le nom d'application de niveau racine cost-tracker-angular . Cette valeur sera utilisée comme nom de projet pour les commandes pour lesquelles le nom de projet n'est pas spécifié dans les arguments.

       

2.     

   newProjectRoot: Spécifie le chemin où les nouveaux projets sont créés. Absolue ou relative au dossier de l'espace de travail.

       

3.     

   projets: Il contient une sous-section pour chaque application de l'espace de travail, avec les options de configuration par projet. Nous avons un seul projet dans l’espace de travail, que vous verrez en dessous. Le projet dispose également de ses propres options de configuration spécifiques, décrites ci-dessous.

       

4.     

   projectType: Ceci spécifie si le projet est une application ou une bibliothèque. Une application peut s'exécuter indépendamment dans un navigateur, contrairement à une bibliothèque.

       

5.     

   schémas: Ensemble de schémas permettant de personnaliser les valeurs par défaut de l'option de sous-commande générant pour le projet. Les schémas de génération angulaire sont des instructions pour modifier un projet en ajoutant des fichiers ou en modifiant des fichiers existants. Vous devriez remarquer "skipTests": true pour certains des schémas. Cela concerne le - skipTests = true que nous avons défini lorsque nous avons exécuté la commande ng new . Cette commande indique à la CLI que, lorsqu’elle génère ces fichiers, elle ne doit pas en ajouter de fichiers de test.

       

6.     

   root: Ceci spécifie le dossier racine des fichiers de ce projet, par rapport au dossier de l’espace de travail. Il est vide pour l'application de niveau racine, qui se trouve au niveau supérieur de l'espace de travail.

       

7.     

   sourceRoot: Répertoire racine des fichiers source de ce projet. Pour le projet que nous construisons, il s’agit de src l’application au niveau racine.

       

8.     

   préfixe: Il s'agit du nom qu'Angular ajoute aux sélecteurs générés pour les composants. N'oubliez pas l'option - prefix = et que nous avons définie pour la commande ng new .

Pour en savoir plus sur le fichier de configuration angular.json dans le documentation .

Passons aux fichiers de l’application située dans le dossier src . Vous devriez voir le fichier style.css qui contient les définitions CSS du application. Vous pouvez y ajouter / importer les styles que vous souhaitez appliquer globalement. Vous l'avez peut-être remarqué dans la définition des styles dans le fichier d'angular.json .

Le fichier src / index.html est la page HTML principale affichée. lorsque l'application est ouverte dans le navigateur. La CLI ajoute automatiquement tout le code JavaScript et CSS que vous définissez lors de la création de l’application. Vous n’avez donc généralement pas besoin d’ajouter manuellement les balises

Source link