web-dev-qa-db-fra.com

AngularJS vs Angular

Il y a quelques mois, j'ai décidé d'étudier Angular. Lorsque je faisais des progrès et que je créais une application qui l'utilisait, je me suis rendu compte que Angular 2 est dans l'aperçu du développeur, c'est donc une question de temps avant sa sortie. Parce que Angular 2 ne sera pas compatible avec Angular 1, et qu'il y a beaucoup de changements, la question est de savoir s'il vaut mieux continuer à développer avec Angular 1.x ou commence à développer Angular 2?

C'est un fait que nous ne devons pas toujours utiliser la dernière version ni le dernier langage du marché, mais dans ce cas, l'application est encore petite et je peux donc changer sans problème.

angularjsangular
138
emmanuel sio

Permettez-moi de commencer par dire, je suppose que vous et tous ceux qui lirez ceci lisent déjà confortablement avec Angular 1 ( à présent appelé AngularJS , par opposition à simplement angulaire pour les versions les plus récentes). Ceci étant dit, passons à quelques ajouts et différences clés dans Angular 2+.

  1. Ils ont ajouté un angular cli.

Vous pouvez démarrer un nouveau projet en exécutant _ng new [app name]_. Vous pouvez servir votre projet en exécutant _ng serve_ en savoir plus ici: https://github.com/angular/angular-cli

  1. Votre code angular est écrit en ES6 TypeScript et est compilé au moment de l'exécution en Javascript dans le navigateur.

Pour bien comprendre cela, je vous recommande de consulter la liste de ressources qui se trouve au bas de ma réponse.

  1. Structure du projet

Dans une structure de base, vous aurez un dossier _app/ts_ dans lequel vous effectuerez le plus votre travail et un _app/js_ Vous trouverez dans les fichiers de dossiers _app/js_ un _.js.map_ extension. Ils "mappent" vos fichiers ".ts" sur votre navigateur pour le débogage car votre navigateur ne peut pas lire le typeScript natif.

Mise à jour : La version bêta est épuisée. La structure du projet a légèrement changé dans la plupart des cas et si vous utilisez le angular cli, vous travaillerez dans le dossier _src/app/_. Dans un projet de démarrage, vous aurez les éléments suivants.

_app.component.css 
app.component.html
app.component.spec.ts
app.component.ts 
app.module.ts
index.ts
_

app.component.css : fichier CSS à utiliser, spécifique à _component.html_

app.component.html : une vue (variable déclarée dans le fichier app.component.js)

app.component.spec.ts : utilisé pour tester _app.component.ts_

app.component.ts : votre code qui se lie à _app.component.html_

app.module.ts : C'est ce qui lance votre application et où vous définissez tous les plugins, composants, services, etc. C'est l'équivalent du _app.js_ in Angular 1

index.ts utilisé pour définir ou exporter des fichiers de projet

Informations complémentaires:
Astuce: vous pouvez exécuter _ng generate [option] [name]_ pour générer de nouveaux services, composants, tuyaux, etc.

Le fichier _tsconfig.json_ est également important car il définit les règles de compilation TS pour votre projet.

Si vous pensez je dois apprendre un tout nouveau langage? ... Euh ... un peu, TypeScript est un sur-ensemble de JavaScript. Ne soyez pas intimidé il est là pour faciliter votre développement. J'avais l'impression de bien le maîtriser après quelques heures d'utilisation et de tout perdre après trois jours.

  1. Vous liez votre code HTML de la même manière que vous le feriez dans une directive Angular 1. Les variables telles que _$scope_ et _$rootScope_ sont obsolètes.

Celui-ci vous a peut-être été impliqué. Angular 2 est toujours un MV * mais vous utiliserez des composants ( 'pour lier du code à vos modèles, par exemple, prenez ce qui suit

_    import { Component } from '@angular/core';

    @Component({
         selector:'my-app',
         template: '<h1> Hello World! </h1>'
    })

    export class AppComponent {}
_

Pensez ici à l'instruction import comme étant votre injection de dépendance dans un contrôleur v1. Vous utilisez import pour importer vos packages, où _import {Component}_ indique que vous allez créer un component auquel vous souhaitez vous connecter. votre HTML.

Remarquez le décorateur _@Component_ que vous avez un selector et template. Pensez ici à la selector comme étant votre _$scope_ que vous utilisez comme vous utilisez v1 directives où le nom de la selector est ce que vous utilisez pour lier votre code HTML comme suit

_<my-app> </my-app>
_

Où _<my-app>_ est le nom de votre balise personnalisée à utiliser qui servira d’espace réservé pour ce qui est déclaré dans votre modèle. i.e.) _<h1> Hello World! </h1>_. Considérant que ceci ressemblerait à ceci dans la v1:

