Angular 7.0 – Quoi de neuf dans son nouvel Avatar ?

Publié: 2018-12-29

La force d'un bâtiment réside dans ses piliers en béton. Il en va de même pour le cadre d'une application Web. Un cadre logiciel fournit un moyen standard de concevoir, de créer et de déployer des applications. Dans un monde de plates-formes Java, le framework Javascript était le mot à la mode le plus prononcé jusqu'à ce qu'Angular prenne de l'importance.
Voyons maintenant quelques fonctionnalités saillantes d'Angular.

  • Angular est un framework Javascript open source qui s'est transformé en ce qu'on appelle maintenant "Typescript".
  • La génération et le développement de code sont rapides par rapport à un code JS (Javascript).
  • L'invite de ligne de commande (CLI) contient des commandes pour créer une application plus rapidement.
  • Le code est bien organisé car il utilise des composants, ce qui améliore la productivité
  • Une directive est une fonction dynamique qui gère les variables, les instructions if et les boucles en HTML
  • Angular est multiplateforme, il est donc indépendant du navigateur et du système d'exploitation
  • Angular CLI est livré avec des outils de test utiles pour les tests unitaires

Apprenez des cours de génie logiciel en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Table des matières

AngularJS - Un précurseur d'Angular

AngularJS a été le premier produit de la série Angular introduite par Google en 2009. Il s'agit d'un framework côté client ou frontal. Cela signifie que le code s'exécute sur le navigateur de l'utilisateur et non sur le serveur Web. AngularJS a été écrit uniquement en Javascript. Cela a été développé pour découpler la logique de l'application, cependant, c'était la seule voie assez réussie et pavée pour Angular avec son avatar actuel 7.0.
AngularJS est-il le bon choix pour votre prochain développement d'applications mobiles ?

Cadre angulaire 7.0

Comprenons brièvement les éléments constitutifs d'Angular :

  1. Module : Décompose logiquement les principaux écrans de l'application. Par exemple, s'il existe une page de panier d'achat, on peut souhaiter avoir un module de panier d'achat.
  2. Composant : C'est une section de l'interface utilisateur et c'est une 'classe' comme dans la programmation orientée objet. C'est le bloc de construction fondamental de l'interface utilisateur (UI). La classe de composant contient la logique de base de la page.
     Les composants sont constitués de :

    1. Modèle : Un modèle est écrit en HTML ou il peut s'agir de fichiers HTML. Il peut avoir des propriétés dynamiques comme des variables et l'utilisation de "conditions si" est possible avec des directives.
    2. Classe : est le code de l'application. Le code est écrit en Typescript. Typescript est un sur-ensemble de Javascript. Typescript est un langage de type "statique" dans lequel les variables sont déclarées avec des types définis. Par conséquent, les erreurs sont détectées lors de la compilation du programme plutôt que lors de l'exécution. Les classes angulaires peuvent également être écrites en Javascript. Les composants ont des propriétés de données et des méthodes.
    3. Metadata : Pour identifier que la classe est un composant Angular on utilise Metadata. Les métadonnées peuvent être jointes à Typescript à l'aide d'une déclaration de décorateur.
       Passons en revue un composant simple dans Angular.

       Importer {composant} depuis ''@angular/core'' ; Ici, le package de composants est importé de la bibliothèque de base angulaire.
