creareapp typescript e angularStringhe e Template in TypeScript

Scopriamo i vantaggi offerti con la nuova notazione per l'inserimento di stringhe costituite da più righe, all'interno di variabili.

Ultimo aggiornamento: 3 giorni fa

Uno dei grossi problemi per chi progetta l'interfaccia utente di app ibride o web app, è rappresentata dal mescolare elementi del dom, quindi tag html, con elementi variabili legati a valori elaborati con JavaScript.

Un tipico esempio potrebbe essere quello qui sotto, in cui valorizzo una variabile JavaScript con del codice html rappresentativo della vista che l'utente dovrà visualizzare:

let articolo = "<div><h1>Titolo dell'articolo</h1>" +
"<p>Corpo dell'articolo: riga 1</p>" +
"<p>Corpo dell'articolo: riga 2</p>" +
"<a href=''>Continua</a></div>";

La nuova versione ECMAScript 6 di JavaScript, ha introdotto la possibilità di gestire queste sequenze di stringhe, che richiedono più righe, in modo molto più efficiente, sfruttando il carattere "accento grave" indicato dal simbolo grafico `, che in inglese viene chiamato "backticks".

let articolo = `
<div>
  <h1>Titolo dell'articolo</h1>
  <p>Corpo dell'articolo: riga 1</p>
  <p>Corpo dell'articolo: riga 2</p>
  <a href=''>Continua</a>
</div>  
`;

Questo carattere non è presente nella tastiera italiana, quindi è necessario usare la combinazioni di tasti ALT più contemporaneamente, il numero del tastierino 96, per inserirlo (ALT+96). Il vantaggio è evidente in quanto si ha una maggior leggibilità, maggior facilità di inserimento in quanto non si ha più interferenza con doppie virgolette del codice HTML e minor probabilità d' inserire errori.

Questa tecnica viene usata in Angular per creare quelli che vengono chiamati i template, ossia sezioni html della pagina di un'applicazione, in cui si dovranno iniettare dei valori dinamici, provenienti dal corpo della classe del componente associato. Qui sotto è possibile vedere un tipico esempio, in cui sfrutto la notazione delle doppie parentesi graffe, per inserire del codice HTML statico e un pezzo dinamico con un segnaposto, che verrà "occupato" dal valore elaborato all'interno della classe associata.

let articolo = `
<div>
  <h1>{{tit...

Per continuare la lettura, registrati gratuitamente alla "CreareApp StartUniversity" oppure effettua il login.

Novità

Non farti scappare il nuovo libro: "Angular 100% Operativo", in offerta su Amazon. Più di 200 pagine, con tutto il percorso per creare una WebAPP e imparare Angular in un quarto del tempo. Prenotalo cliccando l'immagine qui sotto:

Corso Angular 4 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria:

Voto 3.7/5 basato su 80 Recensioni
© 2013-2017 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.