HTML

_<h1>{{hello}}</h1>
_

JS

_$scope.hello = "Hello World!"
_

Aussi, pouvez-vous ajouter quelque chose entre ces balises pour générer un message de chargement, comme ceci:

_<my-app> Loading... </my-app> 
_

Ensuite, il affichera " Chargement ... " comme message de chargement.

Notez que ce qui est déclaré dans template est le chemin ou le code HTML brut que vous utiliserez dans votre HTML dans votre balise selector.

Une implémentation plus complète de Angular 1 ressemblerait davantage à ceci:

HTML

_<h1 ng-controller="myCtrl">{{hello}}</h1>
_

En v1, cela ressemblerait à quelque chose comme

JS

_angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})
_

C'est ce que j'aime vraiment dans la v2. J'ai trouvé que la directive était une courbe d'apprentissage abrupte pour moi dans la v1 et même lorsque je les avais deviné, j'avais souvent le CSS non conforme à mes intentions. Je trouve que c'est beaucoup plus simple.

La V2 permet une évolutivité plus facile de votre application car vous pouvez la casser plus facilement que dans la v1. J'aime cette approche car vous pouvez avoir toutes vos pièces de travail dans un seul fichier au lieu d'en avoir plusieurs dans angular v1.

Qu'en est-il de la conversion de votre projet de v1 en v2?

D'après ce que j'ai entendu dire de l'équipe de développement, si vous souhaitez mettre à jour votre projet v1 vers v2, vous allez simplement supprimer et supprimer des blobs obsolètes et remplacer votre _$scope_ s par selectors. J'ai trouvé cette vidéo utile. C'est avec une partie de l'équipe Ionic qui travaille côte à côte avec l'équipe angular, car la v2 est plus axée sur le mobile https://youtu.be/OZg4M_nWuIk Espérons que cela aide.

UPDATE: J'ai mis à jour en ajoutant des exemples car les implémentations officielles de Angular 2 sont apparues.

UPDATE 2: Cela semble être une question populaire, aussi je me suis dit que je pourrais utiliser une ressource que j'ai trouvée très utile lorsque j'ai commencé à travailler avec angular 2.

Ressources utiles:

Pour plus d'informations sur l'ES6, je vous recommande de consulter The New Boston's didacticiels ECMAScript 6/ES6 concernant les nouvelles fonctionnalités - Playlist YouTube

Pour écrire des fonctions TypeScript et voir comment elles se compilent en Javascript, jetez un œil à Terrain de jeu en langage TypeScript

Pour voir une ventilation fonction par fonction de ce que l’équivalence Angular 1 est en Angular 2, voyez le Angular.io - Cookbook -A1 A2 Guide de référence rapide

144
garrettmac

Cela pourrait vous aider à mieux connaître Angular 1 vs Angular 2.

Le Angular 2 s'est avéré avoir de nombreux avantages sur Angular 1:

  • Il est entièrement basé sur les composants.
  • Meilleure détection des changements
  • La compilation AOT (Time of Time) améliore la vitesse de rendu.

  • TypeScript peut être utilisé pour développer Angular 2 applications

  • Angular 2 a de meilleures performances que Angular 1.

  • Angular 2 a un système de gabarit plus puissant que Angular 1.

  • Angular 2 a des API plus simples, un chargement différé, un débogage plus facile.

  • Angular 2 est beaucoup plus testable que Angular 1.

  • Angular 2 fournit des composants imbriqués.

  • Angular 2 permet d'exécuter plus de deux systèmes simultanément.

  • Etc..

33
Anil Singh

Angular 2 and Angular 1 est fondamentalement un framework différent portant le même nom.

angular 2 est plus prêt pour l'état actuel des normes Web et de l'état futur du Web (ES6\7, immuabilité, composants, DOM fantôme, employés de service, compatibilité mobile, modules, TypeScript, etc., etc.).

angular 2 a tué de nombreuses fonctionnalités principales dans angular 1 like - contrôleurs, $ scope, directives (remplacées par des annotations @component), la définition du module, et bien plus, même des choses simples comme ng-repeat n'a pas quitté le comme c'était.