@component ({ (ceci est une déclaration de décorateur)
Sélecteur : 'myapplication' …(.c'est la balise HTML personnalisée que nous utilisons pour insérer le composant. )
Modèle : '<h1> Bonjour {(nom)}</h1> (le nom est une variable)
})
export class AppComponent{ (Il s'agit de la classe du composant et 'name' est une propriété de la classe)
name = 'Cadre angulaire';
}
<corps>
<myapplication>Chargement d'un exemple de composant d'application ici..</myapplication>
</body>
    4. Liaison de données : Un processus qui permet la communication entre le composant et la vue. Ainsi, les données sont transmises du composant à la vue et vice-versa. Il existe quatre types de liaison de données. Dans l'interpolation et la liaison de propriété, les données sont envoyées du composant à la vue et dans la liaison d'événement, les données sont envoyées au composant à partir de la vue ou du modèle. Dans une liaison bidirectionnelle, les données voyagent dans les deux sens.
    5. Service : Il s'agit d'une classe écrite pour du code réutilisable, c'est-à-dire du code accessible à partir de plusieurs composants. Ces classes envoient des données et des fonctionnalités entre les composants. Les classes de service peuvent également obtenir des données à partir d'une base de données ou d'un fichier js/JSON. Lorsque l'on utilise une classe Service, le code semble organisé et fragmenté.
    6. Directive : La personnalisation des attributs HTML pour étendre la puissance du HTML est une directive. ngIf, ngFor, ngModel sont des directives. ngModel est responsable de la liaison de la vue dans le modèle, ce que d'autres directives telles que input, textarea ou Select exigent.
       Voici un morceau de code qui montre comment fonctionne ngmodel.

       <div ng-app="" ng-init="firstName='John'">
<p>Entrez un nom dans la zone de saisie :</p>
<p>Nom : <input type="text" ng-model="firstName"></p>
<p>Vous avez écrit : {{ firstName }}</p>
</div>

      Ainsi, firstName a été initialisé à 'John' et lorsque l'on entre une nouvelle valeur dans la zone de texte, firstName contiendra le nouveau nom entré.

    7. Injection de dépendance (DI) : les classes ont besoin d'objets pour exécuter une fonction particulière. Au lieu de créer les objets à chaque fois dans la classe, la classe reçoit les objets (dépendances) de sources externes. Dans le cadre DI, voici les étapes à suivre :
      1. Créez une classe de service, par exemple. Données des employés
      2. Enregistrez cette classe de service auprès de l'injecteur. Un injecteur est un conteneur qui contient toutes les classes de dépendance
      3. Déclarez la classe Employeedata en tant que dépendance dans la classe qui en a besoin, par exemple. Classe EmployeeListEmployeeList Class
Que fait un développeur de logiciels ?

Versions d'angulaire

Après AngularJS, Angular 2 est sorti, une réécriture complète d'AngularJS. Les composants ont été ajoutés à partir d'Angular 2. Angular 2 n'était pas rétrocompatible. Angular est composé d'un tas de packages et le package Router dans Angular 3 n'était pas synchronisé. Par conséquent, l'équipe Angular est passée à Angular 4 qui a été publié avec toutes les corrections et fonctionnalités avec une rétrocompatibilité avec Angular 2. Par la suite, Angular 5, Angular 6 ont été publiés et la dernière version est maintenant Angular 7 .

Quoi de neuf dans Angular 7.0 ?

  1. Invites CLI : Un changement dans l'invite de ligne de commande angulaire est que la CLI invite l'utilisateur à sélectionner les fonctionnalités lors de l'exécution des commandes communes. Des fonctionnalités telles que le routage angulaire ou le format de la feuille de style et bien d'autres peuvent être sélectionnées par l'utilisateur. Dans les versions précédentes d'Angular, il fallait se souvenir et taper les options à l'invite.
  2. Performances applicatives :
    1. Erreurs courantes:
       Dans cette version, l'équipe angulaire a analysé et supprimé certaines erreurs courantes commises par les développeurs, telles que le polyfill 'reflect-metadata' a été inclus dans la production, ce qui n'est en fait nécessaire qu'au développement.
    2. Budgets groupés :
       Pour améliorer les performances de l'application, les budgets de bundle par défaut sont définis dans angular.JSON. Les développeurs seront désormais avertis si la taille du bundle d'applications dépasse une limite de 5 Mo et lorsque le bundle initial dépasse 2 Mo. Ces valeurs peuvent être modifiées dans le fichier JSON selon les besoins.
  3. Matériau angulaire et CDK : le kit de développement de composants angulaires (CDK) a été créé à partir du matériau angulaire (interface utilisateur pour les bibliothèques). Les deux nouvelles fonctionnalités ajoutées dans le CDK sont
    1. Défilement virtuel :
       Pour charger uniquement la partie visible à l'écran, le package <cdk-virtual-scroll-viewport> fournit des aides pour les directives qui réagissent aux événements de défilement. Ainsi, seuls les éléments pouvant tenir à l'écran seront affichés. Lorsqu'un utilisateur fait défiler la liste, le DOM charge et décharge dynamiquement les éléments en fonction de la taille d'affichage.
    2. Prise en charge du glisser-déposer :
       Le module @angular/cdk/drag-drop permet de libérer la fonctionnalité de glisser-déposer d'un élément, de réorganiser les éléments dans une liste, de déplacer des éléments dans une liste, etc. Cela se fait à l'aide des directives cdkDropList et cdkDrag.
  4. Angular 7.0 a mis à jour ses dépendances pour prendre en charge Typescript 3.1, RxJS 6.3 et Node 10 .
  5. Amélioration de l'accessibilité des sélections : la « sélection » native présente certains avantages en termes de performances, d'accessibilité et de convivialité. Par conséquent, l'utilisation d'un élément de sélection natif dans un « mat-form-field » est une nouvelle fonctionnalité d'Angular 7.0.
  6. Éléments angulaires : Un petit changement mais nouveau dans Angular 7
     " Angular Elements prend désormais en charge la projection de contenu à l'aide de normes Web pour les éléments personnalisés . " — C'est ce que dit Stephen Fluin, Angular.
  7. Travailler avec des partenaires : L'équipe Angular a travaillé en partenariat avec des projets communautaires qui ont été lancés récemment, l'un d'eux est Angular Console. Angular Console est une interface utilisateur pour Angular CLI. C'est bon pour les débutants et les experts car c'est beaucoup plus facile que les invites. Il existe différentes versions d'interface utilisateur pour Windows et Mac OS .
Guide du débutant sur l'architecture MVC en Java

La plupart des modifications apportées à Angular 7.0 concernent l'amélioration des performances et la correction des bogues. Par conséquent, il s'agit de la version la plus sûre à ce jour et la migration à partir de versions antérieures est simple. Ivy est le nouveau moteur de rendu à venir sur lequel travaille l'équipe Angular. Jusque-là, attendons et observons. Continuez à apprendre !

Si vous souhaitez en savoir plus sur le développement de logiciels à pile complète, consultez le programme exécutif PG de upGrad & IIIT-B en développement de logiciels - Spécialisation en développement de pile complète qui est conçu pour les professionnels en activité et offre plus de 500 heures de formation rigoureuse, 9+ projets et affectations, statut d'ancien de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.

Devenir Développeur Full Stack

Postulez pour la certification PG liée à l'emploi d'upGrad en génie logiciel