AngularJS vs Angulaire

Permettez-moi de commencer en disant, je suis en supposant que vous et tout le monde qui va lire ce qui est déjà confortablement Angulaire 1 (maintenant appelé AngularJS, plutôt que de simplement Angulaire pour les versions plus récentes). Cela étant dit, examinons certaines des additions et des principales différences dans Angulaire 2+.

1. Ils ont ajouté une angulaires cli.

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

1. Votre angulaire code est écrit dans l'ES6 Tapuscrit et il compile lors de l'exécution de Javascript dans le navigateur.

Pour obtenir une compréhension complète sur ce, je vous recommandons de vérifier certains de la liste des ressources que j'ai au fond de ma réponse.

1. Structure De Projet

Dans une structure de base, vous aurez une app/ts dossier dans lequel vous allez faire la plupart de votre travail et une app/js Vous trouverez dans le app/js dossier de fichiers avec un .js.map extension. Ils "carte" votre ".ts fichiers" de votre navigateur pour le débogage que votre navigateur ne peut pas lire le natif de la machine.

Mise à jour: Il est hors de bêta. La structure de projet a un peu changé, dans la plupart des cas, et si vous êtes en utilisant l'angle de la cli, vous allez travailler dans le
src/app/ dossier. Dans un starter de projet, vous aurez la suite.

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

app.composante.css: CSS fichier, vous devez utiliser spécifique à la component.html

app.component.html: Un point de vue (variable déclarée dans le app.component.js)

app.composante.spec.ts: utilisé pour les tests app.component.ts

app.composante.ts: Votre code qui se lie à app.component.html

app.le module.ts: voici Ce que coups de pied hors de votre application et vous pouvez définir tous les plugins, composants, services, etc. C'est l'équivalent de la app.js Angulaire 1

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

Informations supplémentaires:

Pro astuce: vous pouvez exécuter ng generate [option] [name] pour générer de nouveaux services, des composants, des tuyaux, etc.

Également la tsconfig.json fichier est important, car il définit TS de la compilation des règles pour votre projet.

Si vous êtes en train de penser j'ai à apprendre une nouvelle langue?... Euh... un peu, Tapuscrit est un sur-ensemble de JavaScript. Ne soyez pas intimidé; il est là pour faire de votre développement plus facile. Je me sentais comme si j'avais une bonne idée après quelques heures à jouer avec elle, et avait tout tomber au bout de 3 jours.

1. Vous lier à votre HTML de la même façon, comme la façon dont vous le feriez si dans Angulaire 1 de la directive. Donc variable comme $scope et $rootScope ont été dépréciés.

Ce un vous peut avoir été impliqué. Angulaire 2 est encore un MV* mais vous serez en utilisant 'composants " comme un moyen de lier le code de vos modèles, par exemple, prendre la suite de

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

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

    export class AppComponent {}

Ici penser à la import déclaration comme votre dépendance à l'injection dans un v1 contrôleur. Vous utilisez import à importation vos paquets, où la import {Component} dit que vous aurez à faire un component que vous souhaitez lier à votre HTML.

Avis de la @Component décorateur vous avez un selector et template. Ici penser à la selector que votre $scope que vous pouvez utiliser comme vous utilisez v1 directives où le nom de la selector est ce que vous utiliser pour lier à votre code HTML comme

<my-app> </my-app>

Où <my-app> est le nom de votre étiquette personnalisée que vous allez utiliser qui va agir comme un espace réservé pour ce qui est déclaré dans votre modèle. c'est à dire) <h1> Hello World! </h1>. Alors que ce serait semblable à la suivante en 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> 

Puis il affichera "de Chargement..." comme le message de chargement.

Noter que ce qui est déclaré dans template est le chemin d'accès ou le code HTML brut que vous allez utiliser dans votre HTML dans votre selector tag.

---

Une meilleure mise en œuvre de Angulaire 1 serait plus comme 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 je vraiment comme sur la v2. J'ai trouvé la directive a une courbe d'apprentissage abrupte pour moi en v1 et même quand j'avais compris, j'ai souvent eu l' CSS rendent pas comment j'ai prévu. Je trouve que c'est plus simple.

V2 facilite l'évolutivité de votre application comme vous pouvez briser votre application plus facile que vous pourriez en v1. J'aime cette approche que vous pouvez avoir toutes vos pièces de travail dans un seul fichier plutôt que d'avoir plusieurs angulaire v1.

Et la conversion de votre projet, de la v1 à la v2?

---

De ce que j'ai entendu parler de l'équipe de développement si vous souhaitez mettre à jour votre v1 projet de v2, vous aurez juste être passe par et la la suppression obsolète gouttes et remplacer votre $scopes avec selectors. J'ai trouvé cette vidéo très utile. C'est avec quelques-uns des Ionique de l'équipe qui travaillent côte à côte avec l'angulaire de l'équipe en tant que v2 est plus centrée sur mobile https://youtu.be/OZg4M_nWuIk Espère que cette aide.