de toute façon, le changement est bon, angular 1.x avait ses défauts, et angular 2 est plus prêt pour les besoins futurs du Web.

pour résumer les choses - je ne vous recommande pas de démarrer un projet angular 1.x maintenant - c'est probablement le pire moment pour le faire car vous devrez migrer plus tard vers angular 2, si vous vous concentrez sur angular que choisissez angular 2, Google a déjà lancé un projet avec angular 2 et à la fin de celui-ci. angular 2 devrait déjà être à l'honneur. si vous voulez quelque chose de plus stable, vous pouvez envisager de réagir en tant que framework JS.

angular 2 va être génial, c'est sans doute.

14
Ran Sasportas

Aucun cadre n'est parfait. Vous pouvez en savoir plus sur les défauts dans Angular 1 ici et ici . Mais cela ne signifie pas que c'est mauvais. La question est quel problème résolvez-vous. Si vous souhaitez déployer rapidement une application simple, légère, avec une liaison de données limitée tilisation , continuez avec Angular 1. Angular 1 a été créé. 6 ans en arrière pour résoudre le prototypage rapide qui fait très bien. Même si votre cas d'utilisation est complexe, vous pouvez toujours utiliser Angular 1, mais vous devez être au courant des nuances et des meilleures pratiques pour la création d'une application Web complexe. Si vous développez une application à des fins d'apprentissage, je suggérerais de passer à Angular 2, car c'est là que se trouve l'avenir de Angular.

7
csp

La caractéristique unique de Angular v2 et de ReactJs est qu’ils ont tous deux adopté la nouvelle architecture de développement Web-Components. Cela signifie que nous pouvons désormais créer des composants Web indépendants et les connecter à tout site Web du monde doté de la même pile technologique que ce composant Web. Cool! oui très cool. :)

L'autre changement le plus important dans Angular v2 est que son langage de développement principal n'est autre que TypeScript. Bien que TypeScript appartienne à Microsoft et qu’il s’agisse d’un sur-ensemble de JavaScript de 2015 (ou ECMAScript6/ES6), il présente certaines fonctionnalités très prometteuses. Je recommanderais aux lecteurs de vérifier TypeScript un peu plus en détail (ce qui est amusant bien sûr) après avoir lu ce tutoriel.

Ici, je dirais que les gars qui tentent d’interconnecter Angular v1 et Angular v2 troublent encore plus les lecteurs et, à mon humble avis, Angular v1 et Angular v2 doit être traité comme deux frameworks différents. Dans Angular v2, nous avons le concept de développement d'applications Web de Web-Components, alors que dans Angular v1, nous devons jouer avec des contrôleurs et (malheureusement ou heureusement) aucun contrôleur n'est présent dans Angular v2.

5
Ammar Hasan

Une chose à noter est angular2 utilisant TypeScript.

J'ai fait angular1 avec cordova chez mon stagiaire et maintenant je fais un angular 2. Je pense que angular2 sera la tendance car elle est plus structurée à mon avis, mais les inconvénients sont qu'il y a peu de ressources à renvoyer avoir un problème ou des difficultés. angular 1.x contient des tonnes de directives personnalisées qui peuvent être super faciles à utiliser.

J'espère que ça aide.

3
Bob Zhang

Angular 2 est bien meilleur que 1, en fonction de ce qu’il offre, la prise en charge des composants Web, l’utilisation de TypeScript, la performance et la simplicité générale de l’interface, ont été la raison pour laquelle j’ai décidé de démarrer un projet en utilisant angular 2. comment Dès le début, j’ai réalisé qu’il y avait un problème dans angular 2 (à partir d’un exemple de routage avec Apache) pour lequel très peu de documentation, voire aucune, n’était disponible, aussi la documentation et la communauté de angular 2 est le plus gros piège pour angular 2, car il n'est pas assez développé.

Je dirais que si vous avez besoin de créer un site rapidement pour une courte période, utilisez le bien connu angular 1, si vous êtes dans un projet plus long et que vous avez le temps d’enquêter sur de nouvelles questions (que vous soyez peut-être le première rencontre, ce qui pourrait être un bonus si vous pensez à la contribution que vous pourriez apporter à la communauté [angular 2 _) que d'aller avec angular 2.

0
Tomas Katz