Qu'est-ce qui est exactement angulaire?

Angular est un framework frontal open source JavaScript et crée des applications réactives à page unique (SPA) et il a été construit par les développeurs de Google. Angular a attesté d'un contrôle à grande échelle dans les cadres JavaScript Open Source et il est remarquablement très apprécié entre les développeurs et les entreprises pour ses excellentes techniques de fonctionnement. Angular, un framework MVW côté client innovant est actuellement très utilisé pour le développement d'applications mobiles et d'applications web. Il a été écrit en Typescript avec prise en charge de la normalisation ES6 (ECMA Script 2015). Dactylographié développé par Microsoft et c'est un sur-ensemble de JavaScript. Cela transpile le code et convertit au format JavaScript ou ES5. Le Typescript est fortement typé et il est permis d'écrire des fonctionnalités OOPS comme des instructions de classe, d'interface et de module comme C # ou Java qui boostent l'exécution et réduisent les erreurs d'exécution.

Voici les principales caractéristiques d'Angular 2

  • Composants -

la version précédente d'Angular avait l'attention des contrôleurs mais a maintenant complètement changé le focus pour travailler avec des composants sur les contrôleurs. Les composants aident à créer les applications en plusieurs modules. Cela permet de gérer plus efficacement l'application dans un laps de temps.

  • Module -

le module est assez identique à une classe. Un module est généralement décrit par un bloc de code qui est utilisé pour exécuter une certaine tâche unique. Angular a la capacité de modularité, où une seule application est construite en la séparant en plusieurs modules. Le mot-clé d'exportation est utilisé pour exporter la classe de composants à partir d'un module. Chaque application angulaire possède au moins un module angulaire par convention appelé module d'application.

Par exemple

  • Modèle -

Le modèle est le rôle clé qui justifie la navigation du composant. Il peut être déclaré que la vue du composant est identifiée à l'aide d'un modèle. Il est créé avec HTML, inclut une liaison et une directive.

Par exemple

  • Métadonnées -

