Angularjs et Angular 2: une comparaison détaillée

Les principales différences entre AngularJS et Angular 2

Cet article compare les principales différences entre les AngularJS de première génération et Angular 2. Si vous utilisez actuellement un projet AngularJS et que vous ne savez pas si vous devez migrer, cet article vous aidera à démarrer. Ces dernières années, Angular s'est développé rapidement en tant que cadre et plate-forme pour développer des applications à une page (SPA) et des applications Web progressives (PWA).

AngularJS est le concept de vision des vues basée sur la programmation déclarative. Cela nécessite le découplage des opérations DOM de la logique commerciale de l'application, qui présente de nombreux avantages en soi. Cependant, AngularJS a de nombreuses lacunes en termes de performances et comment elle fonctionne en bas. L'équipe de développement a donc passé un an à réécrire le code à partir de zéro et a publié Angular 2 fin 2016. La plupart des développeurs considèrent Angular 2 comme une plate-forme différente qui a peu de ressemblance avec les AngularJS d'origine. Comparons et comparons Angularjs et Angular 2.

Architecture du framework

AngularJS suit l'architecture traditionnelle MVC (modèle-View-contrôleur), y compris les modèles, les vues et les contrôleurs:

• Contrôleur: gère l'interaction utilisateur, les modèles de liaison et les vues.
• Vue: représente la couche de présentation et l'interface utilisateur réelle.
• Modèle: Représentation abstraite des données.

Certains développeurs croient qu'AngularJS suit le modèle MVVM et remplace le contrôleur par un modèle de vue. Le modèle de vue est une fonction JavaScript similaire à un contrôleur. Ce qui le rend spécial, c'est qu'il synchronise les données entre la vue et le modèle. Les modifications apportées aux éléments d'interface utilisateur se propagent automatiquement au modèle et vice versa. La figure suivante montre comment divers composants AngularJS sont connectés ensemble.

Angular adopte une architecture basée sur des composants. Chaque application angulaire a au moins un composant appelé composant racine. Chaque composant a une classe connexe qui gère la logique métier et un modèle représentant la couche de vue. Plusieurs composants étroitement apparentés peuvent être empilés pour créer des modules, chaque module lui-même formant une unité fonctionnelle.

Comme vous pouvez le voir sur la figure, le composant est lié au modèle. Les composants sont composés à l'aide de classes TypeScript et leur joignent des modèles à l'aide de l'annotation @component. Les services peuvent être injectés dans des composants à l'aide du sous-système d'injection de dépendance d'Angular. Le concept de module dans Angular est très différent du module AngularJS. Ngmodule est un conteneur qui définit les unités fonctionnelles. NGModule peut contenir des composants, des services et d'autres fonctions. Les unités de module peuvent ensuite être importées et utilisées avec d'autres modules.

Modèle

Dans AngularJS, les modèles sont écrits en HTML. Pour le rendre dynamique, vous pouvez ajouter du code spécifique à AngularJS tel que les propriétés, les balises, les filtres et les contrôles de formulaire. De plus, il prend en charge la technologie de liaison des données bidirectionnelle susmentionnée. L'extrait de code suivant démontre l'utilisation de directives et de doublures dans un modèle:

<code class="language-html"><div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar">
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  
</div></code>

Dans Angular, la structure du modèle d'AngularJS a été améliorée et de nombreuses nouvelles fonctionnalités ont été ajoutées au modèle. La principale différence est que chaque composant a un modèle connecté. Tous les éléments HTML fonctionnent dans le modèle sauf <script></script>, <style></style>, <base> et <title></title>. De plus, il existe également des fonctions telles que la liaison du modèle, l'interpolation du modèle, les instructions de modèle, la liaison d'attribut, la liaison des événements et la liaison bidirectionnelle. Les instructions d'attribut intégrées (telles que NGClass, NGSTYLE et NGMODEL) et les instructions de structure intégrées (telles que NGIF, NGFOROF, NGSWitch) font également partie du modèle.

Injection de dépendance

L'injection de dépendance est un modèle de conception qui est responsable de la satisfaction des dépendances et de les injection en composants en cas de besoin. Cela évite la nécessité de coder les dépendances en composants. AngularJS possède un sous-système d'injecteur qui est responsable de la création de composants, de l'injection des dépendances et de l'analyse d'une liste de toutes les dépendances. Les composants suivants peuvent être injectés au besoin:

• valeur
• usine
• Service
• fournisseur
• constant

Les services, les instructions et les filtres peuvent être injectés à l'aide de méthodes d'usine. Voici un exemple de méthode d'usine. La méthode d'usine est enregistrée avec un module nommé Mymodule:

<code class="language-javascript">angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);</code>

Bien que la méthode reste la même, Angular a un nouveau système d'injection de dépendance différent de l'ancien mode DI. L'injection de dépendance d'Angular est gérée par un tableau de @ngmodule qui contient des prestataires et des déclarations. Le tableau des déclarations est l'espace pour déclarer les composants et les instructions. Les dépendances et les services sont enregistrés via les fournisseurs de fournisseurs.

