Permettetemi di prefazione dicendo: presumo che voi e tutti coloro che leggeranno questo sia già comodamente con Angular 1 ( ora indicato come AngularJS , anziché semplicemente Angular per le versioni più recenti). Detto questo, entriamo in alcune delle aggiunte e differenze chiave in Angular 2+.
- Hanno aggiunto un angolo
cli.
È possibile avviare un nuovo progetto eseguendo ng new [app name]. Puoi servire il tuo progetto eseguendo ng serve
ulteriori informazioni qui: https://github.com/angular/angular-cli
- Il tuo codice angolare è scritto in Typescript ES6 e si compila in fase di esecuzione in Javascript nel browser.
Per avere una comprensione completa di questo, ti consiglio di dare un'occhiata all'elenco delle risorse che ho in fondo alla mia risposta.
- Struttura del progetto
In una struttura di base, avrai una app/tscartella in cui eseguirai la maggior parte del tuo lavoro e app/jstroverai nei app/jsfile delle cartelle .js.mapun'estensione. Esse "mappano" i file ".ts" sul browser per il debug poiché il browser non è in grado di leggere il dattiloscritto nativo.
Aggiornamento : è fuori beta. La struttura del progetto è cambiata un po ', nella maggior parte dei casi e se stai usando la clip angolare, lavorerai nella
src/app/cartella. In un progetto iniziale, avrai quanto segue.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css : file CSS che dovresti usare specifico percomponent.html
app.component.html : una vista (variabile dichiarata in app.component.js)
app.component.spec.ts : utilizzato per i testapp.component.ts
app.component.ts : il tuo codice a cui si legaapp.component.html
app.module.ts : questo è ciò che dà il via alla tua app e dove definisci tutti i plugin, componenti, servizi, ecc. Questo è l'equivalente di app.jsin Angular 1
index.ts utilizzato per definire o esportare i file di progetto
Ulteriori informazioni:
Suggerimento Pro: è possibile eseguire ng generate [option] [name]per generare nuovi servizi, componenti, tubi, ecc.
Anche il tsconfig.jsonfile è importante in quanto definisce le regole di compilazione TS per il tuo progetto.
Se stai pensando che devo imparare una lingua completamente nuova? ... Uh ... kinda, TypeScript è un superset di JavaScript. Non essere intimidito; è lì per facilitare il tuo sviluppo. Mi è sembrato di averne una buona conoscenza dopo poche ore di gioco, e dopo 3 giorni ho avuto tutto giù.
- Ti leghi al tuo HTML in modo simile a come faresti con una direttiva Angular 1. Così variabile come
$scopee $rootScopesono stati deprecati.
Questo potrebbe essere stato implicito. Angular 2 è ancora un MV * ma utilizzerai ' componenti ' come un modo per associare il codice ai tuoi modelli, ad esempio, prendi il seguente
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
Qui pensa importall'affermazione come alla tua iniezione di dipendenza in un controller v1. Usi importper importare i tuoi pacchetti, dove import {Component}dice che farai un componentche vorresti associare al tuo HTML.
Nota il @Componentdecoratore che hai un selectore template. Qui pensa a selectorcome il tuo $scopeche usi come usi v1 directivesdove il nome di selectorè quello che usi per associarti al tuo HTML in questo modo
<my-app> </my-app>
Dov'è <my-app>il nome del tag personalizzato che utilizzerai che fungerà da segnaposto per quanto dichiarato nel tuo modello. cioè) <h1> Hello World! </h1>. Considerando che questo sarebbe simile al seguente in v1:
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
Puoi anche aggiungere qualcosa tra questi tag per generare un messaggio di caricamento, come questo:
<my-app> Loading... </my-app>
Quindi verrà visualizzato " Caricamento in corso ... " come messaggio di caricamento.
Nota che ciò che è dichiarato templateè il percorso o il codice HTML non elaborato che utilizzerai HTMLnel tuo selectortag.
Un'implementazione più completa di Angular 1 sarebbe più simile a questa:
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
In v1 questo sarebbe simile
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
Questo è quello che mi piace davvero di v2. Ho scoperto che la direttiva era una curva di apprendimento ripida per me nella v1 e anche quando le avevo capite spesso avevo il CSSrendering non come volevo. Trovo che sia molto più semplice.
V2 consente una più facile scalabilità della tua app poiché puoi dividere la tua app più facilmente di quanto potresti fare in v1. Mi piace questo approccio poiché puoi avere tutte le tue parti di lavoro in un file invece di averne diverse in angolare v1.
Che ne dici di convertire il tuo progetto da v1 a v2?
Da quello che ho sentito dal team di sviluppo se desideri aggiornare il tuo progetto v1 a v2, passerai semplicemente attraverso l'eliminazione di BLOB obsoleti e sostituirai le tue $scopes con selectors. Ho trovato utile questo video. È con alcuni membri del team ionico che stanno lavorando fianco a fianco con il team angolare poiché v2 si concentra maggiormente sul mobile https://youtu.be/OZg4M_nWuIk Spero che questo aiuti.
AGGIORNAMENTO: ho aggiornato aggiungendo esempi mentre le implementazioni ufficiali di Angular 2 sono emerse.
AGGIORNAMENTO 2: Questa sembra essere ancora una domanda popolare, quindi ho pensato che avrei trovato una risorsa che ho trovato molto utile quando ho iniziato a lavorare con Angular 2.
Risorse utili:
Per ulteriori informazioni su ES6, ti consiglio di dare un'occhiata ai tutorial sulle nuove funzionalità ECMAScript 6 / ES6 di New Boston - Playlist di YouTube
Per scrivere le funzioni di Typescript e vedere come vengono compilate in Javascript, controlla il campo di gioco in lingua Typescript
Per vedere una funzione per suddivisione della funzione di ciò che è l'equivalenza angolare 1 in Angolare 2 vedere Angular.io - Cookbook -A1 A2 Guida rapida