Il y a des mois, j'ai décidé d'étudier Angular. Lorsque je faisais des progrès et que je créais une application en l'utilisant, je me suis rendu compte qu'Angular 2 est en préversion pour les développeurs, donc c'est une question de temps avant sa sortie. Parce qu'Angular 2 ne sera pas compatible avec Angular 1, et qu'il y a beaucoup de changements, la question est, est-il préférable de continuer à développer avec Angular 1.x ou de commencer à développer Angular 2?

C'est un fait que nous n'avons pas toujours besoin d'utiliser la dernière version ni la dernière langue du marché, mais dans ce cas, l'application est encore petite, donc je pourrais changer sans problème.

Permettez-moi de commencer en disant, je suppose que vous et tous ceux qui liront ceci sont déjà à l'aise avec Angular 1 ( maintenant appelé AngularJS , par opposition à simplement Angular pour les versions plus récentes). Cela étant dit, passons à certains des ajouts et des principales différences dans Angular 2+.

1. Ils ont ajouté un angulaire cli.

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

2. Votre code angulaire est écrit en ES6 Typescript et il se compile au moment de l'exécution en Javascript dans le navigateur.

Pour bien comprendre cela, je vous recommande de consulter la liste de ressources que j'ai au bas de ma réponse.

3. Structure du projet

Dans une structure de base, vous aurez un app/tsdossier où vous ferez la plupart de votre travail et un app/jsVous trouverez dans le app/jsdossier des fichiers avec une .js.mapextension. Ils «mappent» vos «fichiers .ts» à votre navigateur pour le débogage car votre navigateur ne peut pas lire le manuscrit natif.

Mise à jour : il n'est plus en version bêta. La structure du projet a un peu changé, dans la plupart des cas et si vous utilisez le cli angulaire, vous travaillerez dans le src/app/dossier. 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 que vous devez utiliser spécifique aucomponent.html

app.component.html : Une vue (variable déclarée dans app.component.js)

app.component.spec.ts : utilisé pour les testsapp.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.jsdans Angular 1

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

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

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

Si vous pensez que je dois apprendre une toute nouvelle langue? ... 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 que j'avais une bonne compréhension après seulement quelques heures à jouer avec, et j'avais tout perdu après 3 jours.

4. Vous vous liez à votre HTML de la même manière que vous le feriez dans une directive Angular 1. Donc variable comme $scopeet $rootScopeont été obsolètes.

Celui-ci vous a peut-être été impliqué. Angular 2 est toujours un MV * mais vous utiliserez des `` composants '' comme moyen de 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 {}

Considérez ici l' importinstruction comme votre injection de dépendance dans un contrôleur v1. Vous utilisez importpour importer vos packages, où le import {Component}dit que vous allez créer un fichier que componentvous souhaitez lier à votre HTML.

Remarquez le @Componentdécorateur que vous avez un selectoret template. Ici, considérez le selectorcomme votre $scopeque vous utilisez comme vous utilisez la v1 directivesoù le nom du selectorest ce que vous utilisez pour vous lier à votre HTML comme ceci

<my-app> </my-app>

Où <my-app>est le nom de votre balise personnalisée que vous utiliserez et qui agira comme un espace réservé pour ce qui est déclaré dans votre modèle. ie) <h1> Hello World! </h1>. Alors que cela ressemblerait à ce qui suit dans la v1:

HTML

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

JS

$scope.hello = "Hello World!"

Vous pouvez également 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 templateest le chemin ou le code HTML brut que vous utiliserez HTMLdans votre selectorbalise.

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

HTML

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

Dans la 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 compris, j'avais souvent le CSSrendu pas comme je le souhaitais. Je trouve que c'est beaucoup plus simple.

V2 permet une évolutivité plus facile de votre application puisque vous pouvez diviser votre application plus facilement que vous ne le pourriez 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 la v1 à la v2?

D'après ce que j'ai entendu de l'équipe de développement, si vous souhaitez mettre à jour votre projet v1 vers la v2, vous allez simplement supprimer les objets blob obsolètes et remplacer vos $scopes par des 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 angulaire car la v2 se concentre davantage sur le mobile https://youtu.be/OZg4M_nWuIk J'espère que cela aidera.

MISE À JOUR: J'ai mis à jour en ajoutant des exemples au fur et à mesure que les implémentations officielles d'Angular 2 ont fait surface.

MISE À JOUR 2: Cela semble toujours être une question populaire, alors j'ai juste pensé avoir une ressource que j'ai trouvée très utile lorsque j'ai commencé à travailler avec angular 2.

Ressources utiles:

Pour en savoir plus sur ES6, je vous recommande de consulter les didacticiels sur les nouvelles fonctionnalités ECMAScript 6 / ES6 de New Boston - Liste de lecture YouTube

