Démarrez avec Angular: le didacticiel InfoWorld

Angular, le successeur d'AngularJS, est une plate-forme de développement pour la création d'applications mobiles et de bureau en utilisant TypeScript et / ou JavaScript et d'autres langages. Angular est populaire pour la création de sites Web à volume élevé et prend en charge les applications Web, Web mobile, mobiles natives et de bureau natives.

L'équipe de développement Angular Core est divisée entre les employés de Google et une communauté solide; ça ne disparaîtra pas de sitôt. En plus de ses propres capacités étendues, la plate-forme Angular dispose d'un écosystème externe solide: plusieurs IDE importants prennent en charge Angular, il dispose de quatre bibliothèques de données, il existe une demi-douzaine d'outils utiles et plus d'une douzaine d'ensembles de composants d'interface utilisateur, et il existe des dizaines de Livres et cours angulaires. En 2015, lorsque AngularJS a reçu un Bossie Award, j'ai expliqué qu'il s'agissait d'un framework JavaScript AJAX modèle-vue-tout (MVW) qui étend le HTML avec un balisage pour les vues dynamiques et la liaison de données bidirectionnelle. Angular est particulièrement utile pour développer des applications Web d'une seule page et lier des formulaires HTML à des modèles et des contrôleurs JavaScript. Le nouvel Angular est écrit en TypeScript plutôt qu'en JavaScript, ce qui présente de nombreux avantages, comme je vais l'expliquer.

Le modèle «modèle-vue-quel que soit» au son étrange est une tentative d'inclure les modèles modèle-vue-contrôleur (MVC), modèle-vue-vue-modèle (MVVM) et modèle-vue-présentateur (MVP) sous un seul sobriquet. Les différences entre ces trois modèles étroitement liés sont le genre de choses sur lesquelles les programmeurs aiment ardemment discuter; les développeurs Angular ont décidé de se retirer de la discussion.

Fondamentalement, Angular synchronise automatiquement les données de votre interface utilisateur (vues dans AngularJS et modèles dans Angular 2 et supérieur) avec vos objets JavaScript (modèle) via une liaison de données bidirectionnelle. Pour vous aider à mieux structurer votre application et faciliter son test, Angular enseigne au navigateur comment faire l'injection de dépendances et l'inversion de contrôle. Le nouvel Angular (version 2 et supérieure) remplace les vues et les contrôleurs par des composants et adopte des conventions standard, ce qui facilite la compréhension et permet aux développeurs de se concentrer sur le développement de modules et de classes ECMAScript 6. En d'autres termes, Angular 2 est une réécriture totale d'AngularJS qui tente de mieux implémenter les mêmes idées. Les modèles de vue angulaire, qui ont une syntaxe assez simple, sont compilés en JavaScript qui est bien optimisé pour les moteurs JavaScript modernes.Le nouveau routeur de composants dans Angular 2 peut effectuer un fractionnement de code (chargement différé) pour réduire la quantité de code fournie pour rendre une vue.

télécharger Commencez avec Angular Téléchargez ce didacticiel Angular au format PDF pratique

Pourquoi Angular? Et quand n'est-ce pas un bon choix?

Le choix d'un framework JavaScript pour une application Web est le genre de processus qui déclenche des guerres de religion entre les développeurs. Je ne suis pas ici pour faire du prosélytisme Angular, mais je veux que vous connaissiez ses avantages et ses inconvénients. Idéalement, vous devez choisir le framework qui convient à votre application, en tenant compte des compétences de votre organisation et des frameworks que vous utilisez dans d'autres applications. En général, Angular dispose d'un bon outillage et convient aux projets très importants et à fort trafic. Angular, en tant que réécriture complète d'AngularJS, a été conçu dès le départ pour une utilisation sur des appareils mobiles et pour des performances élevées. Comme son prédécesseur, il effectue facilement et correctement la liaison de données.

Angular utilise un modèle de composant Web, mais pas des composants Web en soi. Ce n'est pas Polymer, qui crée de vrais composants Web, bien que vous puissiez utiliser des composants Web Polymer dans des applications angulaires si vous le souhaitez. Angular utilise l'inversion des modèles de contrôle (IoC) et d'injection de dépendances (DI), et corrige certains problèmes avec l'implémentation AngularJS de ceux-ci.

Angular utilise des directives et des composants qui mélangent la logique avec le balisage HTML. Une école de pensée dit que mélanger la logique avec la présentation est un péché capital. Une autre école de pensée dit que tout ce qu'un programme fait déclaré au même endroit facilite son développement et sa compréhension. C'est un problème que vous devrez décider vous-même, car je me suis retrouvé sur différents côtés de la question pour différents projets.

Angular a quelques problèmes de documentation, des problèmes fréquents de rétrocompatibilité et de nombreux concepts à apprendre pour un nouveau développeur. D'autre part, Angular possède un énorme écosystème qui comble les lacunes de la documentation d'Angular avec des didacticiels Web tiers, des vidéos et des livres.

À propos de TypeScript

