AngularJS
componenti
Ricerca…
Parametri
| Parametro | Dettagli |
|---|---|
| = | Per utilizzare l'associazione dati bidirezionale. Ciò significa che se si aggiorna quella variabile nell'ambito del componente, la modifica si rifletterà sull'ambito principale. |
| < | Associazioni unidirezionali quando vogliamo solo leggere un valore da un ambito genitore e non aggiornarlo. |
| @ | Parametri di stringa. |
| & | Per i callback nel caso in cui il tuo componente abbia bisogno di generare qualcosa per il suo genitore. |
| - | - |
| LifeCycle Hooks | Dettagli (richiede angular.version> = 1.5.3) |
| $ onInit () | Chiamato su ciascun controller dopo che tutti i controller su un elemento sono stati costruiti e hanno inizializzato i loro binding. Questo è un buon posto dove mettere il codice di inizializzazione per il tuo controller. |
| $ onChanges (changesObj) | Chiamato quando vengono aggiornati i binding unidirezionali. Le changesObj è un hash le cui chiavi sono i nomi delle proprietà associate che sono state modificate ei valori sono un oggetto della forma { currentValue, previousValue, isFirstChange() } . |
| $ OnDestroy () | Chiamato su un controller quando il suo ambito di contenimento viene distrutto. Utilizza questo hook per rilasciare risorse esterne, orologi e gestori di eventi. |
| $ postLink () | Chiamato dopo l'elemento di questo controller e i suoi figli sono stati collegati. Questo hook può essere considerato analogo ai ganci ngAfterViewInit e ngAfterContentInit in Angular 2. |
| $ doCheck () | Chiamato ad ogni turno del ciclo di digestione. Offre l'opportunità di rilevare e agire sui cambiamenti. Qualsiasi azione che si desidera eseguire in risposta alle modifiche rilevate deve essere invocata da questo hook; l'implementazione di questo non ha alcun effetto su quando viene chiamato $ onChanges. |
Osservazioni
Component è un tipo speciale di direttiva che utilizza una configurazione più semplice che è adatta per una struttura applicativa basata su componenti. I componenti sono stati introdotti in Angular 1.5, gli esempi in questa sezione non funzioneranno con le versioni precedenti di AngularJS.
Una guida completa per sviluppatori su Componenti è disponibile su https://docs.angularjs.org/guide/component
Componenti di base e ganci LifeCycle
Cos'è un componente?
- Un componente è fondamentalmente una direttiva che utilizza una configurazione più semplice e che è adatta per un'architettura basata su componenti, che è ciò che riguarda Angular 2. Pensa a un componente come a un widget: un pezzo di codice HTML che puoi riutilizzare in diversi punti della tua applicazione web.
Componente
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
markup
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
Utilizzo di dati esterni in Component:
Potremmo aggiungere un parametro per passare un nome al nostro componente, che verrebbe utilizzato come segue:
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
markup
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
Utilizzo dei controller nei componenti
Diamo un'occhiata a come aggiungere un controller ad esso.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
markup
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
I parametri passati al componente sono disponibili nell'ambito del controller appena prima che la funzione $onInit venga chiamata da Angular. Considera questo esempio:
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});
Nel modello dall'alto, ciò renderebbe "Ciao John, sono MacJohn!".
Si noti che $ctrl è il valore predefinito Angolare per controllerAs se non ne viene specificato uno.
Usare "require" come oggetto
In alcuni casi potrebbe essere necessario accedere ai dati da un componente principale all'interno del componente.
Questo può essere ottenuto specificando che il nostro componente richiede quel componente genitore, il fabbisogno ci fornirà il riferimento al controller componente richiesto, che può quindi essere utilizzato nel nostro controller come mostrato nell'esempio seguente:
Si noti che i controller richiesti sono garantiti per essere pronti solo dopo il hook $ onInit.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet
this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}
}
});
Tenete presente, tuttavia, che ciò crea un accoppiamento stretto tra il bambino e il genitore.
Componenti in JS angolare
I componenti in angularJS possono essere visualizzati come una direttiva personalizzata (<html> questo in una direttiva HTML, e qualcosa di simile sarà una direttiva personalizzata <ANYTHING>). Un componente contiene una vista e un controller. Il controller contiene la logica di business che è associata a una vista che l'utente vede. Il componente differisce da una direttiva angolare perché contiene meno configurazione. Una componente angolare può essere definita in questo modo.
angular.module("myApp",[]).component("customer", {})
I componenti sono definiti sui moduli angolari. Contengono due argomenti, Uno è il nome del componente e il secondo è un oggetto che contiene una coppia di valori chiave, che definisce quale vista e quale controller verrà utilizzato in questo modo.
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp" è il nome dell'app che stiamo costruendo e il cliente è il nome del nostro componente. Ora per chiamarlo nel file html principale lo metteremo semplicemente così
<customer></customer>
Ora questa direttiva sarà sostituita dalla vista che hai specificato e dalla logica di business che hai scritto nel tuo controller.
NOTA: Ricorda componente prendere un oggetto come secondo argomento mentre direttiva prendere una funzione di fabbrica come argomento.