Introduzione agli eventi di AngularJS

AngularJS può essere descritto come un framework JavaScript utilizzato per stabilire applicazioni a pagina singola (SPA) per dispositivi mobili e sviluppo web. La SPA è una singola pagina in cui molte conoscenze continuano ad essere simili a supporto di alcuni bit di dati che possono essere personalizzati facendo clic su ulteriori categorie / opzioni. L'intera procedura può alleviare il tuo lavoro semplicemente superando i costi, aumentando l'efficienza e caricando la pagina Web più velocemente. In questo argomento, impareremo a conoscere gli eventi di AngularJS.

Usando AngularJS, puoi lavorare con le direttive e utilizzare gli attributi HTML semplicemente vincolando i dati a HTML con le espressioni. AngularJS può essere un'architettura MVC che semplifica la creazione di applicazioni Web sin dall'inizio. AngularJS 1.0 è stato lanciato sul mercato nel 2010 e se ne discutiamo oggi; la versione più recente di AngularJS può essere la 1.7.8 che è stata rilasciata a marzo 2019. AngularJS è inoltre un framework open-source gestito da Google semplicemente utilizzando una vasta comunità di programmatori.

Pre-requisiti

Prima di passare ad AngularJS, devi avere una conoscenza fondamentale di

  • JavaScript
  • HTML
  • CSS

Nozioni di base di AngularJS

Ecco le basi di AngularJS

direttive

Il prefisso ng significa AngularJS. ng- può essere descritto come prefisso riservato alle direttive sui tasti angolari. Per prevenire le collisioni, possono suggerire di non utilizzare mai il prefisso ng esatto nelle direttive in seguito nella versione di Angular. Ng può essere un'abbreviazione di Angular.

Istanze di alcune delle direttive in AngularJS

  • La nuova direttiva ng può essere utilizzata per produrre una nuova applicazione angolare
  • La direttiva ng-update aggiorna le tue fantastiche applicazioni e anche le loro dipendenze
  • La direttiva ng-app può essere utilizzata per inizializzare un'applicazione AngularJS.
  • La direttiva ng-init inizializza le informazioni sull'app.

Anche la direttiva ng-app spiega ad AngularJS quale elemento è un "imprenditore" con l'app AngularJS.

espressioni

  • Le espressioni attraverso AngularJS saranno descritte tra parentesi graffe doppie: espressione.
  • Per scrivere un'espressione all'interno di una direttiva: ng-bind = "espressione".

Per esempio

Produzione:

controllore

  • L'applicazione di AngularJS sarà controllata semplicemente da Controller.
  • Il controller dell'applicazione potrebbe essere descritto con una direttiva ng-controller
  • Un controller è noto come un oggetto JS, costruito con un normale costruttore di oggetti JS.

Spiega gli eventi di AngularJS

Diversi tipi di eventi situati in AngularJS

AngularJS è incredibilmente pieno di eventi e include un modello di base su come aggiungere listener di eventi all'HTML. Facilita numerosi eventi associati al mouse e alla tastiera. La maggior parte di questi eventi verrà inserita in un elemento HTML. Nel caso in cui tu abbia scritto HTML e anche eventi AngularJS contemporaneamente, dopo che entrambi gli eventi possono essere eseguiti, ciò significa che un evento AngularJS non sovrascriverà mai un evento HTML.

Alcuni degli eventi essenziali sono i seguenti.

  • ng-copy
  • ng-click
  • ng-cut
  • ng-DblClick
  • ng-keydown
  • ng-pressione di un tasto
  • ng-keyup
  • ng-mousedown
  • ng-MouseEnter
  • ng-mouseLeave
  • ng-MouseMove
  • ng-mouseover
  • ng-MouseUp
  • ng-sfocatura

Analizzeremo è Comunicare con eventi.

Angular JS include un bus di eventi globale che consente di generare eventi su un ambito e lasciare che altri ambiti ascoltino quell'evento e rispondano ad esso. È possibile passare ulteriori argomenti con l'evento in modo che altri ascoltatori possano rispondere in modo appropriato all'evento. Gli eventi sono abbastanza semplici, ma ci sono alcuni aspetti positivi.

Prima di tutto, ascoltando un evento è sufficiente chiamare il metodo $ on () su un ambito con un parametro del nome dell'evento. Quindi qualsiasi evento con quel nome attiverà il tuo callback. Generare un evento, d'altra parte, richiede un po 'di pianificazione.

Diciamo che ho un evento che viene generato qui, in Child Scope 1, ma vogliamo ascoltare quell'evento in Child Scope 2. Sfortunatamente, non possiamo farlo accadere.

Ci sono due opzioni per organizzare un evento in Angular JS.

Il primo è chiamare scope. $ Broadcast, che genera l'evento sull'ambito di origine e quindi lo invia a tutti gli ambiti figlio.

L'altra opzione è chiamare scope. $ emit, che genera l'evento sull'ambito di origine e quindi lo invia nella catena dell'ambito.

