• Cosa fa Angular 4

    Tante novità, a partire dal fatto che ora il linguaggio è univoco, dopo un passato di evoluzione burrascosa e confusa.

    È stata da poco rilasciata la versione stabile 4 di Angular ed in molti si sono chiesti se questa abbia in qualche modo introdotto problemi di compatibilità con le precedenti. L’uscita del libro Sviluppare applicazioni con Angular ha preceduto il rilascio della versione 4 di un mese; nonostante questo, lo sviluppo beta della nuova release e le versioni candidate avevano già dato una chiara idea che non si sarebbe ripetuto quanto accaduto nel passaggio dalla versione 1. È importante chiarire questo concetto per fugare i dubbi di quanti si sono chiesti se il libro trattasse Angular 2, piuttosto che Angular 4.

    Ciò che è accaduto nel refactoring dalla versione 1 alla 2 è stato necessario e non si ripeterà. Le versioni successive consisteranno in miglioramenti del framework ed implementazioni di nuove funzioni. Il team di sviluppo di Angular ha assicurato che non ha nessuna intenzione di introdurre path breaking, rotture della compatibilità tra versioni diverse.

    La versione stabile ad oggi è la 4.0.0 ed è perfettamente in linea con quanto trattato in Sviluppare applicazioni con Angular; con tutta probabilità lo sarà anche per le versioni successive. Adesso concentriamoci sulle novità introdotte da questa nuova release.

    TANTE NUOVE, BUONE NUOVE

    Angular adotta dalla versione 2 un sistema di versioning chiamato SemVer (Semantic Versioning) che chiarisce maggiormente l’impatto di una nuova versione rispetto alla precedente. I tre numeri separati dal punto del numero di versione indicheranno di per sé la natura della release.

    Il primo numero è definito come major, il secondo come minor ed infine il terzo come patch. In base alla tipologia di modifiche effettuate rispetto alla versione precedente viene incrementato il valore corrispondente. Se la modica è sostanziosa verrà incrementato major; se invece viene implementata una nuova feature, sarà incrementato minor e l’ultimo numero (patch) riguarda l’applicazione di un bugfix. Questo sistema renderà sicuramente più comprensibie il versioning delle nuove versioni. In questa logica la versione 4 ha visto incrementare major da 2 a 4. saltando la versione 3 per problemi interni legati alla gestione del repository che avrebbero generato confusione.

    Sviluppare applicazioni con Angular

    PRONTO PER SFRUTTARE ANGULAR 4 E OLTRE.

     

    L’aspetto principale di questa nuova release è l’ottimizzazione del view engine. Il team di sviluppo ha pronosticato un notevole abbattimento del codice prodotto dalla compilazione Ahead-of-Time dei componenti, incrementando così le prestazioni degli applicativi. Rispetto alla versione precedente si può ottenere un 60 percento in meno di codice, cosa che riduce sensibilmente il peso del bundle. Rimanendo in tema view è stata introdotta una simpatica feature, ovvero la possibilità di utilizzare la parola chiave else all’interno della direttiva ngIf.

    <div *ngIf="3>2; else bye">Hello...</div>
    <ng-template #bye>Bye...</ng-template>

     

    In questo modo si evita di scrivere due direttive ngIf con condizioni contrarie. Inoltre, come vediamo nel breve sorgente proposto, è stato introdotto l’elemento ng-template e deprecato il precedente elemento template. Un’altra novità è l’uso della parola chiave as, che semplifica l’assegnazione delle variabili nel template.

    // people: Array<String> = ['Vincenzo', 'Chiara'];
    <div *ngFor="let p of people as total; index as i">
     {{i+1}}/{{total.length}}: {{p}}
    </div>

     

    Altre novità riguardano l’introduzione della pipe titlecase, che simula la proprietà CSS text-transform: capitalize; la semplicificazione dell’uso dei query string in http (this.http.get(`http://localhost`, { params: { id: ’3′ } })) e la nuova interfaccia ParamMap per la cattura dei parametri di routing.

    let field = this.route.snapshot.paramMap.get('search');

     

    È cambiata anche la gestione dei form. È stato introdotto un nuovo validatore, chiamato email, ed una direttiva compareWith, che permette con facilità di selezionare la scelta di default di una select, per mezzo di una funzione di comparazione. Fate riferimento alla guida ufficiale per verificare i dettagli.

    ANGULAR UNIVERSAL

    Inoltre è stato rimosso dal core di Angular il supporto per le animazioni per inserirlo in un package a parte, BrowserAnimationsModule. Per quanto riguarda le problematiche legate al SEO, il software Angular Universal è stato adottato dal team di Angular e d’ora in poi sarà aggiornato insieme alle altre librerie. Angular Universal effettua un rendering lato server, consentendo così ai crawler, come Google ed i vari social network di elaborare il reale contenuto della view senza incorrere nei loro tipici problema di elaborazione di JavaScript.

    Il team si è preoccupato anche di aggiornare il supporto a TypeScript, ora comprendente le versioni 2.1 e 2.2; ciò consentirà agli sviluppatori di approfondire ancora di più le feature implementate in queste nuove versioni del nostro linguaggio di riferimento.

    Il team ha infine lavorato per incrementare gli strumenti di debug tramite sourcemap per quanto riguarda i template e hanno implementato in via sperimentale il supporto ai moduli ES2015 Flat ESM, il che consentirà di ridurre di circa il sette percento il codice bundle generato.

    CHIAMAMI ANGULAR

    Il linguaggio rimane quello che abbiamo trovato dopo il refactoring. Le nuove release non devono spaventare, piuttosto incuriosirci. È bene conoscere e implementare le nuove versioni nei nostri progetti, ma non dobbiamo più ragionare in termini di aggiornamenti differenti tra loro. Dopo il refactoring Angular non ha bisogno di essere chiamato con la sua versione di riferimento: solo e semplicemente Angular.

    Buona programmazione!

  • Angular fa buona guardia

    Un esempio per persone pratiche di programmazione che mostra l’efficacia dell’architettura oggi più usata per realizzare pagine web.

    Proteggere le rotte è un argomento piuttosto frequente nello sviluppo di applicazioni web che prevedono un accesso tramite login. Lo strumento che consente di discriminare l’utenza, in gergo viene definito come Guard.

    Questo termine, tradotto dall’inglese, significa guardia e calza perfettamente con quello di cui stiamo parlando.

    L’esigenza che spinge lo sviluppatore a proteggere una determinata view è probabilmente dovuta ad una suddivisione dei privilegi dell’utenza che ha accesso al sito. Le view, e di conseguenza le relative rotte che devono essere configurate dietro una pagina di login, hanno necessità di negare l’accesso all’utenza guest.

    DIETRO UN LOGIN

    Gestire un form di login è una operazione piuttosto semplice che non prevede l’uso di package particolari o service dedicati. Possiamo limitarci ad immaginare il componente Login come una semplice view con un form con due input: username e password.

    I dati immessi dall’utente con l’operazione di submit vengono inviati tramite chiamata HTTP ad un endpoint che, nel caso in cui username e password risultassero corretti, risponderà con il classico codice di stato HTTP 200. Il componente Login confermerà l’avvenuto collegamento.

    Il guard Angular viene spesso implementato e di conseguenza gestito tramite l’interfaccia dedicata CanActivate, che consente di verificare i privilegi dell’utente e quindi negare o consentire l’accesso ad una determinata rotta. Ipotizziamo di avere definito questo routing:

    …
    import {AuthGuard} from './auth.service';
    const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'private', component: PrivateComponent, canActivate: [AuthGuard] }
    ];

    canActive è il parametro che, nella specifica rotta, consente di invocare la nostra classe AuthGuard affinché questa faccia la guardia alla rotta private. La classe AuthGuard potrebbe essere qualcosa di questo tipo:

    import { Injectable } from '@angular/core';
    import { CanActivate } from '@angular/router';
    import { LoginService } from './login/login.service';

     

    @Injectable()
    export class AuthGuard implements CanActivate {
    	constructor(private l: LoginService) {}
    	canActivate() {
    		if(this.l.user){
    			return true;
    		}else{
    		return false;
    		}
    	}
    }

     

    Sviluppare applicazioni con Angular

    LA GUIDA PIÙ COMPLETA, FRESCA DI STAMPA.

     

    AuthGuard deve implementare l’interfaccia CanActive che si occupa di verificare la presenza del metodo canActive. Il suddetto metodo viene invocato simultaneamente alla richiesta di accesso alla rotta da parte dell’utenza. Quello che faremo in questo metodo sarà restituire true se l’accesso sarà consentito o false nel caso in cui sarà negato.

    Nella fattispecie è importante tenere traccia del login effettuato tramite un servizio dedicato che lavora integrandosi al componente di login. Il servizio LoginService, in questo caso, fornirà l’oggetto user il quale, se valorizzato, significa che l’utente ha effettuato il login e quindi sarà abilitato alla navigazione della rotta private.

    ALTRE INTERFACCE

    Oltre a CanActive, esistono altre due interfacce: CanDeactivate e CanActivateChild, che rispettivamente invocano i metodi canActivateChild, e canDeactivate.

    L’interfaccia CanDeactivate viene invocata quando si sta per lasciare una rotta e risulterà parecchio utile in diversi contesti, come per esempio la compilazione di form complessi. Il funzionamento di CanActivateChild è identico a CanActive, con la differenza che viene usata per le rotte figlie.

    È bene non dimenticare che il servizio AuthGuard deve essere dichiarato come providers tramite il decoratore NgModule. Buona programmazione!

    Abbiamo anche intervistato Vincenzo Giacchina all’indomani dell’uscita del suo Sviluppare applicazioni con Angular edito da Apogeo.

  • Sviluppare applicazioni con Angular

    La frontiera più moderna della programmazione: un framework per pagine web che sono applicazioni quasi native.

    Quelle che apriamo nel browser, da tempo, sono molto più che semplici pagine come potrebbero essere quelle di una pubblicazione. E le grandi software house hanno messo a punto sistemi per offrire possibilità sempre più avanzate.

    L’architettura Angular creata da Google è la più diffusa e al momento anche la più evoluta. Avendo a disposizione Vincenzo Giacchina, autore del libro Apogeo appena uscito in argomento, abbiamo approfondito la sua quotidianità di programmatore e le tematiche attorno ad Angular. Ecco la nostra intervista.

    Apogeonline: La tua carriera è iniziata in giovanissima età. Come hai scoperto Angular e come mai hai deciso di dedicarti a questo progetto invece che ad altri?

    Vincenzo Giacchina: La passione per l’informatica mi è nata presto e altrettanto presto ho incontrato le realtà aziendali. Lo sviluppo di applicazioni, all’inizio della mia carriera, riguardava ambienti Linux embedded in C. Intorno al 2008 la mia curiosità si è spostata verso il mondo web ed il linguaggio JavaScript, che fino a quel momento avevo sottovalutato.

    La comprensione delle dinamiche relative all’interazione con il browser, l’uso di JavaScript vanilla e le difficoltà di cross-browsing hanno catturato totalmente il mio interesse; da quel momento non ho più abbandonato lo sviluppo web.

    La scoperta del framework Angular è avvenuta nel 2014 in Beeweeb, un’azienda con la quale ho collaborato per circa un anno a Roma. In quell’occasione ho ereditato il portale dell’Auditorium Parco della Musica, un complesso multifunzionale a Roma progettato dall’architetto Renzo Piano. Il progetto era stato realizzato in AngularJS. Ho trovato fin da subito un feeling con la logica progettuale imposta dal framework e a onor del vero non c’erano alternative importanti per applicazioni single page caratterizzati dal pattern MVC. Da quel momento non ho più trovato la necessità di valutare seriamente alternative ad Angular.

    L’evoluzione di Angular, per quanto si tratti di un framework relativamente recente, è piuttosto intricata. Che cosa dobbiamo sapere del suo passato per usarlo al meglio oggi?

    Angular è un framework completamente differente dalla versione precedente. Quest’ultima versione non è retrocompatibile con la precedente, ulteriore conseguenza della scelta di voler dividere nettamente i due ambienti di sviluppo. Detto questo, chi ha fatto uso di AngularJS (versione precedente) rispetto a chi si avvicina ad Angular per la prima volta, avrà il vantaggio dell’esperienza.

    Aver già lavorato in SPA e aver già chiari concetti logici strutturali, quali ad esempio l’uso di direttive, pipe, service e injection non è poi poca cosa. A parte l’esperienza pregressa nello sviluppo di applicazioni, lo sviluppatore non deve scoraggiarsi nell’approcciare da zero il nuovo Angular. Il veterano di AngularJS ha sì il vantaggio dell’esperienza, ma dovrà anche dimenticare molte nozioni che sono totalmente cambiate. Questa è l’informatica.

    Sviluppare applicazioni con Angular

    IL CAMPIONE DELLO SVILUPPO DI APPLICAZIONI IBRIDE.

    Che vantaggi ci sono nell’uso di TypeScript come linguaggio privilegiato per lo sviluppo in Angular rispetto a scelte come JavaScript e Dart?

    Nel libro ho scelto, forse più come imposizione, TypeScript come linguaggio di riferimento rispetto agli altri due. Dart non si è capito che fine farà; non mi sento di definirlo linguaggio morto ma non scommetterei neanche su una sua capillare diffusione. Per quanto riguarda JavaScript, rimane quello l’ambito di sviluppo. TypeScript è un superset di JavaScript, una sua evoluzione, non è poi così lontano da quello che un utilizzatore JavaScript è abituato a vedere. Lo sviluppo stesso di Angular è in TypeScript e la documentazione ufficiale fa riferimento a TypeScript come linguaggio principale.

    I vantaggi nell’uso di TypeScript in Angular possono essere riassunti con i vantaggi del linguaggio stesso. TypeScript rispetto a JavaScript è staticamente tipizzato; ciò consente una maggiore sicurezza e robustezza nella scrittura del codice e nella rilevazione degli errori che, rispetto a JavaScript, non verrano elaborati in runtime, ma piuttosto in fase di compilazione. Non dimentichiamo che TypeScript rimane totalmente compatibile con JavaScript e questo consente di poter integrare qualsiasi progetto del secondo all’interno del primo. La tipizzazione dinamica che caratterizza JavaScript rimane inoltre un anello debole in progetti di grosse dimensioni.

    TypeScript è un’iniziativa di Microsoft mentre Angular arriva da Google. Microsoft è stata nota molti anni fa per la sua strategia embrace-extend-extinguish: aderisci a un progetto altrui, amplialo in modo da diventarne arbitro in virtù di una superiore potenza di fuoco, accompagnalo all’irrilevanza se è fastidioso per i tuoi scopi. Come vedi il legame tra TypeScript e Angular alla luce del passato?

    Non so se anche TypeScript rientra nella strategia a cui tu fai riferimento, probabilmente si, ma penso sia davvero una mossa ben riuscita. Microsoft sta prendendo spazio nuovamente nel mondo legato al browsing. Il suo nuovo browser ha buoni feedback e finalmente sembra aver prestato maggiore attenzione verso gli sviluppatori e gli standard. In tutto questo, la scelta di non provare a sviluppare una vera alternativa a JavaScript ma svilupparne una sua evoluzione è stata un’altra scelta azzeccata.

    Le tempistiche mi suggeriscono che la scelta del team Angular di optare per TypeScript sia stata più una scelta di merito che altro. TypeScript nasce prima del nuovo Angular e, ancora prima di affidarsi totalmente a TypeScript, il team di Angular aveva optato per altre alternative. La collaborazione tra Microsoft e Google nasce intorno alle fine del 2015 probabilmente per interessi comuni. Google opta per TypeScript e la collaborazione gli offre probabilmente una parola in più nello sviluppo di TypeScript, per cui non è costretta ad allontanarsi dal tanto amato mondo JavaScript. Microsoft, dal canto suo, migliora notevolmente lo sviluppo di TypeScript grazie al diretto rapporto con Angular e soprattutto punta, grazie al framework, ad una diffusione maggiore. A mio parere questa collaborazione si sta rivelando vincente; vedremo in futuro se rimarrà così salda, io scommetto di si.

    Nel libro parli anche di Ionic 2, che permette di tramutare in app le web application messe in piedi grazie ad Angular. Quali sono i suoi vantaggi, e i suoi limiti?

    Ionic 2 ha già un grosso background in termini di utilizzatori e applicazioni realizzate. È probabilmente il framework più usato nella realizzazione di app ibride. I suoi vantaggi sono molto più rilevanti dei suoi limiti. Il vantaggio più grosso è il legame all’ambiente di sviluppo web: HTML5, CSS3 e JavaScript. La scelta di consentire lo sviluppo di applicazioni ibride tramite il web permette di concentrarsi sull’obiettivo senza dover dedicarsi allo studio di nuovi ambienti di sviluppo. Inoltre aver basato la sua infrastruttura su Angular lo ha reso ancora più potente.

    I limiti di Ionic 2 sono quelli di qualsiasi applicazione ibrida, ma ogni anno la distanza tra ibrido e nativo si accorcia e, grazie al suo supporto delle Progressive Web App, sembra quasi che il futuro sia sempre più legato al mondo del web che ad altro. Lo sviluppo di applicazioni mobile tramite Ionic 2 non deve spaventare o creare dubbi ormai anacronistici sulle applicazioni ibride; ha già dimostrato che non è più il tempo per dubbi sul suo utilizzo.

    Ionic 2


    IONIC 2: LA POTENZA DI TYPESCRIPT PER CREARE APP SEMPRE PIÙ VICINE A QUELLE NATIVE.

    Qual è il progetto che immagini di realizzare con Angular e deve ancora vedere la luce?

    Lavorando come dipendente non posso saperlo a priori, probabilmente sarà una nuova startup. Sono molti i progetti che in questi anni hanno visto la luce e sono stati realizzati tramite Angular. Ho utilizzato Angular in tantissimi contesti differenti: social network, aggregatori, portali ed ecommerce, sempre con successo. Ho già notizia di una nuova startup nel mondo del turismo naturalistico associato al food, chiamata Tripendipity, che ha in Angular e Ionic 2 le tecnologie principali alla base dello sviluppo.

    Rispetto a prima, adesso anche il cliente si esprime con fermezza sulla tecnologia da usare e molti richiedono Angular come specifica principale; vuoi perché Google è sinonimo di garanzia, vuoi perché anche nel mondo dello sviluppo si sta diffondendo la moda della tecnologia del momento, Angular. Non importa se la motivazione sia l’una o l’altra; a me basta che lo scopo ultimo sia realizzare buon software.

    Il frontend delle applicazioni è un terreno complesso su cui confluiscono design, programmazione, interfaccia utente e aspettative di ogni tipo. Perché Angular spicca rispetto alla concorrenza? E che cosa vedi nel futuro del progetto?

    È vero, il fronted è un terreno complesso e proprio per questo Angular ha avuto così successo. Non aiuta semplicemente lo sviluppo del frontend in termini di realizzazione del layout più accattivante, ma impone una logica MVC nell’organizzazione del codice. Questi due aspetti racchiudono in sé forse l’aspetto più interessante agli occhi di uno sviluppatore.

    Sul web c’è sempre stata troppa approssimazione: anni di jQuery hanno fatto sì che venisse scritta una caterva di codice usa e getta senza nessun criterio, né di riutilizzo né di vera efficenza. Le alternative ad Angular ad oggi non inglobano questo concetto, altre si limitano alla view ed altre ancora impongono troppi vincoli; invece reputo Angular esattamente un vero framework e non qualcosa che ci si avvicina.

    Per il futuro vedo una maggiore diffusione. La comunità ha risposto piuttosto bene alla nuova versione rispetto allo scetticismo iniziale dovuto al refactoring. Diciamo che non sempre la community ha scelto di supportare lo strumento migliore in termini di reale efficienza. Purtroppo quello che sopravvive non è sempre lo strumento migliore ma quello maggiormente supportato; nel cado di Angular sembra che entrambi gli aspetti coincidano.

    Sviluppare applicazioni con Angular accompagna chi inizia e contemporaneamente mostra nozioni utili anche per persone già dentro la materia. In pratica è come se lo avessi scritto pensandoti come lettore…

    È assolutamente così. L’occhio di riguardo va sicuramente verso il lettore che conosce la tecnologia, ma mi rivolgo anche a un neofita del web. Ho cercato di trattare tutti gli argomenti legati allo sviluppo in Angular, affinché il lettore non si sentisse smarrito durante la lettura.

    È chiaro, come ho specificato più volte durante la stesura, che un libro tecnico non può consentire da solo al lettore di padroneggiare una tecnologia, soprattuto oggi che la tecnologia attuale consiste sempre in un’armonia di software che lavorano all’unisono.

    Approfondire la lettura tramite Internet è assolutamente propedeutico all’apprendimento del tema trattato. Il lettore più preparato troverà ugualmente soddisfazione nella lettura, poiché potrà confrontarsi con se stesso e approfondire ulteriormente le proprie nozioni.

    Nella stesura ho cercato di essere il meno accademico possibile proprio per questo. Spero che la mia visione di come un libro tecnico debba essere pensato corrisponda il più possibile a quella desiderata dal lettore.

