Il prodotto creato da Google sta avendo sempre più successo, è diffuso il suo utilizzo soprattutto per realizzare applicazioni real web. Evoluzione di Angular Js, il cambiamento è stato notevole, a cominciare dall’utilizzo di typescript. Angular 2 è ottimizzato per il mobile, ottimo per fare le applicazioni ibride in grande diffusione.
Caratteristica molto importante di Angular è l’ordine del codice, è immediato grazie alla divisione dei componenti e all’utilizzo del metodo MVC.
Contents
Typescript
Typescript è una tecnologia microsoft è un superset di Javascript, i suoi file vengono compilati e trasformati in codice javascript, esattamente viene compilato in ES2016 (ECMAScript 2016). I file Typescript hanno estensione .ts e devono essere complati in ES5 per essere compatibili con la maggior parte dei browser.
I tipi in Typescript
In Javascript esistono i seguenti tipi:
- boolean
- number (int, float ecc.. ) e NaN
- string
- [] array
- {} oggetti
- undefined
Typescript aggiunge a questi:
- enum
- any
- void
Da notare che in Typescript tutti i numeri di qualsiasi tipo sono number, any è utilizzato per mettere dentro quella variabile qualsiasi cosa. Void rappresenta invece il nulla, una funzione senza return è void.
Confronto con Angular JS
Rispetto ad Angular Js ci sono diverse novità:
- In Angular 2 non esiste l’oggetto $scope
- I controller non sono definiti da metodi ma da classi
- i moduli sono moduli ES6 e non moduli di Angular
Installazione Angular 2
Npm
Npm è il Node Packadge Manager, è il gestore di pacchetti di node, e ci consente appunto di installare pacchetti in node. Due funzioni importanti torneranno spesso anche nell’utilizzo di Angular:
- npm install: Installa da alcuni repository ciò che è presente nel file package.json che si trova nella root, tutti questi file verranno caricati poi nella cartella node-modules
- npm start: compila invece i file Typescript trasformandoli in javascrpt e fa partire un web server node che esegue il codice
Prima di poter dare questi due comandi c’è bisogno di installare Node Js.
Installazione Angular 2
Ecco le fasi per l’installazione. Dal nostro terminale ci portiamo nel luogo dove vogliamo inserire la nostra cartella con Angular 2 e digitiamo:
git clone https://github.com/angular/quickstart.git quickstart
Questo crea una cartella quickstart con un progetto base di Angular 2 dentro. Chiaramente possiamo sostituire il quickstart finale con qualsiasi nome con cui vogliamo chiamare la nostra cartella di Angular2.
cd quickstart
Entriamo quindi chiaramente in questa cartella
npm install
Con il comando npm install andiamo a prendere tutti i file che ci servono dai repository e ad installarli nella cartella node-modules
npm start
Via facciamo compilare e partire il web server l’indirizzo dovrebbe essere (in ogni caso lo comunica il terminale) localhost:3000 in caso di linux e localhost:4200 in caso di windows.
La guida di installazione è stata ripresa direttamente dal sito di Angular.
Angular 2: La struttura
Nella cartella node-modules c’è ora il cuore di Angular 2 e molto molto altro. Di tutte le cartelle che troveremo dentro node-modules, quella che contiene il nucleo di Angular 2 è @angular.
Se andiamo ad esaminare il progetto creato diciamo che andremo per lo più a lavorare sulla cartella src. Qui vi è il file index.html, inziamo con l’aprire questo file. Ci ritroveremo di fronte ad una classica pagina html con tanto di title, meta charset, viewport, caricamento del foglio di stile e di diversi javascript e l’head della pagina termina con l’import del main.js da cui parte tutto Angular 2.
Quando arriviamo al body della pagina la prima sorpresa, c’è un tag a cui non siamo abituati, “myapp” con dentro del testo. Ricordiamo questo myapp perchè lo ritroveremo. Intanto se avete fatto npm start vi si dovrebbe essere aperto il browser e aver caricato Angular2 con una scritta “Hello Angular”. Se avete fatto attenzione prima che compaia il testo formattato Hello Angular, compare proprio il testo che c’è in questo tag my-app.
Ora da qui viene caricato il file main.js dicevamo, apriamo questo file, o meglio apriamo quello che lo ha generato ovvero main.ts. Non è di certo prolisso, appena 3 righe di codice che servono solo per caricare app.module.ts . L’import di AppModule come vedete riprende perfettamente il percorso del file ma non specifica il .ts, quest’ultimo è opzionale.
Spostiamoci quindi al cuore della nostra applicazione a andiamo ad aprire app.module.ts, la prima riga importa da @angular nella sottocartella core NgModule che serve per poter usare il decoratore che vedete poco sotto. I decoratori sono in Angular tutte quelle parole che iniziano con la @ e servono per fare delle definizioni. Al loro interno ci sono una serie di chiavi-valore. Viene importato anche BrowserModule, questo serve per far funzionare Angular sul browser. Subito dopo andiamo a importare il componente app.component.ts, come detto prima vedete che il .ts non è essenziale.
Dentro NgModule vediamo imports, declarations e bootstrap. Imports è ciò da cui dipende questo modulo, declarations i nomi di tutti i componenti che sto andando ad utilizzare, come vedete questi sono array quindi ne possono contenere diversi separati da una virgola. Bootstrap invece indica qual è il componente da cui l’applicazione deve partire, anche questo è un array infatti nella index potrei anche avere diversi componenti.
L’export è il nome che prende il module dopo che lo ho definito questo lo ritroveremo in tutte le classi.
Quindi il main fa partire il module, questo fa partire i component e i component gestiscono tutto il resto.
Apriamo quindi app.component.ts che si trova nella cartella app, andiamo subito a vedere dentro @Component alla chiave selector c’è ‘my-app’ vi ricordate? Era quel tag strano che c’era in index.html, ora possiamo capirlo meglio, quel tag non fa altro che richiamare questo componente. Ma iniziamo come al solito dall’import, per utilizzare il decoratere @Component devo importare, dalla libreria di Angular, Component. La Chiave template contiene il contenuto della pagina, l’html. In questo caso c’è Hello {{name}} ed è su per giù quello che vediamo in pagina. O meglio Hello viene seguito da quella doppia parentesi graffa che racchiude name, sta richiamando una variabile che è definita in AppComponent, e infatti nell’export vediamo definita proprio la variabile name. Così otteniamo come risultato Hello Angular. A template possiamo sostituire volendo templateUrl e dare l’indirizzo di una pagina html che contiene tutto il codice html.
Ecco finalmente installato Angular 2 e spiegato il funzionamento di base. Siamo solo all’inizio ora comincia il divertimento.
di Massimiliano Salerno