Angular e sai come sviluppare in JS lato server!

In un primo overview su Angular all’ indirizzo https://umbriawayamplifica.wordpress.com/2019/04/12/scacco-matto-ad-angular-in-meno-di-venti-mosse-ora-puoi/ ci si è congedati con una domanda, ma come faccio a passare all’ ambiente di produzione? Facciamo un passo indietro e vediamo quando nasce il progetto che struttura ha la pagina index.html presente nella root della cartella SRC che a sua volta conterrà la famosa cartella APP che è il focus di tutto il nostro lavoro:

/*

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>TestFwd</title>
<base href=”/”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
</head>
<body>
<app-root></app-root>
</body>
</html>

*/

a questo punto verrebbe da chiedersi visto che la pagina viene visualizzata, ma come mai visto che mi ritrovo una dicitura aliena che é <app-root></app-root>? E qui torniamo alla domanda iniziale. Come faccio a trasferire la mia applicazione angular da server locale a server remoto. abbiamo visto che il comando bg serve –open apre l’applicazione sulla porta 4200 in locale. Ora avendo il nostro progettino di default più di 20 mila file con una pesantezza tra risorse e dipendenze modulari che non lasciano presagire nulla di buono, se ci viene la malsana idea di trasferire tutto via FTP, ci accorre in aiuto il comando ng build che crea una cartella di produzione molto leggera con tutti i file che servono per far girare l’applicazione angular, in una nuova cartella nascosta denominata DIST (distribuzione) . Il comando ng build ha come al solito varie opzioni tra cui anche quello per i parametri di produzione –prod per esempio. Se faccio ng serve –open vedrò dunque:

se riapro la finestra terminale con CTRL + ò e digito ng build ottengo dunque una versione leggera del mio programma, che una volta trasferiti i file all’ interno della cartella dist (la cartella del progetto) via FTP sul mio server di produzione mi mostrerà lo stesso di quello che vedevo in locale, con tutti i collegamenti JS a runtime per la giusta elaborazione/compilazione della pagina che trasformeranno il <app-root></app-root> secondo una serie di digeribili tag html del DOM. A questo punto possiamo partire da un template grafico magari prelevandolo dal sito ufficiale bootstrap, per scomporre una pagina statica in componenti riutilizzabili, tipo pagine per la navigazione che abbiamo integrato con le opzioni routing come detto su https://umbriawayamplifica.wordpress.com/2019/04/12/scacco-matto-ad-angular-in-meno-di-venti-mosse-ora-puoi/ . Sostanzialmente dobbiamo creare tanti piccoli componenti minimalisti con l’essenziale per poi ricucire il tutto e creare un gigantesco arcipelago. Se non voglio usare bootstrap posso utilizzare librerie dedicate come https://material.angular.io/ per esempio. Passiamo ad analizzare il classico ciao mondo in angular:

/*
<!DOCTYPE html>
<html lang=”en”>
<head>
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js
</head>
<body ng-app=”myapp”>

Hello {{helloTo.title}} !

angular.module(“myapp”, [])
.controller(“HelloController”, function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = “World, AngularJS”;
} );

</body>
</html>
*/

dove nel tag head abbiamo il link alla nostra libreria tra e :
src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js” che è indispensabile per richiamare i metodi del framework. Essendo angular costruito sul paradigma Model View Controller non dovrebbe essere complesso identificare la parte visiva di presentazione che é :

/*
<body ng-app=”myapp”>

Hello {{helloTo.title}} !

*/

da quella del controller che fa da mediatore tra modello e vista:

/*

angular.module(“myapp”, [])
.controller(“HelloController”, function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = “World, AngularJS”;
} );

*/

da quello che si evince in questo esempio Angular é una applicazione che riprende un mix di HTML e JavaScript che qui nello specifico é un dialetto chiamato TypeScript. Angular funziona con un evento esterno che sollecita il controller che dialoga con la vista che mette in moto il modello dei dati che vengono spediti e sollecitati al controller che reagirà così alle sollecitazioni offrendo in output il risultato della richiesta. Questo non è altro che il famoso pattern MVC dove il modello è il responsabile della gestione dei dati che risponde alle richieste del controller tramite un interfaccia, la View, che non fa altro che presentare a video le informazioni e offrire interattività all’ utente. Il responsabile delle comunicazioni tra i due blocchi modello e vista è il controller che si pone come intermediario per mediare le esigenze di ciascun gruppo. Vediamo un esempio di collegamento ai dati o data binding secondo il pattern descritto:

/*
<!DOCTYPE html>
<html>
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
<body>

Input something in the input box:

Name:

You wrote: {{ firstName }}

</body>
</html>
*/

Vediamo ad esempio come sommare facilmente due campi variabili sommando sempre il principio del collegamento dei dati:

/*
<!DOCTYPE html>
<html>
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<body>

Cost Calculator

Quantity:
Price:

Total in rupees: {{quantity * price}}

</body>

</html>

*/

Facciamo un rapido riassunto delle puntate precedenti sulla CLI, i comandi da dare a terminale. Per lavorare con Angular serve l’ambiente di sviluppo con Node.js, poi devo avere un editor e infine la mia Command Line Interface che da terminale installo globalmente (-g) con il comando install -g @angular/cli. Per creare un nuovo progetto sotto utenti, nomeutente lancio il comando ng new miaApp. Per lanciare l’applicazione in localhost sulla porta settata di default su 4200 prima mi posiziono sulla directory con cd miaApp e poi lancio ng serve –open dopodiché la mia applicazione si aprirà automaticamente in un browser. Con il comando ng build all’ interno del progetto creo unja versione leggera da pubblicare su server di produzione. La finestra terminale si apre con la combinazione di tasti CTRL + ò

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo:
close-alt close collapse comment ellipsis expand gallery heart lock menu next pinned previous reply search share star