Quelles sont les nouvelles fonctionnalités d'AngularJS 2.0_AngularJS

AngularJS est devenu le framework JavaScript open source le plus populaire dans le monde du développement d'applications Web. Depuis sa création, son succès repose sur une croissance économique étonnante, ainsi que sur le soutien et l'adoption de groupes, notamment de développeurs individuels, d'entreprises et de communautés.

Angular est devenu un framework MVW côté client (Model-View-Whatever) pour créer des applications complexes d'une seule page. Il joue un rôle important à la fois dans les tests d'applications et dans l'écriture d'applications tout en simplifiant le processus de développement.

La version actuelle d'Angular est la 1.3, qui est stable et utilisée par Google (le responsable du framework) pour prendre en charge de nombreuses applications (on estime qu'il y a plus de 1 600 applications chez Google exécutant Angular 1.2 ou 1.3). Angular 2.0 a été officiellement annoncé lors de la conférence du Nigeria en octobre dernier, et la version ne sera pas une mise à jour majeure complexe.

Pourquoi Angular 2.0 est-il lancé ?

Avant de discuter davantage d'Angular 2.0 (la date de sortie estimée est fin 2015), examinons brièvement la philosophie derrière la nouvelle version. Le développement d'Angular 2.0 commence par résoudre les problèmes suivants :

Mobile : La nouvelle version se concentrera sur le développement d'applications mobiles. La raison est qu'il est plus facile de gérer le côté ordinateur, et une fois que les défis impliquent le mobile (performances, temps de chargement), se concentrer sur cet aspect résoudra le problème.

Modularisation : les modules individuels seront supprimés du noyau d'Angular pour de meilleures performances. Cela signifie que vous pouvez choisir les pièces dont vous avez besoin.
Modernisation : Angular 2.0 ciblera les navigateurs modernes ES6 et "evergreen" (qui se mettent automatiquement à jour vers la dernière version). Cela signifie que les développeurs peuvent se concentrer sur le code pertinent pour le domaine métier.

Quelles sont les controverses ?

Il n'y a eu aucune mention d'une voie vers la migration vers la version 2.0 lors de la réunion du Nigeria. Il a également souligné que le passage à la version 2.0 interromprait l'application de la version originale 1.3 et qu'il n'y aurait pas de compatibilité ascendante. Depuis lors, la communauté des développeurs est en proie à l'incertitude et à la spéculation, et certains développeurs ont commencé à se demander s'il vaut la peine de démarrer un nouveau projet Angular 1.3.

Quels sont les changements ?

AtScript

AtScript est un ensemble parent d'ES6 et est utilisé pour développer Angular 2.0. Il est traité par le compilateur Traceur (avec ES6) pour générer du code ES5 et utiliser la syntaxe de type TypeScript pour générer des assertions au moment de l'exécution, remplaçant les vérifications au moment de la compilation. Cependant, AtScript n'est pas obligatoire et vous pouvez toujours utiliser du code JavaScript/ES5 pur au lieu d'AtScript pour écrire des applications angulaires.

Améliorer la saisie des dépendances (DI)

L'idée de base du modèle d'injection de dépendances (Dependency injection) est que la classe client Client n'a pas besoin d'initialiser la variable membre IServer dont elle dépend par elle-même, mais utilise un objet indépendant pour créer une classe d'implémentation appropriée de IServer et affectez-le à la variable membre du client. Il est particulièrement bénéfique pour le développement de modules et l’isolation des composants. Angular 2.0 résoudra cet aspect d'Angular 1.X. Ajout de fonctionnalités manquantes telles que les injecteurs enfants et les contrôles de durée de vie/portée.

Annotations

AtScript fournit des outils pour associer métadonnées et fonctionnalités. Cela aide à construire des instances d'objet qui fournissent les informations nécessaires à la bibliothèque DI (inspectant les métadonnées pertinentes lors de l'appel d'une fonction ou de la création d'une instance d'une classe). Cela facilite également la surcharge des données de paramètres en fournissant une annotation.

Injecteurs enfants

Un injecteur enfant hérite de tous les services de performances de sa classe parent. En fonction des besoins, différents types d'objets peuvent être appelés et différents domaines d'application automatiquement couverts.

Portée de l'instance

