Angularjs: Un Framework Di Frontiera Per La Realizzazione Di Siti Web
Total Page：16
File Type：pdf, Size：1020Kb
Università degli Studi Mediterranea di Reggio Calabria Dipartimento di Ingegneria dell’Informazione, delle Infrastrutture e dell’Energia Sostenibile Corso di Laurea in Ingegneria dell’Informazione Tesi di Laurea AngularJS: un framework di frontiera per la realizzazione di siti Web Relatore Candidato Prof. Domenico Ursino Cristiano Antonio Capanna Anno Accademico 2014-2015 “Siamo progammati per andare avanti” Indice Introduzione………………………………………………………………………………………………………………… 1 Capitolo 1 Che cos’è AngularJS ................................................................................................... 9 1.1 La storia ........................................................................................................................... 10 1.2 Le principali caratteristiche .............................................................................................. 12 1.2.1 Template .................................................................................................................. 13 1.2.2 Directive ................................................................................................................... 13 1.2.3 Expression ................................................................................................................ 14 1.2.4 Data-Binding ............................................................................................................ 15 1.2.5 Module ..................................................................................................................... 16 Capitolo 2 Come utilizzarlo ....................................................................................................... 19 2.1 L’installazione ................................................................................................................. 20 2.2 Primo esempio ................................................................................................................ 22 2.3 Secondo esempio ............................................................................................................ 24 Capitolo 3 Alcune applicazioni ................................................................................................... 31 3.1 Web ................................................................................................................................. 32 3.1.1 SEO e AngularJS........................................................................................................ 34 3.2 Dispositivi mobili .............................................................................................................. 35 3.2.1 Responsive web app ................................................................................................... 36 3.2.2 Applicazioni native con Cordova................................................................................ 37 Capitolo 4 Analisi dei concorrenti .............................................................................................. 39 4.1 Altri framework ............................................................................................................... 40 4.1.1 Ember.js ................................................................................................................... 41 4.1.2 Backbone.js .............................................................................................................. 43 4.1.3 Knockout.js .............................................................................................................. 44 4.2 AngularJS vs jQuery? ...................................................................................................... 46 4.2.1 I due Data-Binding ................................................................................................... 49 I 4.2.2 La verità è… .............................................................................................................. 50 Capitolo 5 Le ultime battute ...................................................................................................... 53 5.1 Riepilogando .................................................................................................................... 54 5.2 AngularJS 1.4 ................................................................................................................... 54 Ringraziamenti …..………………………………………………………………………………...…………………..55 Bibliografia ….…………………………………………………………………………………………………………. 57 II III IV Introduzione L’HTML è un linguaggio di markup solitamente usato per la formattazione e l’impaginazione di documenti ipertestuali. I documenti HTML sono in grado di incorporare molte tecnologie che offrono la possibilità di aggiungere al documento ipertestuale interazioni dinamiche con l’utente, animazioni interattive, contenuti multimediali, e molto altro ancora. Si tratta di linguaggi CSS, JavaScript, jQuery, XML e JSON. JavaScript è un linguaggio di scripting orientato agli oggetti e agli eventi, comunemente utilizzato nella programmazione web lato client; esso viene impiegato all’interno di altri linguaggi come, ad esempio, HTML. Per dar vita ad una pagina web si può utilizzare contemporaneamente HTML (per creare il template) e JavaScript (per creare la parte dinamica). Ma, nonostante la presenza di questi due linguaggi, definire la struttura di una pagina risulta difficile; per superare tali differenze che vengono in aiuto i framework. Un framework è un’architettura logica di supporto su cui un software può essere progettato e realizzato, spesso facilitandone lo sviluppo da parte del programmatore. Sono molti i framework esistenti nel mondo dell’open-source, e non ne esiste uno migliore in assoluto; la scelta dipende, ovviamente, dall’utente che vuole utilizzarlo. Quello che presenteremo oggi sarà AngularJS. AngularJS è un framework JavaScript che permette di utilizzare il linguaggio HTML, assieme ad un insieme di suoi costrutti nativi, per sviluppare applicazioni single web page. Tale framework, basato sul pattern MVC, ha avuto un gran successo, soprattutto negli ultimi anni, grazie ad investimenti ricevuti da Google per svilupparne le capacità. AngularJS fu ideato nel 2009 da due sviluppatori, Misko Hevery e Adam Abrons. Il secondo abbandonò il progetto quando il primo, dopo essere stato assunto dalla Google, iniziò ad utilizzarlo per agevolare la scrittura del codice su cui stava lavorando. La multinazionale capì subito le potenzialità di AngularJS; infatti, iniziò ad utilizzarlo per riscrivere le applicazioni delle compagnie che andava via via acquisendo. Google creò un team che iniziò a lavorare esclusivamente sul framework aggiornandolo e mantenendolo all’avanguardia. Le caratteristiche principali che fanno di AngualrJS uno tra i framework più “cliccati” ed utilizzati sono: Template; permette di utilizzare HTML in cooperazione con attributi specifici di AngularJS. Dal momento che AngularJS si basa sul pattern MVC, possiamo considerare il Template come la View che raccoglie informazioni provenienti dal Model e dal Controller. Directive; sono le componenti fondamentali dell’applicazione AngularJS; di default, ci viene offerta una vasta gamma di Directive; ciò non toglie che è possibile creare le nostre, in modo da personalizzare completamente l’applicazione creata. Expression; è considerata la parte dinamica del codice, che può sostituire o lavorare in cooperazione con JavaScript. Data-Binding; è l’innovazione più importante di AngularJS, e rappresenta la sincronizzazione automatica del codice tra View, Model e Controller. La differenza del Data-Binding con gli altri framework è che questa sincronizzazione viene effettuata automaticamente da Angular, e non manualmente, come negli altri framework. Module; è ciò che rende snodabile il codice delle pagine web create; possiamo, quindi, vederle i Module come contenitori che “racchiudono” le diverse parti del sito. Come detto, AngularJS non è l’unico framework open source per costruire applicazioni single web page; infatti, ne esistono diversi, ciascuno dei quali presenterà vantaggi e svantaggi rispetto ad AngularJS. I principali concorrenti sono: Ember.js; basato sul pattern MVC, si pone come obiettivi quelli di: aiutare l’utente a creare la parte client side delle applicazioni, adattarsi e, al contempo, evolversi rispetto alle nuove tecnologie. È un framework più vecchio rispetto ad AngularJS in quanto, la sua creazione risale al 2007; in un secondo momento il suo sviluppo è stato portato avanti dalla Apple. Backbone.js; è un framework famoso per la sua leggerezza; ha un’interfaccia Restfull JSON basata sul pattern MVC. La sua leggerezza è sia un vantaggio, sia uno svantaggio, in quanto se da un lato lo rende estremamente rapido, con una curva di apprendimento lineare, dall’altro non gli consente di garantire allo sviluppaotre la possibilità di realizzare un’architettura stabile. Knockout.js; è una libreria che si basa sul pattern MVVM (variante del pattern MVC). Questa libreria non fornisce aiuti nella gestione del DOM, ma si focalizza sulla creazione dell’interfaccia utente, riducendo la quantità del codice da scrivere. In ultimo, abbiamo la libreria jQuery; questa aiuta gli sviluppatori nella manipolazione del DOM attraverso l’uso di API chiare e semplici. jQuery è stata rilasciata per la prima volta nel 2006, ed è un progetto tutt’ora in via di sviluppo grazie anche all’apporto di Microsoft. Molti sviluppatori considerano jQuery come un concorrente di AngularJS; in realtà, vi è la possibilità di cooperazione tra il framework e la libreria (o meglio, i suoi plugin), soprattutto