Angular est implémenté dans TypeScript, un sur-ensemble de JavaScript typé canard qui se transforme en JavaScript. En général, les applications TypeScript sont plus faciles à maintenir à l'échelle de production que JavaScript. Le processus simple consistant à déterminer si vos types sont corrects au moment de la compilation élimine une grande classe d'erreurs JavaScript courantes, et la connaissance des types permet aux éditeurs, aux outils et aux IDE d'être plus utiles pour l'achèvement du code, la refactorisation et la vérification du code.

Je suis un grand fan de TypeScript. Je trouve qu'il est beaucoup plus productif de travailler sur un grand projet TypeScript que de travailler sur un gros projet JavaScript. Avec JavaScript, je ne sais vraiment jamais si des bogues se cachent dans le code qui attendent de me mordre, quelle que soit la fréquence à laquelle je lance JSHint. Avec TypeScript, au moins lorsque j'ai ajouté les types, classes, modules et interfaces optionnels, je me sens beaucoup plus en sécurité.

Premiers pas: installez Angular, TypeScript et Visual Studio Code

Cela dit, installons le logiciel et commençons.

Installez Node.js et NPM

Avant de faire quoi que ce soit, vous devez installer Node.js et NPM, le gestionnaire de paquets Node, car ils sont à la base d'une grande partie de l'installation et des outils d'Angular. Pour savoir s'ils sont installés et, le cas échéant, quelles versions sont installées, accédez à une invite de console ou de terminal et tapez les deux commandes suivantes:

$ nœud -v $ npm -v

Sur mon ordinateur, la version Node.js signalée est v6.9.5 et la version NPM est 3.10.10. Ce sont les versions actuelles de support à long terme pour le moment, comme je peux le voir en regardant //nodejs.org/. Si vos versions sont à jour, vous pouvez passer à la section suivante. Si l'une des commandes n'est pas trouvée ou l'une des versions est obsolète, vous devez installer les versions actuelles. Mes versions sont à jour car j'ai récemment réinstallé Node, comme indiqué dans la capture d'écran ci-dessous. L'installation de Node.js et de NPM consiste à accéder à nodejs.org, à appuyer sur le bouton vert LTS et à suivre les instructions.

Une fois l'installation terminée, vérifiez à nouveau les versions pour vous assurer qu'elles sont vraiment mises à jour. Je sais que répéter le test semble paranoïaque, mais un bon programmeur a besoin d'une bonne dose de paranoïa pour éviter les bugs, et les installations avortées ne sont pas rares.

1. Installez Angular

Il existe deux façons d'installer et d'utiliser Angular. Je vais d'abord vous montrer la méthode de l'interface de ligne de commande (CLI), pour plusieurs raisons. La première est que cela correspond mieux à ma façon de travailler. La seconde est que la CLI génère une application de démarrage plus complète que la graine QuickStart. Le troisième est que l'étape de nettoyage dans les instructions de démarrage de QuickStart semble pouvoir faire des ravages si elle est utilisée au mauvais moment ou dans le mauvais répertoire.

Accédez à //angular.io/ et cliquez sur l'un des trois boutons Premiers pas. Ils vont tous au même endroit, l'Angular QuickStart.

Veuillez lire cette page et n'hésitez pas à essayer l'exemple QuickStart sur Plunker via le lien après le premier bloc de code. Une fois que vous pensez pouvoir suivre la @Componentfonction de décorateur et l'expression de liaison d'interpolation angulaire {{name}}, cliquez sur le lien CLI QuickStart à gauche. Ne vous inquiétez pas trop de la façon dont la fonction décoratrice et la liaison d'interpolation sont implémentées: nous y arriverons.

1a. Installer et tester Angular-CL

Nous allons suivre les instructions pour configurer l'environnement de développement CLI. La première étape consiste à installer Angular et sa CLI globalement avec npm:

$ npm install -g @ angulaire / cli

Si vous regardez attentivement le déroulement de l'installation, vous verrez un tas de prérequis et d'outils installés avant Angular et sa CLI. S'il y a des avertissements, ne vous en faites pas. S'il y a des erreurs, vous devrez peut-être les corriger; Je n'ai vu que des avertissements moi-même. Il est prudent de réinstaller la CLI angulaire quand vous le souhaitez.

L'étape suivante consiste à créer un nouveau projet avec la CLI angulaire. J'ai mis le mien dans un répertoire appelé Work sous mon dossier utilisateur personnel.

$ cd work $ ng nouveau my-app

Comme le notent les instructions, la génération de la nouvelle application Angular prend quelques minutes. C'est le bon moment pour préparer une bonne tasse de thé ou de café.

Vous verrez dans la capture d'écran que j'ai revérifié ma version de TypeScript ( tsc -v) après l'installation de la CLI angulaire. Oui, c'était un peu paranoïaque. Et oui, c'est une bonne idée que vous fassiez aussi. Si vous n'avez pas encore installé TypeScript, nous allons nous en occuper maintenant:

