angularjs directive with our first angularjs example
Direttiva AngularJS con primo esempio AngularJS:
Noi avevamo un breve introduzione ad AngularJS nel nostro precedente tutorial. Questo tutorial ti spiegherà i fatti importanti che devi sapere su AngularJS.
AngularJS è un framework per applicazioni web open source basato su JavaScript.
È gestito da Google Corporation e da una grande comunità. AngularJS è una risposta ai vari inconvenienti che si incontrano per formulare applicazioni a pagina singola.
Leggi il nostro Tutta la serie AngularJS per una conoscenza approfondita del concetto AngularJS.
cos'è il test alfa nel test del software
Il framework dell'applicazione AngularJS funge da modello e può ridurre le sfide che devono essere affrontate durante lo sviluppo di app web.
Cosa imparerai:
- Panoramica di AngularJS
- Perché usare AngularJS?
- Come utilizzare AngularJS?
- Direttive AngularJS
- Esempio di AngularJS
- Conclusione
- Lettura consigliata
Panoramica di AngularJS
AngularJS è stato rilasciato da Google il 20thOttobre 2010 e oggi è diventato un framework significativo per varie applicazioni di interfaccia a pagina singola.
Questo è il motivo per cui AngularJS ha tenuto la sua posizione nonostante lo sviluppo tecnologico a un ritmo vertiginoso. Il sistema basato su un'interfaccia multipiattaforma lo rende anche più efficiente.
AngularJS completa e avvantaggia Apache Cordova, un framework utilizzato per le app mobili multipiattaforma. Ha una visione di migliorare l'esperienza e semplificare il test e lo sviluppo di app web e fornisce un solido framework per lo sviluppo di applicazioni AngularJS.
Perché usare AngularJS?
Di seguito sono elencate le varie caratteristiche e ragioni per le quali AngularJS dovrebbe essere utilizzato nello sviluppo di applicazioni web.
- Associazione dati: La piattaforma fornisce la sincronizzazione automatica dei dati tra il modello e la visualizzazione dei contenuti e, di conseguenza, consente di risparmiare tempo e fatica in larga misura.
- Controller: Si tratta di JavaScript associato a un determinato ambito.
- Servizi: AngularJS ha molti servizi integrati. Per esempio $ https
- Filtri: Questo aiuta a selezionare un sottoinsieme di elementi da un array e lo restituisce a un nuovo array.
- Direttive: Sono marcatori su elementi DOM come attributi, elementi CSS, ecc. Questi possono essere usati come tag personalizzati di HTML.
- Routing: Aiuta nella creazione di applicazioni a pagina singola. È specificato nell'URL dopo il segno # e consente di creare URL diversi per contenuti diversi nell'applicazione.
- MVC: Sta per Model, View e Controller. È un modello di progettazione e viene utilizzato per la divisione di un'app in parti diverse, ad esempio, Modello, Vista e Controller.
- Collegamento profondo: Questa funzionalità del framework dell'app ti aiuta a codificare lo stato dell'applicazione nell'URL per il bookmarking. Successivamente, l'app può anche essere ripristinata dall'URL nello stesso stato.
- Iniezione di dipendenza: AngularJS ha anche un sottosistema di inserimento delle dipendenze integrato che può essere utile per lo sviluppatore per rendere il processo di sviluppo e test più facile, coerente e diretto.
- Scopo: Questi sono gli oggetti che fungono da collante tra il controller e la vista.
Come utilizzare AngularJS?
Personalmente, credo che non esista un framework per lo sviluppo di applicazioni web front-end migliore oggi disponibile sul mercato di AngularJS.
I tutorial su come utilizzare AngularJS non sono frustranti e complessi e in effetti li ho trovati anche abbastanza facili da seguire. Puoi trarre vantaggio da un sistema di binding a due vie, strutture per la creazione di modelli, modularizzazione, sistema di inserimento delle dipendenze, funzione di gestione AJAX e anche altre funzionalità di questo framework.
Prima di iniziare la codifica, dovresti conoscere il concetto MVC (Model, View e Controller), lo script 'Hello World' e le varie funzionalità di AngularJS.
Direttive AngularJS
AngularJS ti fornisce un gran numero di file direttive che consentono di associare i vari elementi HTML ai dati dell'applicazione. Sono gli attributi di base che iniziano con la parola chiave ng- .
La direttiva più importante che devi includere in qualsiasi pagina durante l'utilizzo di AngularJS è fornita di seguito.
ng-app -
È il punto di partenza dell'applicazione AngularJS e deve essere aggiunto a qualsiasi elemento che avvolge la parte restante della pagina, come l'elemento della parte del corpo. AngularJS cerca questo aspetto ogni volta che la pagina viene caricata e tende a valutare automaticamente tutte le varie direttive nel codice.
Le direttive di AngularJS includono:
# 1) ng-app :Viene utilizzato per avviare l'applicazione AngularJS. Quando viene caricata la pagina web contenente l'applicazione AngularJS, avvia automaticamente l'applicazione definendo l'elemento radice. Nel codice HTML deve essere utilizzata solo una direttiva ng-app.
Tuttavia, se nel codice HTML viene trovata più di una direttiva ng-app, verrà utilizzata la prima comparsa.
Sintassi:
{body of the HTML code}
# 2) di calore :Viene utilizzato per inizializzare l'applicazione.
Fornisce una serie di valori che devono essere associati alle variabili per scopi di inizializzazione. Questa direttiva non viene spesso utilizzata poiché l'inizializzazione delle variabili avviene solitamente tramite funzioni specifiche all'interno del progetto.
Sintassi:
# 3) ng-controller: Viene utilizzato quando l'inizializzazione delle variabili deve essere eseguita sulla base di una funzione; cioè, ciascuna delle variabili deve essere inizializzata in base alla logica della funzione. AngularJS invoca la funzione specificata nella direttiva ng-controller con un oggetto.
Sintassi:
app.controller(‘name of your function’,function($object){ Body of the controller/function});
# 4) ng-model :Viene utilizzato per legare i valori di AngularJS ai controlli forniti dall'applicazione. Nello specifico, i dati recuperati dall'input tramite il controller e il modello saranno vincolati alla visualizzazione (rispetto al modello MVC) che verrà presentata all'utente.
Sintassi:
Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));
ng-show e ng-hide: Questi comandi nascondono e mostrano gli elementi, ciò si ottiene impostando lo stile di visualizzazione CSS.
AngularJS ti consente anche di definire direttive personalizzate. Sono usati per estendere la funzionalità dell'HTML e sono definiti usando la funzione 'direttiva'. Sostituiscono semplicemente l'elemento per cui sono attivati.
Il Cheat Sheet di AngularJS è stato un salvavita per me. Ci sono una serie di altre linee guida che puoi controllare nel Cheat Sheet. Puoi persino imparare come creare direttive personalizzate tramite l'uso di AngularJS. Ho trovato tutte le istruzioni e le direttive della piattaforma AngularJS sul Cheat Sheet per semplificare molti problemi.
Esempio di AngularJS
Un semplice esempio AngularJS può essere scritto come segue:
Devi creare un file HTML, Per esempio , angularjsexample.html come mostrato di seguito.
Welcome {{helloTo.title}} to the world of Tutorialspoint!
angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });
Nell'esempio sopra, lo script rappresenta AngularJS JavaScript.
Saresti sorpreso di sapere quante app che usi quotidianamente sono state sviluppate sulla piattaforma AngularJS.
Ecco alcuni nomi:
- Il guardiano
- PayPal
- jetBlue
- Lego
- Upwork
- Netflix
- Libero professionista
- iStock
È evidente dai nomi sopra come l'altezza che puoi raggiungere imparando a utilizzare questo quadro. Questi siti sono al top del loro gioco e una parte enorme del loro successo va sicuramente all'efficienza dei siti solo perché sono stati sviluppati su AngularJS.
Conclusione
Se stai cercando di creare e sviluppare app a pagina singola per dispositivi mobili o persino siti Web, come ero una volta, non cercare oltre.
AngularJS è uno sportello unico per te, poiché questo sito aiuta e rende lo sviluppo di applicazioni molto più comodo e coerente. Non è ottimo solo per i principianti, ma man mano che lo approfondisci, tenderai ad imparare con l'esperienza ea sviluppare ottime app.
Nel frattempo, nel caso in cui esegui l'upgrade a versioni più recenti, non è necessario fare molti sforzi. Solo imparando alcuni nuovi comandi e comprendendo nuove modifiche, puoi iniziare a sviluppare applicazioni anche nelle nuove versioni.
Guarda il nostro prossimo tutorial per saperne di più sullo sviluppo di applicazioni web a pagina singola utilizzando AngularJS.
Tutorial PREV | PROSSIMO Tutorial
Lettura consigliata
- Crea un'applicazione a pagina singola utilizzando AngularJS (tutorial con esempio)
- Tutorial AngularJS per principianti assoluti (con guida all'installazione)
- Differenza tra le versioni angolari: Angular Vs AngularJS
- Tutorial approfonditi su Eclipse per principianti
- 48 principali domande e risposte per l'intervista di AngularJS (2021 LIST)
- Strumento di test del goniometro per test end-to-end di applicazioni AngularJS
- Tutorial AWS Elastic Beanstalk per la distribuzione di applicazioni Web .NET
- Come testare la coda di messaggistica dell'applicazione: IBM WebSphere MQ Intro Tutorial