Inizia con Angular: il tutorial di InfoWorld

Angular, il successore di AngularJS, è una piattaforma di sviluppo per la creazione di applicazioni mobili e desktop utilizzando TypeScript e / o JavaScript e altri linguaggi. Angular è popolare per la creazione di siti Web ad alto volume e supporta applicazioni Web, Web mobile, mobile native e desktop native.

Il team di sviluppo di Angular Core è diviso tra i dipendenti di Google e una solida comunità; non sparirà presto. Oltre alle sue ampie capacità, la piattaforma Angular ha un forte ecosistema esterno: diversi IDE importanti supportano Angular, ha quattro librerie di dati, ci sono una mezza dozzina di strumenti utili e oltre una dozzina di set di componenti dell'interfaccia utente e ci sono dozzine di Libri e corsi angolari. Nel 2015, quando ho assegnato ad AngularJS un Bossie Award, ho spiegato che si tratta di un framework JavaScript AJAX model-view-qualunque (MVW) che estende HTML con markup per viste dinamiche e data binding a due vie. Angular è particolarmente utile per lo sviluppo di applicazioni Web a pagina singola e per il collegamento di moduli HTML a modelli e controller JavaScript. Il nuovo Angular è scritto in TypeScript piuttosto che JavaScript, il che ha molti vantaggi, come spiegherò.

Lo strano pattern "model-view-qualunque" è un tentativo di includere i pattern model-view-controller (MVC), model-view-view-model (MVVM) e model-view-presenter (MVP) sotto uno moniker. Le differenze tra questi tre modelli strettamente correlati sono il tipo di cose su cui i programmatori amano discutere ferocemente; gli sviluppatori di Angular hanno deciso di rinunciare alla discussione.

Fondamentalmente, Angular sincronizza automaticamente i dati dalla tua interfaccia utente (viste in AngularJS e modelli in Angular 2 e versioni successive) con i tuoi oggetti JavaScript (modello) attraverso l'associazione dati a due vie. Per aiutarti a strutturare meglio la tua applicazione e renderla facile da testare, Angular insegna al browser come eseguire l'iniezione delle dipendenze e l'inversione del controllo. Il nuovo Angular (versione 2 e successive) sostituisce le viste e i controller con componenti e adotta convenzioni standard, che lo rendono più facile da capire e consente agli sviluppatori di concentrarsi sullo sviluppo di moduli e classi ECMAScript 6. In altre parole, Angular 2 è una riscrittura totale di AngularJS che cerca di implementare le stesse idee in un modo migliore. I modelli di vista angolare, che hanno una sintassi abbastanza semplice, sono compilati in JavaScript che è ben ottimizzato per i moderni motori JavaScript.Il nuovo router di componenti in Angular 2 può eseguire la suddivisione del codice (caricamento lento) per ridurre la quantità di codice fornito per il rendering di una vista.

scarica Inizia con Angular Scarica questo tutorial Angular in comodo formato PDF

Perché Angular? E quando non è una buona scelta?

La scelta di un framework JavaScript per un'app Web è il tipo di processo che innesca guerre di religione tra gli sviluppatori. Non sono qui per fare proselitismo su Angular, ma voglio che tu ne conosca i vantaggi e gli svantaggi. Idealmente, dovresti scegliere il framework appropriato per la tua app, tenendo conto delle competenze nella tua organizzazione e dei framework che stai utilizzando in altre applicazioni. In generale Angular ha una buona attrezzatura ed è adatto a progetti molto grandi e ad alto traffico. Angular, come una riscrittura completa da AngularJS, è stato progettato da zero per l'uso su dispositivi mobili e per alte prestazioni. Come il suo predecessore, esegue il binding dei dati facilmente e bene.

Angular utilizza un modello di componenti Web, ma non i componenti Web di per sé. Non è Polymer, che crea componenti Web reali, sebbene tu possa utilizzare Componenti Web Polymer in applicazioni Angular, se lo desideri. Angular utilizza modelli di inversione del controllo (IoC) e iniezione di dipendenza (DI) e risolve alcuni problemi con l'implementazione AngularJS di questi.

Angular utilizza direttive e componenti che combinano la logica con il markup HTML. Una scuola di pensiero dice che mescolare logica e presentazione è un peccato cardinale. Un'altra scuola di pensiero afferma che avere tutto ciò che fa un programma dichiarato in un unico posto ne facilita lo sviluppo e la comprensione. Questo è un problema che dovrai decidere da solo, poiché mi sono trovato su diversi lati della questione per diversi progetti.

Angular ha alcuni problemi di documentazione, frequenti problemi di compatibilità con le versioni precedenti e molti concetti da apprendere per un nuovo sviluppatore. D'altra parte, Angular ha un enorme ecosistema che colma le lacune nella documentazione di Angular con tutorial web, video e libri di terze parti.

Informazioni su TypeScript

