Angular, tra storia e sviluppo
Nel corso degli ultimi anni il mondo delle webapp ed app-ibride si è evoluto in maniera esponenziale con la pubblicazione di numerosi framework e piattaforme di sviluppo sempre più all’avanguardia.
Uno dei framework più popolari e seguiti dagli sviluppatori è sicuramente quello di Angular il quale nasce dal suo predecessore AngularJS che è stato rapidamente abbandonato per una lunga serie di motivi (velocità, utilizzo dei web components, direttive, la gestione del routing e molto, molto altro).
Chi c’è dietro la creazione di questa invenzione?
Angular nasce da un gruppo di ingegneri di Google, capeggiati da Brad Green, nata come un’evoluzione del progetto AngularJS, un popolare framework Model View (MV*) per la creazione di applicazioni (Web APP) e pagine web.
L’inizio degli sviluppi per la creazione di Angular risale addirittura al 2014 con la prima pubblicazione solamente 2 anni dopo nel settembre del 2016. In pochi anni, pensate un po’, sono usciti aggiornamenti continui del framework fino a raggiungere in soli 3 anni la versione numero 8.0.
Questi continui aggiornamenti però non dovranno spaventarvi perchè a differenza del passaggio tra angularJs ed angular 2 che ha cambiato radicalmente la struttura del framework, gli ultimi rilasci riguardano solamente miglioramenti a tecnologie già esistenti per facilitare il lavoro degli sviluppatori che utilizzano questa piattaforma.
Ok ma quale linguaggio di programmazione devo conoscere per lavorare in Angular?
Il linguaggio utilizzato si chiama Typescript, un’estensione creata da Microsoft di Javascript fatta apposta per velocizzare la scrittura del codice e renderlo molto più efficiente. Attenzione però, l’utilizzo di Javascript puro sarà sempre disponibile all’interno dei progetti in Angular anche se la sua applicazione risulta molto complicata e generalmente viene sconsigliata.
Come dicevamo all’inizio dell’articolo, con Angular è possibile la creazione non solo di webapp ma anche di app-ibride, utilizzabili quindi sia su android che su ios.
La libreria che permette lo sviluppo di applicazioni anche su mobile è quello di Ionic. Fin dai primi giorni di sviluppo di Angular infatti, il team Ionic ha lavorato in stretta collaborazione con il team di Google per creare questa interfaccia che finalmente, grazie all’ultima versione rilasciata, è stata completamente integrata e resa disponibile.
Come viene strutturato un progetto in Angular:
Dovete pensare che Angular è stato costruito basandosi sulla semplicità, rimuovendo quindi tutto ciò che poteva creare confusione o che era troppo complicato da implementare e semplificandolo il più possibile.
I principali blocchi dell’applicazione sono due:
1. Components: I componenti sono moduli riutilizzabili che comprendono una parte grafica (un semplice file html) ed una parte logica. Nella parte logica è possibile interagire con i service in modo tale da raggiungere le sue funzionalità. I componenti utilizzano diversi tipi di bindings per controllare il cambiamento delle variabili in modo tale da poter reagire al cambio del valore.
2. Services: I services sono semplici classi con alcune annotations per le Dependency Injection dove andremo a scrivere tutti i servizi da richiamare nei componenti.
Tutte le applicazioni Angular partono con un component predefinito ed avranno più avanti con gli sviluppi un altro numero di componenti custom che vengono caricati all’interno del root component.
Quali sono i veri vantaggi/svantaggi nell’utilizzo di Angular rispetto ad altre librerie?
I vantaggi sono sicuramente molti ma come principali possiamo citare:
- Two-way data binding: Molto utile per le ‘user-interactions’, grazie al quale il valore viene aggiornato appena avviene il cambiamento.
- Direttive: Ci sono moltissime direttive predefinite in Angular per la manipolazione del DOM ed è anche possibile crearne di nuove in modo semplice e veloce.
- Utilizzo di HTML: permette di creare il layout di un componente in maniera molto rapida essendo l’html un linguaggio base e conosciuto da tutti.
- Community: Angular ha una comunità grandissima ed è quindi possibile trovare aiuto e soluzioni alternative molto facilmente.
Alcuni degli svantaggi invece possono essere:
- Poca documentazione ufficiale (anche se è facile trovare guide create dagli utenti).
- Troppi modi diversi di fare la stessa cosa che possono mettere in difficoltà il programmatore perchè non sa quale scegliere e quale sia la via più efficiente.
- Il progetto inizialmente può sembrare molto grosso e complicato per la quantità di file diversi che si trovano una volta creato il progetto.
Tiriamo le somme:
Esistono molte librerie javascript simili ad Angular ma probabilmente questa risulta la più completa e una delle migliori fino a questo momento. La possibiltà di usare questo framework abbinato a tecnologie server-side come Java, Sql, spring e molte altre la rende assolutamente all’avanguardia, se poi ci abbiniamo anche l’uso delle direttive, delle injections e tutte le altre tecniche che ne fanno parte possiamo dire tranquillamente che non manca niente per poter sviluppare progetti anche molto grossi ed impegnativi.
Questo articolo ti ha incuriosito? Prova allora a creare una tua prima applicazione Angular seguendo la guida sottostante!
Creazione dell’ambiente di sviluppo:
Il tuo sistema dovrà essere pronto per lo sviluppo di applicazioni Angular perciò inizia scaricando Visual Studio Code, l’editor con il quale potrai lavorare ai tuoi progetti (Ci sono anche altri editor utilizzabili con questo framework ma per il momento VScode ci offre tutto ciò di cui abbiamo bisogno).
Adesso avrete anche bisogno di installare Node e Npm che potrete trovare a questo link.
Una volta installato tutto ed aperto VS. siete pronti a lanciare nella console questo comando:
npm install -g @angular/cli , per verificare che l’installazione sia andata a buon fine lanciate ng — version il quale vi mostrerà la versione di angular/cli appena installata.
Ora potrete finalmente mettere in piedi la vostra prima applicazione!
Sempre dal terminale lanciate ng new <app-name> (app-name sarà il nome della vostra app), il quale creerà una directory con il nome da voi scelto e le relative cartelle / file iniziali.
Un ulteriore comando da lanciare è questo successivo che cambierà lo stile base da css ad scss ed aggiungerà vari file essenziali al vostro progetto: ng new doit — -style scss
Questo è ciò che dovrebbe mostrare la console:
installing ng
create .editorconfig
create README.md
create src/app/app.component.scss
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/assets/.gitkeep
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.scss
create src/test.ts
create src/tsconfig.app.json
create src/tsconfig.spec.json
create src/typings.d.ts
create .angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.e2e.json
create .gitignore
create karma.conf.js
create package.json
create protractor.conf.js
create tsconfig.json
create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project ‘doit’ successfully created.
Bene! La vostra applicazione è adesso già pronta e funzionante! Lanciando ng serve e navigando all’indirizzo http://localhost:4200/ potrete vedere i risultati del vostro lavoro.
A questo punto se non vedete niente provate a rieseguire i passaggi precedenti altrimenti se siete pronti possiamo andare oltre!
Per lo più durante la fase di sviluppo la sezione che toccherete maggiormente sarà quella dentro a src/app directory che contiene tutti i componenti dell’applicazione. In questa semplice guida non ci sarà bisogno di fare altre cartelle e dividere il progetto in varie sezioni perchè avremo pochi file, ma di solito conviene creare altri sottogruppi tramite nuove cartelle.
Prima di tutto abbiamo bisogno di un posto per immagazzinare i nuovi componenti che andremo a creare perciò aggiungete una cartella chiamata “components” e lanciate questa istruzione nel terminale di VScode: ng g module components, la quale aggiungerà un nuovo modulo dove verranno dichiarati i componenti.
Per rendere usabile il nuovo modulo andrà importato nell app.module.ts insieme agli altri moduli:
import { ComponentsModule } from ‘./components/components.module’;…@NgModule({
declarations: [AppComponent ],
imports: [BrowserModule, FormsModule, HttpModule, ComponentsModule // add the components module],
})
Adesso creiamo il nostro primo componente. Per rendere accessibile a tutti la guida faremo un semplice to-do component il quale si occuperà di aggiungere nuovi elementi ad una lista.
Per crearlo lanciare: ng g component components/add-todo
Una volta creato andremo ad aggiungerlo nel nostro component.module.ts tra gli array chiamati ‘declarations’ ed ‘exports’
@NgModule({
imports: [
CommonModule
],
declarations: [AddTodoComponent],
exports: [AddTodoComponent] // add the exports array
})
Ora aggiungiamo un input nel file add-todo.component.html:
<input type=”text” placeholder=”Add new todo..”>
e dichiariamo il componente nell’app. component.html in questo modo:
<app-add-todo></app-add-todo>
Se provi adesso ad aprire la pagina nel tuo browser dovresti vedere una textbox che prima non c’era, l’unico problema è che questa è un semplicissimo input e noi vogliamo che aggiunga un nuovo elemento alla lista quando un bottone viene premuto.
Per fare ciò dobbiamo aggiungere un object in cui salvare le informazioni dentro l’AppComponent nel app.commponent.ts. Creiamo quindi un’interfaccia dove definiamo la struttura dell’oggetto in questione in questo modo:
export interface Todo {
title: string;
completed: boolean;
}
export interface AppData {
todos: Array<Todo>;
}
Come potete vedere AppData è un’interfaccia che si aspetta un oggetto formato da un array di Todo, il quale a sua volta è formato da un titolo (title) ed una proprietà (completed).
Aggiungiamo quindi il nostro oggetto data di tipo AppData nell’app. component.ts e lo popoliamo in modo tale da avere dei finti dati con cui poter lavorare inizialmente.
export class AppComponent {
data: AppData = {todos: [{title: ‘Comprare la pasta’,completed: true},{title: ‘Pulire la camera’,completed: false}]};
}
Per controllare che la lista sia effettivamente piena utilizzeremo l’attributo *ngFor per mostrare ogni elemento presente in data.todos e mostrare il titolo in un nuovo div.
<! — app.component.html →
<div *ngFor=”let todo of data.todos”>
{{todo.title}}
</div>
<app-add-todo></app-add-todo>
La prossima funzionalità che implementeremo sarà l’aggiunta di un elemento al click di un bottone.
Scriviamo dunque il seguente metodo nella add-todo.component.ts:
addTodo(todo) {
console.log(todo); // Just logging the todo item for now
}
A questo punto in teoria dovremmo andare in ascolto dell’evento per quale scatenare l’aggiunta del nuovo item, ad esempio cercando di intercettare un event.keyCode === 13 (ovvero il tasto Enter della tastiera), ma Angular gestisce già uno “pseudo-evento” specifico per keyup.enter. Bindiamo quindi l’evento dall’elemento al nostro componente mettendolo tra due parentesi tonde.
Per raggiungere il valore dell’input textbox aggiungiamo una variabile newTodo alla input textbox cosi da poterlo richiamare da ovunque nel template. Possiamo quindi chiamare il valore dell’input semplicemente tramite newTodo.value. (Oltre che aggiungere un elemento vogliamo anche poi ripulire l’input quindi aggiungeremo anche un newTodo.value=’’ all’evento.)
<input #newTodo type=”text” placeholder=”Add new todo..”
(keyup.enter)=”addTodo(newTodo.value); newTodo.value=’’ “>
Fate caso al ; tra le due espressioni, il punto e virgola è molto usato nelle template expressions su Angular, se volete saperne di più seguendo questo link potrete trovare altri esempi ed informazioni.
Se adesso aprite la console del browser e provate ad aggiungere un elemento alla lista, dovreste vederlo comparire e l’input dovrebbe sbiancarsi.
Siamo quasi riusciti a creare la nostra applicazione ma ancora non vediamo la lista aggiornarsi dopo aver aggiunto un elemento, per fare ciò dovremo andare a creare un nuovo EventEmitter che trasmetterà il valore dell’input dal nostro componente all’app component.
Aggiungiamo l’evento al nostro add-todo.component.ts in questo modo:
@Output() addTodoChange = new EventEmitter();
Ricordate il nostro console.log(todo); che mostrava i nuovi elementi in console? Adesso dovremo rimpiazzarlo andando a chiamare l’evento appena creato.
addTodo(todo) {
this.addTodoChange.next(todo);
}
Per utilizzarlo dovremo anche inserire un nuovo metodo nell’app component che aggiornerà i valori della lista.
addTodo(todo) {
this.data.todos.push({title: todo,completed: false});
}
Possiamo adesso chiamare questo metodo dove il componente farà partire l’evento:
<app-add-todo (addTodoChange)=”addTodo($event)”></app-add-todo>
La variabile $event è una variabile speciale che contiene i dati trasmessi dall’evento ad esso legato, in questo caso ci servirà per passare il nuovo item alla lista.
Perfetto! Se tutto è andato per il verso giusto a questo punto la nostra applicazione dovrebbe funzionare correttamente, ad ogni aggiunta nell’input infatti la lista dovrebbe aggiornarsi da sola aggiungendo un nuovo elemento!
Cosa fare adesso?
Rimangono ancora molte altre cose da fare! Ad esempio, puoi provare a modificare il file scss del tuo componente in modo tale da rendere la pagina un po’ più carina, puoi cambiare il font, i colori, la dimensione dell’input e molto altro!
Angular un framework per il presente ma proiettato verso il futuro
Noi in Lascaux abbiamo fin da subito abbracciato questa nuova tecnologia e ci siamo accorti che la scelta è stata estremamente positiva. I nostri principali prodotti come l’AskMeChat e l’AppDesk sono stati infatti sviluppati utilizzando Angular ed Ionic e questo ci ha permesso di far toccare con mano ai clienti tutti i vantaggi che ne comporta.
Con la conclusione di questo articolo possiamo quindi dire che non esiste un momento migliore per imparare ad utilizzare Angular. Sempre più aziende tecnologiche stanno migrando verso questa piattaforma anche grazie alla garanzia da parte di Google di non introdurre altri cambiamenti radicali all’interno del framework e ad alla libreria parallela, Ionic, che sta andando di pari passo.