Mise à JOUR: j'ai mis à jour en ajoutant des exemples comme officiel implémentations Angulaire 2 ont fait surface.

Mise à JOUR 2: Cela semble encore être une question populaire alors j'ai juste pensé que j'avais quelques ressources que j'ai trouvé très utile lorsque j'ai commencé à travailler avec angulaire 2.

Ressources Utiles:

Pour en savoir plus sur ES6, je vous recommandons de vérifier La Nouvelle de Boston ECMAScript 6 /ES6 Nouvelles Fonctionnalités Tutoriels - YouTube Playlist

À écrire Tapuscrit fonctions et de voir comment ils compiler en Javascript découvrez la Tapuscrit de la langue de l'aire de Jeux

À voir une fonction par la fonction de répartition de ce que l'angle de 1 équivalence est Angulaire 2 voir le Angulaire.io - livre de recettes -A1 A2 Référence Rapide

Angulaire 2 et Angulaire 1 est essentiellement un cadre différent avec le même nom.

angulaire 2 est plus prêt de l'état actuel des standards du web et de l'état futur du web ( ES6\7, immutiablity, les composants, le shadow DOM, les travailleurs des services, mobile, de compatibilité, de modules, de la machine et ainsi de suite et ainsi de suite... )

angulaire 2 a tué beaucoup de caractéristiques principales angulaire 1 comme - contrôleurs, $champ d'application, les directives (remplacé par @composante annotations), de la définition de module, et beaucoup plus, même pour des choses simples comme ng-repeat a pas laissé le même qu'il était.

toute façon, le changement est bon, angulaire 1.x s'il avait des défauts, et angulaires 2 est plus prêt pour le futur du web exigences.

pour résumer les choses - je ne vous recommande pas de commencer angulaire à 1.x projet " maintenant - c'est probablement le pire moment pour le faire car vous devrez migrer plus tard angulaire 2, je vous définissez vous êtes à l'esprit à propos angulaire de choisir angulaire 2, google a déjà lancé un projet angulaire 2, et par le temps que vous avez terminé le projet angulaire 2 devrait déjà être à l'honneur.
si vous voulez quelque chose de plus stable, vous pouvez penser à réagir\orme et des flux frameworks JS.

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

Une caractéristique Angulaire v2 et aussi dans ReactJs est qu'elles ont toutes les deux adopté la nouvelle Web-les Composants de l'architecture de développement. Ce que cela signifie, c'est que nous pouvons maintenant créer une Web-Composants et plug-and-play à n'importe quel site dans le monde qui a la même technologie de la pile du Web-Composant. Cool! oui très cool. 🙂

L'autre plus éminents de la variation Angulaire de la v2 est qu'il est le principal langage de développement n'est rien d'autre que des caractères d'imprimerie. Bien que la Machine appartient à Microsoft, et c'est un sur-ensemble de JavaScript de 2015 (ou ECMAScript6/ES6), mais il a certaines caractéristiques qui sont très prometteurs. Je recommande aux lecteurs de la caisse Tapuscrit un peu dans le détail (ce qui est le fun de-sûr) après la lecture de ce tutoriel.

Ici, je dirais que le gars essaie de corrélation Angulaire v1 et Angulaire v2 plus confondre les lecteurs, et à mon humble avis, Angulaire v1 et Angulaire v2 doivent être considérées comme deux cadres différents. Dans Angulaire de la v2, nous avons le Web des Composants du concept de développement d'applications web, tandis que dans Angulaire v1, nous avons à jouer avec les Contrôleurs, et (malheureusement ou heureusement) pas de contrôleurs sont présents dans Angulaire v2.

Angulaire 2 est beaucoup mieux que le 1, atlist dans ce qu'il offre, le soutien pour les composants web, à l'aide de caractères d'imprimerie, performance et simplicité d'ensemble de l'interface, était la raison pour laquelle j'ai décidé de commencer un projet à l'aide angulaire 2. comment toujours de l'aller, j'ai réalisé il y a un problèmes angulaire 2 (à partir de exmple de routage avec apache) que très peu ou pas de documentation est disponible, de sorte que la documentation et de la communauté angulaire 2 est le plus grand piège angulaire 2, comme il n'est pas assez développée.

Je dirais, si vous avez besoin pour élever un site rapide pour un délai plus court utiliser le bien connu angulaire 1, si votre un plus long du projet et qui peuvent se permettre le temps d'étudier de nouvelles questions (que vous pouvez être le premier à rencontrer, ce qui pourrait être un bonus si vous pensez que de la contribution que vous pourriez donner à l'angle de 2 communauté) que d'aller avec angulaire 2.