Tempo di lettura: 9 minuti
Nel precedente articolo se vi ricordate abbiamo introdotto un discorso teorico su angular e sulle peculiarità di questo potente framework creato in casa Google atto a realizzare web App che non hanno nulla da invidiare alle App Ibride o Native.
Oggi inizieremo a preparare l’ambiente di sviluppo iniziando a scaricare l’Ide che più ci aggrada,Node js, Bootstrap per il layout e Sass.
SCEGLI L’IDE PER LO SVILUPPO ANGULAR
Anche se in rete si possono trovare decine di IDE(Integrated Development Environment, ambiente di sviluppo integrato) open source ,la scelta deve cadere sul migliore ,e per migliore si intende quello che ti aiuta a scrivere meno codice possibile per lo sviluppo Angular grazie all’auto completamento di questo con l’ausilio di eventuali snippets o plugin da integrare.
Come detto in precedenza il linguaggio da preferire nella compilazione di programmi in angular è TypeScript,per cui di seguito eccovi alcuni editor di testo gratuiti e non per compilarlo al meglio:
Visual studio code – gratuito
Realizzato dalla Microsoft si può scaricare da https://code.visualstudio.com/,a mio avviso è il miglior editor gratuito per la scrittura del codice TypeScript grazie alla presenza della funzionalità di ‘intellisense’ che aiuta all’auto compilazione.
Inoltre vi si possono aggiungere molte funzionalità interessanti a prescindere dal codice che si intende compilare, nel nostro caso il mio consiglio è di installare quella creata da JONH PAPA che agevola la scrittura di pezzi di codice Angular. L’estensione si chiama “angular v7 TypeScript snippet”.
Per installarla aprite visual studio ,digitate CTRL+P oppure cliccate sull’ultima icona a sinistra nella barra laterale e nel campo di ricerca digitate il nome dell’estensione.
Una volta installata basterà digitare una iniziale per veder aprire una finestra con tutta una serie di nomi legati a frammenti di codice(snippet) utili alla compilazione di angular.
Altra estensione da prendere in considerazione è sicuramente “AutoImport” la quale consente di auto completare il codice grazie all’importazione delle diverse librerie.
Atom – gratuito
Anche questo open source e considerato da molti un ottimo editor, scaricabile da https://atom.io/. Una volta scaricato dovete ricordarvi anche di installare il plugin “TypeScript plugin”. L’installazione del plugin è semplice basta andare su ‘File -> setting’ e dalla colonna centrale selezionare la voce ‘install’, vedi immagine sotto:
Sublime text – A pagamento
I possessori di Mac sicuramente conoscono bene questo editor, ottimo ma a pagamento scaricabile da http://www.sublimetext.com/3.
Una volta scaricato dovrai installare il plugin”TypeScript sublime”.
Web storm – A pagamento
Software degno di nota ,purtroppo a pagamento , si può scaricare una versione trial da 30 gg da : https://www.jetbrains.com/webstorm/download
NODE JS E NPM
Node js è una piattaforma open source e cross-platform(ovvero disponibile per più sistemi operativi come linux,macOS,windows). Questo è sviluppato seguendo il paradigma della programmazione ad eventi o event-drive.
Per poter utilizzare Angular è necessario dunque installare sia Node js che Npm, per ora non preoccupatevi di capire a cosa servono in quanto ci serviranno solamente per installare nel nostro pc una serie di strumenti utili alla realizzazione dei nostri progetti.
Il link è il seguente: https://nodejs.org/en/download/, una volta scaricato installatelo,il file contiene sia node js che npm.
Quindi testatelo, badate bene che le versioni devono essere superiori alla 6.9 per quanto riguarda node js e 3 per quel che riguarda npm. Il test si esegue lanciando il prompt dei comandi sia su linux,mac o windows e digitando:
node –v //verifica la versione di node
npm –v// verifica la versione di npm
Io adesso mi trovo su windows e per quanto riguarda il prompt dei comandi utilizzo cmder,open source, scaricabile da: http://cmder.net/
BOOTSTRAP
Molti di voi conosceranno già sicuramente Bootstrap ,framework realizzato in casa Twitter nel 2011 per lo sviluppo di interfaccie per la creazione di template Html responsive (che si adattano su tutti i dispositivi),indispensabile per la realizzazione del layout del nostro progetto.
Il sito ufficiale di Bootstrap è http://getbootstrap.com/, nella sezione Get started potete scaricare il codice sorgente o utilizzare direttamente la libreria includendola nella pagina web tramite CDN (Content Delivery Network).
Esempio di home page Bootstrap(index.html)
<!doctype html> <html lang="it"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>The HTML5 Bootstrap Page</title> <meta name="description" content="Esempio"> <meta name="author" content="Vincenzo"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <h1>h1. Bootstrap heading <small>Secondary text</small></h1> </div> </body> </html>
SASS
Sass(Syntactically Awesome StyleShetts) è una estensione del linguaggio Css il quale presenta dei limiti importanti che si manifestano soprattutto durante lo sviluppo di applicazioni più complesse.
Sass prova a sopperire nella modularizzazione,nidificazione ,utilizzo di variabili e funzioni.
Il sito web ufficiale è http://sass-lang.com/.
Per installare Sass ,su linux, digitiamo il comando:
$ sudo su-c”gem install sass”comunque prima di poterlo utilizzare occorre procedere all’installazione di Ruby reperibile dal link : https://www.ruby-lang.org/it/downloads/ ,non importa che lo conosciate in quanto serve solamente perché Sass è sviluppato in ruby.
Scaricate la versione compatibilmente con il vostro sistema operativo, nei sistemi operativi macOs dalla versione 10.6 in poi Ruby è presente di default, per installare Sass procedete nella maniera analoga a linux.
Una volta installato,su Windows, per installare Sass digitate da linea di comando: gem install sass install
Per verificare che tutto sia a posto da linea di comando digitate : sass –v// verifica la versione di sass
Il seguente è un esempio di un listato di file style.scss (a differenza dei file css i file sass hanno estensione .scss):
$colorbg:#8AC51D;
$color:#fff;
$border:1px solid red;
@mixin border-radius($radius){
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;
}
div{
.my-div{
background:$colorbg;
border:$border;
color:$color;
@include border-radius(10px);
}
}
Dove creo delle variabili colorbg,border,color le quali ,come potete notare hanno suffisso $, creo la funzione @mixin border-radius al fine di evitare ogni volta di specificare i prefissi per i diversi browser. Infine nidfico la classe my-div con il selettore div.
Una volta terminato,visto che il browser non interpreta il file scss, dobbiamo generare un file css,quindi da terminale spostiamoci all’interno della cartella contenente il nostro progetto e digitiamo:sass style.scss style.css
Se aprite la cartella ora noterete che è stato creato n file .css ,oltre a questo è stato un generato anche un file .map il quale mantiene la correlazione fra i due file.
Sass offre un funzionalità molto comoda in fase di sviluppo, se da riga di comando digitate: sass –watch style.scss:style.css ,questa pone in ascolto il programma sulle eventuali modifiche del file .scss modificando in tempo reale il file .css correlato.
Inoltre Sass consente di creare file .css compressi digitando da riga di comando: sass style.scss style.css –style compressed
GESTIRE LE DIPENDENZE CON NPM
Npm ha un ruolo fondamentale nella stesura dei progetti in quanto contiene tutti i package fondamentali per la corretta compilazione delle applicazioni.
Per poter utilizzare i package di Npm bisogna salvare all’interno della root del progetto il file package.json il quale indica a Npm tutte le dipendenze da salvare per poter utilizzare l’applicativo.
Esempio di file package.json:
{
"name":"miapp",
"version":"0.0.0",
"license":"UNLICENSED",
"description":"Corso angular 4",
"dependencies":{
"modernizr":"^3.3.1" ,
"bootstrap":"^3.3.7",
"jquery":"3.2.1"
}
}
Dove in name inserite il nome della vostra App,in version dei numeri progressivi in base alle vostre versioni,in license inserite UNLICENSED,in description inserite la descrizione dell’App, infine in dependencies i package da scaricare.
A questo punto se lanciassimo il comando npm install, si creerebbe all’interno della root una cartella denominata node_modules con all’interno tutti i package sopra descritti pronti all’utilizzo.
HELLO WORLD
Ora mettiamo in pratica ciò visto fino ad ora rivedendo la pagina index.html aggiungendovi i collegamenti alle dipendenze scaricate mediante npm:
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Hello World Page</title>
<meta name="description" content="Esempio">
<meta name="author" content="Lucio">
<link rel="stylesheet" type="text/css"
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="hello container-fluid">
<h1>Hello world</h1>
<button type="button" data-toggle="tooltip"
data-placement="bottom" title="Primo esempio">
<span class="glyphicon glyphicon-info-sign"></span>
</button>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
</body> </html>
Completano l’esempio il file style.scss rivisto:
$backgroundColor:#8AC51D;
@mixin border-radius($radius){
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;
}
.container{
margin-top:20px;
.hello{
text-align: center;
background:$backgroundColor;
@include border-radius(10px);
h1{
display: inline-block;
color:white;
text-align: center;
}
button{
display: inline-block;
background-color: transparent;
border: none;
outline: none;
}
}
}
Ricordatevi anche di lanciare l’npm install visto in precedenza.
Nel prossimo articolo vedremo cosa è ANGULAR CLI.
Ciao alla prossima!!