Angular è implementato in TypeScript, un superset di JavaScript tipizzato da anatra che trasporta in JavaScript. In generale, le applicazioni TypeScript sono più facili da mantenere su scala di produzione rispetto a JavaScript. Il semplice processo per determinare se i tuoi tipi sono corretti in fase di compilazione elimina una vasta classe di errori JavaScript comuni e conoscere i tipi consente a editor, strumenti e IDE di essere più utili con il completamento del codice, il refactoring e il controllo del codice.

Sono un grande fan di TypeScript. Trovo che sia molto più produttivo lavorare su un grande progetto TypeScript che lavorare su un grande progetto JavaScript. Con JavaScript, non so davvero se i bug sono in agguato nel codice in attesa di mordermi, non importa quanto spesso eseguo JSHint. Con TypeScript, almeno quando ho aggiunto i tipi, le classi, i moduli e le interfacce opzionali, mi sento molto più sicuro.

Inizia: installa Angular, TypeScript e Visual Studio Code

Detto questo, installiamo il software e iniziamo.

Installa Node.js e NPM

Prima di fare qualsiasi altra cosa, è necessario installare Node.js e NPM, il gestore di pacchetti Node, perché sono alla base di gran parte dell'installazione e degli strumenti di Angular. Per scoprire se sono installati e, in tal caso, quali versioni sono installate, vai a una console o al prompt del terminale e digita i seguenti due comandi:

$ nodo -v $ npm -v

Sul mio computer, la versione di Node.js segnalata è v6.9.5 e la versione NPM è 3.10.10. Queste sono le attuali versioni di supporto a lungo termine al momento, come posso dire guardando //nodejs.org/. Se le tue versioni sono attuali, puoi passare alla sezione successiva. Se uno dei comandi non viene trovato o una delle versioni non è aggiornata, è necessario installare le versioni correnti. Le mie versioni sono aggiornate perché ho reinstallato di recente Node, come mostrato nello screenshot qui sotto. L'installazione sia di Node.js che di NPM è una questione di navigazione su nodejs.org, premendo il pulsante verde LTS e seguendo le istruzioni.

Una volta completata l'installazione, controlla di nuovo le versioni per assicurarti che siano realmente aggiornate. So che ripetere il controllo sembra paranoico, ma un buon programmatore ha bisogno di una buona dose di paranoia per evitare bug e le installazioni interrotte non sono rare.

1. Installa Angular

Esistono due modi per installare e utilizzare Angular. Ti mostrerò prima il metodo dell'interfaccia della riga di comando (CLI), per diversi motivi. La prima è che si adatta meglio al modo in cui mi piace lavorare. Il secondo è che la CLI genera un'applicazione di avvio più completa rispetto al seed QuickStart. Il terzo è che il passaggio di pulizia nelle istruzioni iniziali di QuickStart sembra che potrebbe causare il caos se usato nel momento sbagliato o nella directory sbagliata.

Vai a //angular.io/ e fai clic su uno dei tre pulsanti Inizia. Vanno tutti nello stesso posto, Angular QuickStart.

Si prega di leggere quella pagina e sentirsi liberi di provare l'esempio QuickStart su Plunker tramite il collegamento dopo il primo blocco di codice. Quando pensi di poter seguire la @Componentfunzione decoratore e l'espressione di associazione di interpolazione angolare {{name}}, fai clic sul collegamento di avvio rapido della CLI a sinistra. Non preoccuparti troppo di come vengono implementate la funzione decorator e il binding di interpolazione: ci arriveremo.

1a. Installa e prova Angular-CL

Seguiremo le istruzioni per configurare l'ambiente di sviluppo della CLI. Il primo passo è installare Angular e la sua CLI a livello globale con npm:

$ npm install -g @ angular / cli

Se osservi attentamente il procedere dell'installazione, vedrai una serie di prerequisiti e strumenti installati prima di Angular e della sua CLI. Se sono presenti avvisi, non preoccuparti. Se sono presenti errori, potrebbe essere necessario correggerli; Ho visto solo avvertimenti me stesso. È sicuro reinstallare Angular CLI ogni volta che vuoi.

Il prossimo passo è creare un nuovo progetto con Angular CLI. Ho messo il mio in una directory chiamata Lavoro nella mia cartella utente home.

$ cd work $ ng new my-app

Come notano le istruzioni, la generazione della nuova app Angular richiede alcuni minuti. Questo è un buon momento per preparare una bella tazza di tè o caffè.

Vedrai nello screenshot che ho ricontrollato la mia versione TypeScript ( tsc -v) dopo l'installazione di Angular CLI. Sì, è stato un po 'paranoico. E sì, è una buona idea farlo anche per te. Se non hai già installato TypeScript, occupiamoci di questo ora:

$ npm install –g dattiloscritto

Ci siamo quasi. Quindi, entra nella nuova directory e servi l'applicazione.

$ cd my-app $ ng serve