Ma non esiste un modo veramente globale di trasmettere dalla portata di un bambino. Il modo per farlo è quello di ottenere $ rootScope e chiamare $ broadcast su di esso, che lo invia a tutti gli ambiti figlio.

Ora andiamo ad adattare il nostro codice per farlo funzionare con eventi anziché con ambiti ereditati. Quindi il primo problema che abbiamo notato che vogliamo che un evento risolva è il fatto che qui, nel controller del catalogo, questo metodo registerCourse () sta chiamando push direttamente sui dati della pianificazione. Non è il suo lavoro.

L'aggiunta di elementi alla pianificazione non è qualcosa che dovrebbe fare il controller del catalogo. Invece, ciò che dovrebbe fare è notificare a qualcun altro che un corso si sta registrando e quindi fidarsi che altri oggetti aggiungeranno le correzioni del corso al programma. Quindi l'oggetto che dovrebbe avere a che fare con il programma è ovviamente il controller di pianificazione.

Quindi andiamo al controller di pianificazione e aggiungiamo un listener di eventi. Chiameremo il nostro corso dell'evento registrato. Il primo parametro per un callback a un evento è un oggetto evento e successivamente qualsiasi parametro aggiuntivo che si inserisce quando si genera l'evento.

Quindi pianificheremo il fatto che chiunque abbia sollevato l'evento inserirà anche il corso che ha generato l'evento. Quindi da qui, possiamo fare la logica originariamente creata nel metodo registerCourse () proprio qui.

Ora, invece di fare affidamento sul programma per essere già nel $ scope, togliamo il $ scope e portiamo semplicemente il servizio programmato. E poiché stiamo introducendo il programma qui, non è più necessario inserirlo nel nostro controller di registro.

Quindi possiamo prendere questa linea qui, spostarla sul nostro controller di pianificazione e ora togliere quella dipendenza dal controller di registrazione.

Ora è bello che abbiamo ascoltato l'evento qui, ma nessuno sta organizzando l'evento. Il posto qui nel metodo registerCourse () sul controller del catalogo.

Il controller del catalogo non può generare un evento che può essere ascoltato dal controller della pianificazione perché sono fratelli. Quindi quello che dovremo fare è portare una dipendenza da $ rootScope.

Quindi da qui possiamo chiamare $ rootScope. $ Broadcast () genera l'evento che stiamo cercando e aggiunge il parametro che deve essere su quell'evento.

Ora abbiamo un'altra cosa che possiamo ripulire. Proprio qui stiamo chiamando $ scope.notify, ma stiamo già sollevando l'evento in cui abbiamo registrato il corso. Dovremmo consentire a qualcun altro di gestire la notifica ogni volta che viene registrato un corso.

Quindi torniamo al nostro controller di registrazione e aggiungiamo un listener di eventi.

E poi da qui, possiamo chiamare il codice per fare la notifica. Sembra molto più appropriato farlo all'interno del controller di registrazione, dal momento che il luogo in cui definiamo il metodo notify ().

Controlliamo questo output nel browser e vediamo come funziona.

I nostri cambiamenti hanno funzionato alla grande.

Ora diamo un'occhiata al codice e analizziamo i vantaggi e gli svantaggi dell'utilizzo degli eventi. Il primo vantaggio che abbiamo notato è che la logica in ciascuno dei controller ha qualcosa a che fare con quel controller.

Il controllore del catalogo ha una logica per sollevare l'evento quando qualcuno fa clic sul pulsante Registra corso e la logica per contrassegnare un corso registrato. La pianificazione ha la logica di aggiungere gli elementi alla pianificazione e il controller di registrazione ha la logica delle notifiche. Per questo motivo, non disponiamo di controller in servizio che non hanno nulla a che fare con.

Inoltre, il nostro controller di root non è ingombro di dipendenze con cui non ha nulla a che fare. Ci sono alcuni svantaggi però. Chiunque gestisca un evento può annullare quell'evento. Questo può portare a cattivi bug.

Se un determinato gestore annulla un evento e un ascoltatore che deve ancora conoscere l'evento non è stato elaborato. Stiamo associando il nostro controller a tali eventi.

Lo svantaggio degli eventi è che usiamo una stringa per il nome dell'evento ed è difficile prevenire conflitti di nomi di eventi.

L'unica protezione è una buona strategia di denominazione per i nomi degli eventi.

Conclusione - AngularJS Events

  • Elimina lo stato del server
  • Abilita la conoscenza dell'app nativa
  • Inserisce facilmente la logica in JavaScript
  • Richiede informazioni sull'abilità innovative e procedure

Articoli consigliati

Questa è una guida agli eventi di AngularJS. Qui discutiamo le basi di AngularJS e spieghiamo l'evento AngularJS con gli esempi. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -

  1. AngularJS Unit Testing
  2. Architettura di AngularJS
  3. Direttive AngularJS
  4. Carriera in AngularJS
  5. Primi 5 attributi di eventi HTML con esempi
  6. Guida a diversi eventi JavaScript

Categoria:

Sviluppo software