Supposons que vous ayez un service qui récupère une liste de contacts appelée ContactListService et le fournit au composant ContactList. Vous devez d'abord enregistrer le ContactListService dans le tableau app.module.ts dans providers. Ensuite, vous devez injecter le service dans le composant comme suit:

<code class="language-typescript">import { Component }   from '@angular/core';
import { Contact }        from './contact';
import { ContactListService } from './contactlist.service';

@Component({
  selector: 'app-contacts-list',
  template: `
    <div contact of contacts>
      {{contact.id}} - {{contact.name}} - {{contact.number}}
    </div>
  `
})
export class ContactListComponent {
  contacts: Contact[];

  constructor(contactlistService: ContactListService) {
    this.contacts = contactlistService.getcontacts();
  }
}</code>

Ici, nous disons à Angular d'injecter des services dans le constructeur du composant.

JavaScript vs TypeScript

AngularJS est un cadre JavaScript pur. Cela rend l'ensemble du processus de configuration du projet beaucoup plus facile. Tout développeur ayant une expérience JavaScript de base peut commencer à utiliser le framework. Pour cette raison, la courbe d'apprentissage d'Angular 1.0 est très lisse par rapport aux autres cadres frontaux.

Angular 2 introduit TypeScript comme langue par défaut pour la création d'applications. TypeScript est un superset de syntaxe de JavaScript, compilé en javascript ordinaire. L'équipe angulaire a choisi TypeScript via JavaScript en raison de la fonctionnalité d'annotation de type, qui vous permet d'effectuer la vérification des types statiques en option. La vérification de type empêche les erreurs de compilation de compilation de se faufiler dans votre code qui pourraient autrement être ignorés. Cela rend votre code JavaScript plus prévisible.

De plus, TypeScript est également populaire pour ses classes, interfaces et décorateurs (décorateurs de classe, décorateurs d'attributs et décorateurs de paramètres). Angular utilise la classe TypeScript pour définir les composants. @Component est un exemple populaire de la façon d'attacher des métadonnées à un composant utilisant un décorateur de classe. En règle générale, cela inclut les détails de configuration des composants tels que les balises de sélecteur de modèles, les modèles et les tableaux de fournisseurs afin que vous puissiez injecter toutes les dépendances associées dans le composant:

<code class="language-html"><div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar">
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  
</div></code>

Prise en charge de l'outil

Un meilleur support d'outils aide les développeurs à construire des choses plus rapidement et à les ajouter au flux de travail de développement global. Par exemple, l'interface de ligne de commande (CLI) peut réduire considérablement le temps nécessaire pour créer une application à partir de zéro. De même, il existe d'autres outils comme IDE, l'éditeur de texte, le kit de test, etc. qui peuvent vous aider à faciliter le développement.

AngularJS n'a pas de CLI officiel, mais il existe de nombreux générateurs et outils tiers disponibles. Pour IDE, Webstorm et Aptana sont des choix populaires parmi les développeurs. Si vous êtes comme moi, vous pouvez personnaliser un éditeur de texte normal comme l'éditeur de texte Sublime et y ajouter le bon plugin. AngularJS a une extension de navigateur pour le débogage et les tests appelés inspecteur NG. La structure AngularJS permet l'accessibilité aux modules tiers. Vous pouvez trouver tous les modules NG populaires sur ngmodules.org, un projet open source pour héberger les modules AngularJS.

Angular a plus de support d'outils que AngularJS. Il existe une CLI officielle qui vous permet d'initialiser de nouveaux projets, de les servir et de construire des packages optimisés pour la production. Vous pouvez lire la CLI angulaire sur GitHub pour plus d'informations. Étant donné qu'Angular utilise TypeScript au lieu de JavaScript, Visual Studio est pris en charge comme IDE. Ce n'est pas tout. Il existe également de nombreux plug-ins IDE et outils autonomes qui peuvent vous aider à automatiser et accélérer certains aspects de votre cycle de développement. Augury pour le débogage, NGREV pour l'analyse du code, Codelyzer pour la vérification du code, etc. sont tous des outils très utiles.

Résumé

AngularJS a de nombreux défauts - principalement liés aux performances, mais c'était le choix incontournable pour un prototypage rapide. Cependant, cela n'a aucun sens de revenir à AngularJS maintenant ou de maintenir le projet AngularJS. Si vous n'avez pas encore migré, vous devriez envisager de le faire.

Dans cet article, nous introduisons les cinq principales différences entre AngularJS et Angular 2. Presque tout sauf la structure du modèle et les méthodes d'injection de dépendance ont été améliorées. De nombreuses caractéristiques angulaires 1.0 populaires, telles que les contrôleurs, les lunettes, les instructions, les définitions de modules, etc., ont été remplacées par d'autres alternatives. De plus, le langage sous-jacent a été modifié et la structure a été modifiée.

AngularJS et FAQ angulaires (FAQ)

(La partie FAQ est omise ci-dessous car elle est trop longue et ne correspond pas aux exigences pseudo-originales. La partie FAQ peut être éventuellement conservée ou réorganisée au besoin, et le traitement pseudo-original tel que les synonymes est remplacé .)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!