Angulaire 2 en 10 minutes

La manière dont nous pouvons développer des applications aujourd'hui a considérablement réduit la complexité des développements, et malgré l'inclusion de nouvelles technologies qui au premier abord peuvent sembler quelque peu compliquées, elles aident en fait non seulement à construire de meilleures applications, mais aussi à s'adapter aux exigences d'utilisabilité actuelles.

L'une de ces technologies que nous pouvons utiliser est AngularJS, qui est un framework MVW (Modèle-Vue-N'importe quoi) qui se traduit par Model-View-Whatever-works-for you, il est basé sur JavaScript et nous permet de fournir nos documents HTML caractéristiques statiques de la fonctionnalité dynamique et d'utiliser les reliures pour injecter des données dans notre HTML en utilisant les propres directives du framework.

Angular fonctionne assez bien, mais nous en avons une nouvelle itération et cela permet d'étendre beaucoup plus les fonctionnalités du framework, alors voyons comment nous pouvons commencer à utiliser Angulaire 2 en seulement 10 minutes.

1. Obtenir TypeScript et Angular 2

Pour réaliser cette implémentation nous allons travailler de la manière la plus optimale possible, pour cela nous utiliserons Manuscrit qui est un langage qui permet d'étendre les fonctionnalités de JavaScript pour le concentrer sur l'utilisation de classes et d'objets.

Pour obtenir autant Manuscrit Quoi Angulaire 2 il faut que nous ayons Node.js, ainsi que son gestionnaire de paquets sur notre ordinateur, si nous ne les avons toujours pas vous pouvez jeter un oeil au premiers pas avec Node.js dans ce tutoriel.

Une fois que nous avons Node.js et le gestionnaire de paquets NMP nous pouvons exécuter les commandes pour obtenir ce dont nous avons besoin :

 npm install -g tsd@^0.6.0 tsd install angular2 es6-promise rx rx-lite 

De plus, nous devons installer le compilateur Manuscrit car le navigateur ne reconnaît pas les fichiers .ts :

 npm install -g typescript@^1.5.0-beta

Une fois exécuté, on devrait voir par console l'installation des modules, du compilateur et des librairies du framework.

AGRANDIR

Enfin, nous n'avons qu'à installer un serveur local, pour exécuter notre application de manière professionnelle, pour cela dans notre console et via NPM nous exécutons ce qui suit :

 npm install -g serveur http

2. Construire notre application

Une fois que nous avons tout le nécessaire pour le fonctionnement de notre application, nous créons un dossier où nous aurons les fichiers du projet, nous pouvons l'appeler angulaire10min, et à l'intérieur, nous allons créer un fichier appelé application.ts et notre habituel index.html.

La première chose que nous allons faire est d'ajouter les classes et les composants à notre fichier application.ts, pour cela la première chose que nous devons faire est d'importer Angulaire 2 comme suit:

 importer {Component, View, bootstrap} depuis 'angular2 / angular2';

Pour vérifier le fonctionnement de notre compilateur dans le dossier de notre projet, nous allons exécuter ce qui suit :

 tsc --watch -m commonjs -t es5 --emitDecoratorMetadata application.ts

Avec ce que nous devrions recevoir par console que la compilation s'est terminée avec succès et qu'elle attend également des modifications dans le fichier, c'est à cause d'avoir utilisé le paramètre -watch.

AGRANDIR

Maintenant, nous créons notre composant, où nous allons déclarer le sélecteur que nous utiliserons dans notre code HTML, ainsi que notre vue où nous inclurons le modèle où nous injecterons les modifications.

 @Component ({selector : 'my-app'}) @View ({template : ''})

Comme notre compilateur surveille les changements et que nous en avons inclus, il est normal que nous voyions une certaine activité dans notre console.

Il ne nous reste plus qu'à faire la déclaration de notre classe et initialiser les objets à l'intérieur du constructeur qui seront ceux qui seront ensuite vidés dans la vue. Enfin nous utilisons la fonction bootstrap() qui se chargera de rendre les composants sur notre page.

 class monComposant {nom : chaîne; constructeur () {this.name = 'Jonathan'; }} bootstrap (myComponent);

Nous avons déjà terminé notre code Typescript, et si nous vérifions dans notre dossier, nous devrions avoir un JavaScript qui est le résultat de notre compilation du .ts.

AGRANDIR

3. Construire le HTML

Enfin, nous devons construire le HTML, effectuer les importations dues ainsi qu'inclure les sélecteurs que nous déclarons dans notre fichier .ts, pour cela nous inclurons le system.js, ce qui nous permettra d'effectuer les importer de notre fichier, voyons le contenu de notre HTML :

 Angulaire 2 en 10 minutes 

Une fois cela fait, nous n'avons plus qu'à lancer notre serveur et lancer notre application, pour cela nous arrêtons le compilateur et exécutons le serveur avec la commande suivante :

 serveur http

Cela installera un serveur dans hôte local : 8080 et il nous permettra d'accéder à notre application.

Nous verrons les données définies dans notre fichier Manuscrit sont ceux injectés dans notre application, de cette façon nous séparons la logique de notre application et nous pouvons avoir un document HTML propre qui ne gère que les sélecteurs que nous avons créés grâce à Angulaire 2, nous donnant une application qui fonctionne de manière plus optimale et efficace en utilisant le moins d'effort possible.