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+.
- 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
- 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.
- 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.
- 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