La bibliothèque DI améliorée proposera une portée d'instance, qui devient encore plus puissante lors de l'utilisation d'injecteurs enfants et de ses propres identifiants de portée.

Modèle et liaison de données

Lors du développement d'applications, les modèles et la liaison de données iront de pair.

Chargement dynamique

Il s'agit d'une fonctionnalité manquante dans la version actuelle d'Angular, mais qui apparaîtra dans Angular 2.0. Cela permettra aux développeurs d'ajouter de nouvelles commandes ou contrôleurs en déplacement.

Modèle

Dans Angular 2.0, le processus de compilation des modèles sera asynchrone. Étant donné que le code est basé sur la spécification du module ES6, le chargeur de module chargera les dépendances en faisant simplement référence à la définition du composant.

Commandes

Il y aura trois instructions dans Angular 2.0 :

Directives de composants – Celles-ci créeront des composants réutilisables via une logique encapsulée en JavaScript, HTML ou une feuille de style CSS facultative.

Directives de décoration - Ces directives seront utilisées pour décorer l'élément (comme l'ajout d'une info-bulle ou l'utilisation de ng-show/ng-hide pour afficher/masquer l'élément).

Directives de modèle - celles-ci transformeront le HTML en modèles réutilisables. L'instanciation et l'intégration de modèles dans le DOM peuvent être entièrement contrôlées par des directives. Des exemples incluent ng-if et ng-repeat.

Plan de routage

Le routage angulaire initial est conçu pour gérer certaines situations simples. Cependant, à mesure que le framework évolue, de plus en plus de fonctionnalités sont ajoutées. Le routage est déjà extensible dans Angular 2.0 et inclura les fonctionnalités de base suivantes :

Configuration de routage simple basée sur JSON ;

Contrats optionnels sur configuration

Statique. Mode de routage paramétré ;

Analyseur d'URL ;

Prend en charge la chaîne de requête

Utilisez le statut push ou Hashchange

Modèle de navigation (génère une interface utilisateur de navigation)

Titre du document mis à jour ;

Traitement du routage 404 ;

Services de localisation ;

Opérations historiques.

Jetons maintenant un coup d'œil aux fonctionnalités de routage qui propulsent Angular 2.0 vers de nouveaux sommets :

Sous-route

Le sous-routage transformera chaque composant de l'application en applications plus petites en leur fournissant leurs propres itinéraires, ce qui aidera à encapsuler l'ensemble des fonctionnalités de l'ensemble de l'application.

Activation de l'écran

Cela aidera les développeurs à mieux contrôler le cycle de vie de la navigation grâce à un ensemble de rappels can* :

canActivate - autoriser/bloquer la navigation vers de nouveaux contrôleurs

activer - répondre à une navigation réussie vers le nouveau contrôleur

canDeactivate - Autoriser/bloquer la navigation à partir des anciens contrôleurs

désactiver - répond à une navigation réussie loin de l'ancien contrôleur

Ces rappels permettront aux développeurs de renvoyer une valeur booléenne ou une commande (pour un contrôle de niveau inférieur).

Conception

Toute cette logique est construite à l'aide d'une structure de pipeline, ce qui rend très facile l'ajout de vos propres étapes au pipeline ou la suppression des éléments par défaut. De plus, sa nature asynchrone permettra aux développeurs d'utiliser les requêtes du serveur pour authentifier ou charger des données pour les contrôleurs, même si cela est encore prévu.

Journal

Angular 2.0 inclura un service de journalisation appelé diary.js - une fonctionnalité très utile pour mesurer où votre temps est passé dans votre application.

Portée

$scope sera supprimé d'Angular 2.0 et remplacé par des classes ES6.

Conclusion

À l'approche de la date de sortie, l'enthousiasme et le buzz autour d'Angular 2.0 vont s'intensifier. Est-ce que rompre le changement est une bonne chose ? Nous n’avons aucun moyen de le savoir, mais les opposants sont naturellement nerveux étant donné l’absence apparente de projets de délocalisation. L’excitation est venue tout de suite. Mais puisqu’il arrive, ce que nous pouvons faire, c’est l’accueillir activement.

Le contenu ci-dessus vous présente les nouvelles fonctionnalités d'AngularJS 2.0. J'espère qu'il vous sera utile !