2 days ago

#lavoro #malta 2500 euro netti al mese
1 full stack developer
competenze richieste: OOP PHP MySql REST API Laravel Nginx Javascript jQuery Angularjs ( o altri Js framework) Ionic Cordova

1 ... See more

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
2 weeks ago

Salve a tutti, ho una domanda per chi di voi utilizza visual studio, quando aggiungo un compente alla mia applicazione spesso il file css o html del componente non viene trovato, dalla console del ... See more

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
1 month ago

ciao angolari 🙂
ho un problema con angular 4 dal quale non riesco ad uscire.
tra la mia app ed il mondo esterno c'è un layer intermedio diIdentity and Access Management che si occupa di verificare ... See more

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
1 month ago

Domanda, vorrei creare delle variabili globali per poi salvarle ad ogni chiamata set nel db, ho fatto questo ma non funziona come previsto, vorrei utlizzare i metodi get e set per valorizzare le ... See more

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
1 month ago

grazie per l'iscirzione 😉

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
2 months ago

Ringrazio per avermi aggiunto al gruppo

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
2 months ago

Ciao ragazzi ,
Da node.js ho messo in ascolto un semplice server, e sto richiamando la mia app angular2.
PROBLEMA : quando il
"SendFile" richiama la mia index dell app ... mi apre la pagina ,
Ma ... See more

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
2 months ago
Angular Italia

http://www.angular-italia.it/cosa-angular-4/

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
2 months ago
Angular fa buona guardia - Angular Italia

Un esempio per persone pratiche di programmazione che mostra l’efficacia dell’architettura oggi più usata per realizzare pagine web. Proteggere le rotte è un argomento piuttosto frequente nello ... See more

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
3 months ago

libro finito, l’ho trovato ben fatto, senza fronzoli e dritto al succo. Conoscevo già Angular ma seguire gli esempi mi ha fatto capire meglio parecchie cose.

LIKE
LOVE
HAHA
WOW
SAD
ANGRY
« 1 of 4 »