Pour écrire des fonctions Typescript et voir comment elles se compilent en Javascript, consultez le langage Typescript Playground

Pour voir une fonction par fonction de la répartition de l'équivalence angulaire 1 dans Angular 2, consultez le guide de référence rapide Angular.io - Cookbook -A1 A2

Cela pourrait vous aider à comprendre la comparaison entre Angular 1 et Angular 2.

L'Angular 2 s'est avéré avoir de nombreux avantages par rapport à Angular 1:

• Il est entièrement basé sur des composants.
• Meilleure détection des changements
• La compilation Ahead of Time (AOT) améliore la vitesse de rendu.
• TypeScript est principalement utilisé pour développer des applications Angular 2.
• Angular 2 a de meilleures performances que Angular 1.
• Angular 2 a un système de modèles plus puissant que Angular 1.
• Angular 2 a des API plus simples, un chargement paresseux, un débogage plus facile.
• Angular 2 est beaucoup plus testable que Angular 1.
• Angular 2 fournit des composants imbriqués.
• Angular 2 fournit un moyen d'exécuter plus de deux systèmes ensemble.
• Etc...

Angular 2 et Angular 1 sont fondamentalement un framework différent avec le même nom.

angular 2 est plus prêt pour l'état actuel des standards web et l'état futur du web (ES6 \ 7, immutiablity, composants, shadow DOM, service workers, compatibilité mobile, modules, dactylographiés, etc.)

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

Quoi qu'il en soit, le changement est bon, angular 1.x avait des défauts et angular 2 est plus prêt pour les futures exigences du Web.

pour résumer - je ne vous recommande pas de démarrer un projet angulaire 1.x maintenant - c'est probablement le pire moment pour le faire car vous devrez migrer plus tard vers angular 2, je vous décidez à angular plutôt qu'à angular 2, google a déjà lancé un projet avec angular 2, et au moment où vous avez terminé le projet angular 2 devrait déjà être à l'honneur. si vous voulez quelque chose de plus stable, vous pouvez penser à react \ elm et flux et redux en tant que frameworks JS.

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

Aucun cadre n'est parfait. Vous pouvez en savoir plus sur les défauts dans Angular 1 ici et ici . Mais cela ne veut pas dire que c'est mauvais. La question est de savoir quel problème résolvez-vous. Si vous souhaitez déployer rapidement une application simple, légère, avec une utilisation limitée de la liaison de données , continuez avec Angular 1. Angular 1 a été construit il y a 6 ans pour résoudre le prototypage rapide, ce qu'il fait assez bien. Même si votre cas d'utilisation est complexe, vous pouvez utiliser Angular 1, mais vous devez être conscient des nuances et des meilleures pratiques concernant 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 d'Angular.

La seule caractéristique remarquable dans Angular v2 et également dans 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 à n'importe quel site Web dans le monde qui possède la même pile technologique que ce composant Web. Cool! ouais 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, il s'agit d'un sur-ensemble de JavaScript de 2015 (ou ECMAScript6 / ES6), mais il possède certaines fonctionnalités très prometteuses. Je recommanderais aux lecteurs de consulter TypeScript plus en détail (ce qui est bien sûr amusant) après avoir lu ce tutoriel.

Ici, je dirais que les gars qui essaient de relier Angular v1 et Angular v2 confondent davantage les lecteurs, et à mon humble avis, Angular v1 et Angular v2 devraient être traités comme deux cadres différents. Dans Angular v2, nous avons le concept de Web-Components de développement d'applications Web, tandis 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.

Une chose à noter est que angular2 utilise du typographie.

J'ai fait angular1 avec cordova dans mon stagiaire et maintenant je fais un angular 2. Je pense que angular2 sera la tendance car il est plus structuré à mon avis mais le contre est qu'il y a peu de ressources pour se référer lorsque vous avez des problèmes ou des difficultés. angular 1.x a des tonnes de directives personnalisées qui peuvent être super faciles à utiliser.

J'espère que ça aide.

Angular 2 est bien meilleur que 1, du moins dans ce qu'il offre: la prise en charge des composants Web, l'utilisation de dactylographié, les performances et la simplicité globale de l'interface, a été la raison pour laquelle j'ai décidé de démarrer un projet en utilisant angular 2. Cependant, dès le départ , J'ai réalisé qu'il y avait des problèmes dans angular 2 (par exemple le routage avec apache) pour lesquels très peu ou pas de documentation est disponible, donc la documentation et la communauté d'angular 2 sont 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 échéance, utilisez le bien connu angular 1, si vous êtes dans un projet plus long et que vous pouvez vous permettre d'enquêter sur de nouveaux problèmes (que vous pourriez être le premier à rencontrer , ce qui pourrait être un bonus si vous pensez à la contribution que vous pourriez donner à la communauté angular 2) que d'utiliser angular 2.