$ npm install –g dactylographié

Nous y sommes presque. Ensuite, entrez dans le nouveau répertoire et servez l'application.

$ cd mon-application $ ng servir

Comme le serveur vous le dira, il écoute sur le port 4200. Alors ouvrez un onglet de navigateur sur // localhost: 4200 et vous verrez l'image à gauche.

Le solde de la page CLI QuickStart vous demande de modifier la propriété title et son CSS. N'hésitez pas à le faire avec n'importe quel éditeur de programmation ( pas un traitement de texte!) Que vous avez installé, ou attendez d'installer Visual Studio Code plus tard. La fenêtre du navigateur se mettra à jour automatiquement chaque fois que vous enregistrez, car le serveur surveille le code et met à jour les modifications.

Lorsque vous avez terminé avec le serveur, appuyez sur Control-C dans la fenêtre du terminal pour arrêter le processus.

1b. Installez la graine Angular QuickStart

N'effectuez cette étape que si vous avez sauté l'étape 1a. Si vous effectuez les deux étapes, cette installation écrasera une partie de l'installation de la CLI, et vous devrez la refaire si vous souhaitez l'utiliser à nouveau. Les instructions d'installation de la graine QuickStart offrent deux options pour démarrer le processus: télécharger la graine et la décompresser, ou encore cloner la graine, comme suit:

$ git clone //github.com/angular/quickstart.git démarrage rapide

Quelle que soit l'option que vous choisissez pour obtenir le code, les étapes suivantes sont les mêmes:

$ cd démarrage rapide

(ou ce que vous avez nommé le dossier)

Installation de $ npm

$ npm début

L' npm installétape fait essentiellement la même chose que l' $ npm install -g @angular/cliétape de la version CLI de l'installation, sauf qu'elle installe TypeScript et n'installe pas la CLI angulaire, car elle ne figure pas dans la liste de dépendances dans package.json. En fait, si Angular CLI est déjà installé, ce script le désinstallera .

L' npm startétape exécute ce script:

"start": "simultanément \" npm run build: watch \ "\" npm run serve \ ""

Pour développer cela, les scripts build: watch et serve sont:

"build: watch": "tsc -p src / -w"

et

"serve": "serveur-léger -c = bs-config.json"

Ai-je mentionné que tscc'est le compilateur TypeScript? L' -poption définit le répertoire du projet à compiler et l' -woption dit de regarder les fichiers d'entrée.

L' npm startétape (exécuter les deux scripts simultanément) fera essentiellement la même chose que l' ng serveétape de la version CLI de l'installation, sauf qu'elle est susceptible de choisir un port différent, plus elle chargera automatiquement la page qu'elle sert dans votre configuration par défaut navigateur, et la page ressemblera à l'image de gauche.

Lorsque vous avez fini de jouer avec votre application Angular QuickStart, appuyez simplement sur Ctrl + C ou fermez la fenêtre du terminal pour arrêter le processus. Vous pouvez le redémarrer en retournant dans le répertoire et en exécutant ng serve.

La prochaine étape (facultative) des instructions de démarrage de QuikStart est celle qui me rend nerveux: elle vous dit de supprimer les fichiers non essentiels en utilisant rm -rfMacOS ou delWindows. Si vous décidez de faire cela, vérifiez au moins que vous êtes dans le bon répertoire avant de lancer le script que vous avez copié à partir du site de documentation. Veuillez ne pas l'essayer après avoir commencé à ajouter des fichiers au projet.

Que vous ayez suivi les instructions de démarrage de la CLI ou de QuickStart, votre prochaine étape sera d'explorer le code source d'un projet Angular. À cette fin, installons un éditeur compatible Angular.

2. Installez Visual Studio Code

La page des ressources angulaires recommande trois IDE: IntelliJ IDEA, Visual Studio Code et WebStorm. J'utilise les trois, mais pour les besoins de cet exercice, Visual Studio Code est le meilleur choix car il est gratuit et open source. Accédez à la page d'accueil de Visual Studio Code et téléchargez la version stable actuelle pour votre plate-forme, puis installez le package.

Une fois Visual Studio Code installé, exécutez-le et ouvrez le répertoire qui contient votre projet de base. Sur mon Mac, le projet généré par CLI est à ~/work/my-appet la graine est à ~/work/quickstartmaster. Votre emplacement variera selon que vous avez effectué l'installation CLI ou l'installation initiale, et les choix que vous avez faits concernant leurs répertoires cibles. L'arbre source devrait ressembler à ceci:

Visual Studio Code prend en charge TypeScript prêt à l'emploi, il n'y a donc rien d'autre à installer. Si vous souhaitez installer d'autres langues plus tard, il est facile de le faire dans le panneau Extensions, facilement affiché en cliquant sur l'icône du bas en haut à gauche. Saisissez le nom de la langue ou de l'outil de votre choix dans la zone de recherche en haut du panneau Extensions. Vous pouvez revenir à l'explorateur de fichiers en cliquant sur l'icône du haut en haut à gauche.