Che cos'è AngularJS?

AngularJS è uno dei framework Web basati su JavaScript più popolari utilizzati nello sviluppo del front-end. Viene utilizzato nello sviluppo di applicazioni a pagina singola (SPA). AngularJS è un framework open source gestito principalmente da Google e da una comunità di persone coinvolte nella risoluzione di problemi affrontati nello sviluppo di applicazioni a pagina singola. In questo argomento, impareremo le Direttive AngularJS.

AngularJS non è altro che estende l'HTML esistente; Viene aggiunto nella pagina HTML con tag. AngularJS rende il sito HTML più reattivo alle azioni dell'utente aggiungendo facilmente ulteriori attributi. L'ultima versione stabile di AngularJS è 1.6.x al momento.

Direttive di AngularJS

AngularJS è un framework efficiente che supporta l'architettura basata su Model-View-Controller (MVC). Fornisce funzionalità di base come l'associazione dati bidirezionale, il controller, i servizi, le direttive, i modelli, il router, i filtri, l'iniezione delle dipendenze, ecc. Queste sono tutte le funzionalità principali che collaborano per rendere efficiente AngularJS.

La direttiva è una delle funzionalità molto utili in AngularJS. Estende l'HTML esistente e consente di sviluppare facilmente pagine Web con nuovi comportamenti utilizzando JavaScript di base. Permette di scrivere i nostri tag personalizzati e mapparli in HTML esistente. Questa funzionalità offre più libertà e consente agli sviluppatori una grande flessibilità nella creazione e nell'utilizzo di elementi personalizzati nelle applicazioni Web di conseguenza. Inoltre, possono progettare anche le proprie direttive. In questo articolo, ci concentreremo principalmente sulle Direttive AngularJS e cercheremo di acquisire conoscenza di questa caratteristica fondamentale.

Le direttive non sono altro che marcatori su elementi DOM in HTML come nome dell'attributo, nome dell'elemento, classe CSS o commento. Il compilatore di AngularJS quindi attacca il comportamento specificato a quell'elemento. Ogni direttiva ha un nome e inizia con 'ng-'. Ogni direttiva può decidere dove può essere utilizzata negli elementi DOM. Esistono alcune direttive già disponibili in AngularJS e allo stesso modo, possiamo definire da sole.

Daremo un'occhiata alle tre principali direttive integrate che dividono il framework AngularJS in tre parti principali.

1. ng-app: questa direttiva dice al compilatore che questa è l'applicazione AngularJS. La direttiva in cui è definita in DOM diventa l'elemento radice dell'applicazione. Per esempio



AngularJS è disponibile come file JavaScript e viene aggiunto in HTML tramite tag. La ng-app at element dice ad AngularJS che div è l'elemento root e proprietario dell'applicazione AngularJS. L'applicazione AngularJS parte da quell'elemento e qualunque sia il codice AngularJS, è scritto al suo interno.

2. ng-model: questa direttiva lega il valore dalla pagina Web, principalmente dal campo di input alla variabile dell'applicazione. Fondamentalmente, questa direttiva consente l'invio di dati dall'input all'applicazione AngularJS che può essere utilizzata altrove. Per esempio

Accedere:

La direttiva ng-model lega il valore di input alla variabile dell'applicazione denominata "input". Vedremo quindi come possiamo visualizzare lo stesso valore sulla pagina Web nel prossimo esempio.

3. ng-bind: questa direttiva lega il valore dall'applicazione AngularJS alla pagina web. cioè Consente l'inoltro di dati dall'applicazione ai tag HTML. Per esempio

Accedere:

I dati che abbiamo acquisito utilizzando la direttiva "ng-model" nella variabile di applicazione "input" sono associati all'elemento tag

usando "ng-bind". Ora possiamo eseguire questa applicazione e vedere come AngularJS dinamicamente aggiorna il valore inserito nella pagina.

Insieme a questi, ci sono alcune altre direttive disponibili in AngularJS che sono importanti.

4. ng-repeat: questa direttiva ripete un elemento HTML e viene utilizzata su una matrice di oggetti. Questa direttiva è molto utile in scenari come la visualizzazione di elementi di tabella in una pagina Web.

5. ng-init: questa direttiva viene utilizzata per inizializzare i valori per l'applicazione AngularJS prima che carichi una pagina Web.

Creazione di nuove direttive

possiamo creare le nostre direttive personalizzate insieme alle direttive AngularJS disponibili esistenti. È molto semplice creare nuove direttive utilizzando solo JavaScript. Le nuove direttive vengono create usando “. direttiva ". Per esempio



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

Angular.module è una funzione di AngularJS che crea un modulo. Abbiamo creato una direttiva personalizzata denominata direttiva personalizzata per cui è stata scritta la funzione. Ogni volta che utilizziamo questa direttiva sulla nostra pagina Web, questa funzione verrà eseguita. In questo caso, è un modello di ritorno che contiene codice HTML.

Mentre si dirige la direttiva sui nomi, dobbiamo usare la convenzione di denominazione dei casi di cammello e mentre la invochiamo, dobbiamo usare la convenzione di denominazione separata "-".

Esistono quattro modi in cui possiamo invocare le direttive,

Nome dell'elemento

Come usato nell'ultimo esempio:

Attributo

Classe

Per invocare la direttiva utilizzando il nome della classe, è necessario aggiungere la proprietà restrittiva con valore 'C' durante la definizione.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

Commento

Per invocare la direttiva utilizzando il commento, è necessario aggiungere la proprietà di limitazione con il valore 'M' durante la definizione.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

La proprietà di sostituzione: true è obbligatoria e sostituirà il commento originale con direttiva altrimenti il ​​commento sarebbe invisibile.

Conclusione - Direttive AngularJS

Pertanto, la direttiva è una funzionalità molto potente disponibile in AngularJS. La direttiva consente di introdurre una nuova sintassi, sono come marcatori e ci consente di associare ad essi un comportamento speciale. In AngularJS esistono direttive disponibili che sono molto utili, inoltre possiamo definire le nostre direttive personalizzate e usarle. Le direttive personalizzate consentono agli sviluppatori una grande flessibilità e libertà. Le direttive aggiungono nuove funzionalità all'HTML esistente con stile e caratteristiche innovative.

Articoli consigliati

Questa è una guida alle direttive AngularJS. Qui discutiamo le tre principali direttive integrate che dividono il framework AngularJS in tre parti principali. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -

  1. Versioni di HTML
  2. Strutture in Java
  3. Architettura di AngularJS
  4. Stili di elenco HTML

Categoria:

Sviluppo software