Come ti dirà il server, è in ascolto sulla porta 4200. Quindi apri una scheda del browser su // localhost: 4200 e vedrai l'immagine a sinistra.

Il saldo della pagina di avvio rapido della CLI indica di modificare la proprietà del titolo e il suo CSS. Sentiti libero di farlo con qualsiasi editor di programmazione ( non un elaboratore di testi!) Ti capita di aver installato, o attendi fino a quando non installi Visual Studio Code in un secondo momento. La finestra del browser si aggiornerà automaticamente ogni volta che salvi, poiché il server controlla il codice e si aggiorna sulle modifiche.

Quando hai finito con il server, premi Control-C nella finestra del terminale per terminare il processo.

1b. Installa il seme Angular QuickStart

Esegui questo passaggio solo se hai saltato il passaggio 1a. Se esegui entrambi i passaggi, questa installazione bloccherà parte dell'installazione della CLI e dovrai rifarla se vuoi usarla di nuovo. Le istruzioni per l'installazione del seed QuickStart offrono due opzioni per avviare il processo: scaricare il seed e decomprimerlo, o in alternativa clonare il seed, come segue:

$ git clone //github.com/angular/quickstart.git quickstart

Qualunque opzione tu scelga per ottenere il codice, i passaggi successivi sono gli stessi:

Avvio rapido di $ cd

(o qualunque cosa tu abbia chiamato la cartella)

Installazione di $ npm

$ npm inizio

Il npm installpassaggio fa essenzialmente la stessa cosa del $ npm install -g @angular/clipassaggio nella versione CLI dell'installazione, tranne per il fatto che installa TypeScript e non installa Angular CLI, poiché non è nell'elenco delle dipendenze in package.json. Infatti se la CLI di Angular è già installata, questo script la disinstallerà .

Il npm startpassaggio esegue questo script:

"start": "simultaneamente \" npm run build: watch \ "\" npm run serve \ ""

Per espandere questo aspetto, gli script build: watch and serve sono:

"build: watch": "tsc -p src / -w"

e

"serve": "lite-server -c = bs-config.json"

Ho già detto che tscè il compilatore TypeScript? L' -popzione imposta la directory del progetto da compilare e l' -wopzione dice di guardare i file di input.

Il npm startpassaggio (esecuzione simultanea dei due script) eseguirà essenzialmente la stessa cosa del ng servepassaggio nella versione CLI dell'installazione, tranne per il fatto che è probabile che scelga una porta diversa, inoltre caricherà automaticamente la pagina che sta servendo come impostazione predefinita browser e la pagina avrà l'aspetto dell'immagine a sinistra.

Quando hai finito di giocare con la tua app Angular QuickStart, premi semplicemente Ctrl + C o chiudi la finestra del terminale per terminare il processo. Puoi riavviarlo tornando alla directory ed eseguendo ng serve.

Il passaggio successivo (facoltativo) nelle istruzioni seed di QuikStart è quello che mi rende nervoso: ti dice di eliminare i file non essenziali usando rm -rfin MacOS o delin Windows. Se decidi di farlo, almeno ricontrolla di essere nella directory corretta prima di attivare lo script che hai copiato dal sito di documentazione. Per favore, non provarlo dopo aver iniziato ad aggiungere file al progetto.

Indipendentemente dal fatto che tu abbia seguito le istruzioni seed della CLI o QuickStart, il tuo prossimo passo sarà esplorare il codice sorgente di un progetto Angular. A tal fine, installiamo un editor compatibile con Angular.

2. Installare Visual Studio Code

La pagina delle risorse Angular consiglia tre IDE: IntelliJ IDEA, Visual Studio Code e WebStorm. Io li uso tutti e tre, ma ai fini di questo esercizio Visual Studio Code è la scelta migliore perché è gratuito e open source. Accedi alla home page di Visual Studio Code e scarica la versione stabile corrente per la tua piattaforma, quindi installa il pacchetto.

Una volta installato Visual Studio Code, eseguilo e apri la directory che contiene il tuo progetto di base. Sul mio Mac, il progetto generato dalla CLI è su ~/work/my-appe il seed è su ~/work/quickstartmaster. La tua posizione varierà a seconda che tu abbia eseguito l'installazione della CLI o l'installazione del seme e qualsiasi scelta tu abbia fatto sulle loro directory di destinazione. L'albero dei sorgenti dovrebbe assomigliare a questo:

Visual Studio Code supporta TypeScript immediatamente, quindi non c'è nient'altro da installare. Se desideri installare altre lingue in un secondo momento, è facile farlo nel pannello Estensioni, facilmente visibile facendo clic sull'icona in basso in alto a sinistra. Digita il nome della lingua o dello strumento che desideri nella casella di ricerca nella parte superiore del pannello Estensioni. Puoi tornare a Esplora file facendo clic sull'icona in alto in alto a sinistra.