Il est extrêmement utile d'étendre l'efficacité de la classe. Dans Typescript, à cet effet est identifié par la classe de décoration. Par exemple, pour spécifier un composant dans une application angulaire, utilisez les métadonnées de la classe (c'est-à-dire @Component décorator).

Un décorateur est une fonction qui met des métadonnées dans une classe, ce sont des membres ou des arguments de méthode.

  • Liaison de données -

La fonctionnalité la plus efficace, la liaison de données, est le pont de connexion entre le modèle et la vue. Il se synchronise automatiquement. Angular prend en charge quatre types de liaison: liaison de propriété, liaison d'événement, interpolation et liaison bidirectionnelle.

  • Directive -

Les directives sont des attributs HTML sur mesure utiles pour conserver la capacité du HTML. Pour créer une directive, le décorateur @Directive est utilisé sur les métadonnées connectées de la classe. Trois types de directives - Composant, Décorateur et Modèle.

  • Prestations de service -

Les services sont utilisés chaque fois qu'une productivité unique est requise normalement dans différents modules de l'application. Fondamentalement, est utilisé pour partager les données et le comportement au sein de l'application. Le service n'a pas de classe de base. Les services souvent utilisés sont le service d'enregistrement, le service de données, le service de massage, etc.

  • Injection de dépendance -

Injection de dépendance en angulaire. L'injection de dépendance (DI) est un concept de base d'Angular 2+ et permet à une classe de collecter les dépendances d'une autre classe. Généralement, dans Angular, l'injection de dépendances est effectuée en injectant une classe de service dans une classe de section ou de module.

Par exemple

Il existe de nombreux éditeur de texte qui prend entièrement en charge Typescript. Soit hors de la boîte ou avec un plugin, y compris tous ces éléments comme ci-dessous.

  1. Visual Studio.
  2. Code Visual Studio.
  3. Atome.
  4. Éclipse.
  5. WebStorm.

Visual Studio Code est le meilleur choix car il est open source et fonctionne sous Linux, Windows et MacOS. Il fournit de grandes fonctionnalités qui prennent en charge Typescript, y compris

  • Auto-complétion
  • IntelliSense
  • Vérification de la syntaxe
  • Refactoring

Pour télécharger le code Visual Studio, visitez le site Web à l'adresse https://code.visualstudio.com/download.

Étapes pour installer Angular 2

Maintenant, commencer avec le processus d'installation d'Angular 2

Étape 1: Pour installer Angular 2, téléchargez d'abord le package node.js à partir du site https://nodejs.org/en/download/.

Installez le référentiel npm (Node Package Manager) téléchargé sur votre système.

  • Si vous utilisez le système Windows, installez le programme d'installation de Windows.
  • Si vous utilisez le système MacOS, installez le programme d'installation de MacOS.

Vérifiez les versions compatibles de votre système comme 32 bits ou 64 bits.

Étape 2: installation de Node,

Maintenant , double-cliquez sur le fichier node-v10 15.3-x64.msi téléchargé pour exécuter le programme d'installation et cliquez sur le bouton Suivant sur l'écran du programme d'installation.

Étape 3: Maintenant, cliquez sur la case cochée et acceptez les termes du contrat de licence . Cliquez ensuite sur le bouton Suivant.

Étape 4: sur l'écran suivant, modifiez le chemin d'installation si nécessaire ou cliquez sur le bouton Suivant.

Étape 5: Sur l'écran de sélection des fonctionnalités suivantes, conservez la sélection par défaut et cliquez sur le bouton Suivant.

Étape 6: Maintenant, pour installer Node.js Cliquez sur le bouton Installer.

Étape 7: Sur l'écran suivant, attendez la fin de l'installation.

Étape 8: Maintenant, cliquez sur le bouton Terminer.

Étape 9: Ouvrez l'invite de commande sur votre ordinateur et tapez la commande suivante et vérifiez la version nodejs et la version npm:

c:/>node -v

c:/>npm -v.

Étape 10: Une fois l'installation terminée. Visitez le site à https://cli.angular.io/ pour la CLI angulaire (interface de ligne de commande).

Étape 11: Ouvrez l'invite de commande sur votre ordinateur et tapez la commande «npm install –g @ angular / cli» et appuyez sur Entrée pour installer Angular 2 CLI (Command Line Interface).

Remarque: Si vous utilisez MacOS / Linux, mettez simplement sudo avant le npm, «sudo npm install –g @ angular / cli»

Étape 12: Tapez "ng new first-app" et appuyez sur Entrée pour créer la première application.

Étape 13: Lorsque vous installez l'application Angular 2, Angular CLI vous posera des questions.

  • Souhaitez-vous ajouter un routage angulaire? (O / Non) -> Non
  • Quelle norme de feuille de style souhaite utiliser? (Utilisez les touches fléchées) -> CSS

Étape 14: dans la première application, ajoutez tous les packages à l'aide de la CLI angulaire

Une fois que vous avez installé tous les packages, cela signifie que l'application est créée sur le disque.

Étape 15: Tapez la commande "ng –version" dans l'invite de commande et appuyez sur Entrée pour connaître la version angulaire

Étape 16: Maintenant, tapez la commande «cd first-app» pour accéder au répertoire ou au dossier de l'application.

Étape 17: Enfin, l'application angulaire «First App» est créée; tapez maintenant la commande «ng serve».

Étape 18: Maintenant, ouvrez le navigateur et tapez http: // localhost: 4200 dans la barre d'adresse et appuyez sur Entrée pour exécuter l'application First Application Angular dans le navigateur.

Articles recommandés

Ceci a été un guide sur l'installation d'Angular 2. Ici, nous avons discuté des principales fonctionnalités d'Angular 2 et des étapes pour installer Angular 2. Vous pouvez également consulter les articles suivants pour en savoir plus -

  1. Feuille de triche angulaire 2
  2. Questions d'entretiens chez Angular 2
  3. Angular 2 contre Vue JS
  4. Commandes angulaires

Catégorie:

Développement de logiciels