Introduzione ad Angular

6 Aprile 2022Coding

Angular 2, noto semplicemente come Angular è un framework front-end ed è il successore di AngularJs. Angular ci aiuta a creare applicazioni dinamiche e Single Page Application (SPA). In questo articolo, ti darò una breve introduzione ad Angular. Questa introduzione fa parte di Angular: la guida definitiva

Index

Cosè Angular

Cosè Angular

Angular è un framework pensato per la creazione di applicazioni Web, mobile e desktop. È stato costruito usando JavaScript. Puoi usarlo per creare incredibili applicazioni lato client usando HTML, CSS e JavaScript.
Angular ha avuto molti miglioramenti rispetto al suo predecessore, AngularJS. Ha molte innovazioni, il che semplifica l’apprendimento e lo sviluppo di applicazioni. È possibile creare applicazioni estendibili, gestibili, testabili e standardizzate utilizzando Angular.

Introduzione ad Angular

Ho creato un ottimo tutorial su Come installare e iniziare con Angular e su Come creare la tua prima applicazione Angular.

Caratteristiche di Angular

Two-Way Data Binding, la caratteristica più interessante di Angular. L’associazione dei dati è automatica e veloce. Le modifiche apportate nel template vengono automaticamente aggiornate nella classe del componente e viceversa
Routing, altra caratteristica importante, un potente motore di routing, carica la pagina in modo asincrono, consentendoci di creare applicazioni single page.
Angular ci permette di usare costrutti di programmazione come le condizioni if/else, loop, ecc. Per renderizzare e controllare le pagine HTML.
Componenti, Angular pensa in componenti, tali componenti permettono di creare, organizzare e riutilizzare al meglio il codice
Community molto attiva. Questo fa molta differenza poiché per risolvere dei casi particolari ti basterà effettuare una semplice ricerca su Google.

Angular è notevolmente cambiato rispetto ad AngularJS. Angular è stato completamente ridisegnato da zero. Ci sono molti concetti di AngularJS che sono cambiati in Angular.

Differenze tra AngularJs ed Angular

Supporto ad ES6

Angular è scritto completamente in Typescript e soddisfa le specifiche ECMAScript 6. Ciò significa che ha il supporto per moduli ES6, framework di classi, ecc.

I componenti sono i nuovi controller

In AngularJS avevamo i controller. I controller Angular vengono sostituiti con i componenti. I controller e la view in AngularJS sono definiti come segue

//View 
<body ng-controller=’appController’>     
    <h1>vm.message<h1> 
</body> 
 
Controller angular.module(‘app’).controller(‘appController’,appcontroller) {     
    message=’AngularJS’; 
}

In Angular, usiamo i componenti. Di seguito, un semplice componente.

import { Component } from '@angular/core'; 
 
@Component({     
    selector: 'app',     
    template: '<h1>{{message}}</h1>' 
}) 
export class AppComponent  {
      message: string = 'Angular'; 
}

In Angular, un componente rappresenta un elemento dell’interfaccia utente. Puoi avere molti di questi componenti su una singola pagina web. Ogni componente è indipendente l’uno dall’altro e gestisce una sezione della pagina. I componenti possono avere componenti figlio e componenti padre.

Direttive

AngularJS aveva molte direttive. Alcune delle direttive più utilizzate sono ng-repeat & ng-if

<ul>     
    <li ng-repeat = dog in vm.dogs> 
        {{dog.name}}     
    </li> 
</ul> 
<div ng-if=”vm.isDOG”>     
<h3>Dog list</h3> 
</div>

Anche Angular ha le direttive, ma con una sintassi diversa. Ha un * prima del nome della direttiva il quale lo definisce come direttiva strutturale

<ul>     
    <li *ngFor = dog of dogs>         
        {{dog.name}}     
    </li> 
</ul> 
<div *ngIf=”vm.isDOG”> 
    <h3>Dog list</h3> 
</div>

Le direttive di stile come ng-style, ng-src e ng-href sono sparite. Queste vengono ora sostituite da elementi HTML dedicati.
La creazione di direttive personalizzate è notevolmente semplificata in Angular, come mostrato nell’esempio seguente.

@Directive({     
   selector: '[MyDirective]' 
}) 
class MyDirective { }

Data Binding

I potenti data binding rimangono gli stessi, con lievi modifiche alla sintassi.

Interpolation

//AngularJS   
<h3> {{vm.cliente.Nome}}</h3>  
 
//Angular 
<h3> {{cliente.Nome}}</h3>

Nota che ho usato l’alias del controller VM per specificare l’istanza del controller in AngularJS. In Angular, il contesto è implicito.

One way Binding

//AngularJS 
<h3> ng-bind=vm.cliente.nome></h3> 
 
//Angular 
<h3 [innerText]=”cliente.nome” ></h3>

Angular può essere associato a qualsiasi proprietà dell’elemento HTML

Event Binding

//AngularJS 
<button ng-click=”vm.salva()”>Salva<button>  
 
//Angular 
<button (click)=”salva()”>Salva<button>

AngularJS utilizza la direttiva ngClick per collegarsi all’evento. In Angular la direttiva ngClick viene rimossa. Puoi associare direttamente gli eventi al DOM.

Two- way binding

//AngularJS 
<input ng-model=”vm.cliente.nome”>  
 
//Angular 
<input [(ng-model)]=”cliente.nome”>