la Creazione di Altamente Riutilizzabili AngularJS Componenti
Preparazione AngularJS app per Angolare
Nessuna domanda, se avete intenzione di costruire una nuova app di oggi si potrebbe iniziare con Angolare costruita su Dattiloscritto (Angolare 2+). Tuttavia, con migliaia di AngularJS (Angolare 1.X) applicazioni ancora in produzione, AngularJS non sta andando da nessuna parte appena ancora. In effetti, AngularJS vede ancora un continuo sviluppo e supporto da parte del team.
**UPDATE**
Angular è attualmente in v6 ed è adatto per applicazioni di produzione di grandi dimensioni. Se stai costruendo una nuova app oggi, guarda Angular 6+.
Dai un’occhiata alla nostra nuova guida per la creazione di componenti altamente riutilizzabili con Angular
Gli sviluppatori potrebbero anche favorire la ricca comunità di sviluppatori e le librerie open source di AngularJS che si oppongono a tuffarsi in nuove e limitate. Ci sono diversi motivi per cui potresti voler creare un’app in AngularJS. Se la migrazione della tua app ng1 a ng2 + è sul radar, considera la componentizzazione della tua app come prerequisito per la migrazione.
Nuove funzionalità dalla 1.5.x sono stati aggiunti retroattivamente, principalmente il supporto di componenti e associazione dati unidirezionale. Vedremo come massimizzare queste funzionalità per creare componenti altamente riutilizzabili per le applicazioni AngularJS che si allineano più vicino al nuovo framework Angular.
Organizzazione dei componenti
È facile perdersi nel componente questo, componente che trambusto. Uno dei pezzi più critici da capire è quale componente dovrebbe essere responsabile di cosa.
Mantieni i componenti a livello di pagina come forza trainante di una vista mentre utilizzi componenti riutilizzabili o “stupidi” per occuparti dell’attività comune.
Ciò mantiene la logica specifica della pagina su un singolo componente incapsulando tutto il codice e le funzionalità di routine in blocchi riutilizzabili.
Uno dei più grandi errori che ho visto è passare i dati ai componenti figli che alterano i dati, assumono un caso d’uso molto specifico o comunicano tramite servizi ovunque. Questo alla fine li rende difficili da capire / testare e non riutilizzabili in quanto diventano codificati in casi d’uso specifici.
Il tuo primo componente “Hello World”
Il componente più semplice possibile sarebbe simile a questo. Si noti quanto siano simili alle direttive.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
Vale la pena notare che le direttive sono ancora disponibili per gli sviluppatori. Ci sono alcune rare circostanze in cui si desidera comunque utilizzare una direttiva modello su un componente. Forse se dipendessi da qualche fase di compilazione o collegamento…. ma le direttive dovrebbero essere usate come attributi per aggiungere altre funzionalità a un componente, ad esempio, forse si voleva aggiungere la sicurezza basata sull’autorizzazione se un componente dovrebbe essere disponibile o meno per un utente.
In caso di dubbio favorire il modello componente. Vuoi costruire la tua app come un albero di componenti. Vedi documenti AngularJS per maggiori informazioni sui componenti rispetto alle direttive. Le direttive dovrebbero essere pensate a componenti senza modelli utilizzati per migliorare i componenti.
Opzioni di associazione
I parametri del componente vengono passati tramite la proprietà bindings. Simile al vecchio modo di assegnare variabili di ambito della direttiva.
angular.module('myApp')
.component('myComponent', {
template:'<h1>$ctrl.name</h1>',
bindings:{
name: '<' //one way data binding
},
controller: function(){
//component controller }})* < - One way data bindingUtilize one-way data binding for your bindings. Two way data bindings were great and one of the neatest feature of AngularJS, but it comes at a performance cost with the bound properties being watched within the component scope. This also means anything you change in component scope would be reflected in the parent in a two-way binding.!Important! - Its important to note that objects are passed by reference instead of a new copy. This means if your bound property is an object or array, changes to these objects would indeed reflect changes in the parent scope and still give you a two way data binding result. This is why its important to not mutate the object/array in the component scope and make those changes in the parent.* = - Two way data bindingNo worries if you need it though. Two way data binding is still around. #yolo* & - Output event. Provides a hook to parent componentsBindings marked with '&' signify a parameter that accepts a callback function from the parent component. This allows the parent to listen or catch any changes/messages. This is how our "dumb" component will talk back to the parent component with the change or event.* @ - String input
Comunicazione dei componenti
Supponiamo di creare un’app messenger. La vista principale è un componente a livello di pagina con un componente elenco contatti riutilizzabile. Vogliamo utilizzare il componente elenco contatti in altre aree della nostra applicazione, quindi è importante renderlo il più riutilizzabile possibile.
Il componente elenco contatti ha un unico scopo. Per rendere l’elenco dei contatti disponibili dal server e visualizzare le selezioni effettuate.
Il componente messenger deve accettare le selezioni effettuate dal componente elenco contatti e aggiungerle all’elenco destinatari.
