AngularJS
Components
Zoeken…
parameters
| Parameter | Details |
|---|---|
| = | Voor het gebruik van tweerichtingsbinding. Dit betekent dat als u die variabele in uw componentbereik bijwerkt, de wijziging wordt weerspiegeld in het bovenliggende bereik. |
| < | Eenrichtingsbindingen wanneer we alleen een waarde uit een bovenliggend bereik willen lezen en deze niet willen bijwerken. |
| @ | Stringparameters. |
| & | Voor callbacks in het geval dat uw component iets naar zijn bovenliggende scope moet uitvoeren. |
| - | - |
| LifeCycle Hooks | Details (vereist angular.version> = 1.5.3) |
| $ onInit () | Oproep aan elke controller nadat alle controllers op een element zijn geconstrueerd en hun bindingen zijn geïnitialiseerd. Dit is een goede plek om initialisatiecode voor uw controller te plaatsen. |
| $ onChanges (changesObj) | Wordt aangeroepen wanneer eenrichtingsbindingen worden bijgewerkt. De changesObj is een hash waarvan de sleutels de namen zijn van de gebonden eigenschappen die zijn gewijzigd, en de waarden zijn een object van de vorm { currentValue, previousValue, isFirstChange() } . |
| $ onDestroy () | Een beroep gedaan op een controller wanneer het bereik ervan is vernietigd. Gebruik deze haak voor het vrijgeven van externe bronnen, horloges en event-handlers. |
| $ postLink () | Genoemd naar het element van deze controller en zijn kinderen. Deze haak kan worden beschouwd als analoog aan de haken ngAfterViewInit en ngAfterContentInit in hoek 2. |
| $ doCheck () | Opgeroepen bij elke draai van de digest-cyclus. Biedt een mogelijkheid om wijzigingen te detecteren en erop te reageren. Alle acties die u wilt ondernemen als reactie op de veranderingen die u detecteert, moeten vanaf deze hook worden opgeroepen; de implementatie hiervan heeft geen effect op wanneer $ onChanges wordt aangeroepen. |
Opmerkingen
Component is een speciaal soort richtlijn die een eenvoudigere configuratie gebruikt die geschikt is voor een componentgebaseerde applicatiestructuur. Componenten zijn geïntroduceerd in Angular 1.5, de voorbeelden in deze sectie werken niet met oudere AngularJS-versies.
Een complete handleiding voor ontwikkelaars over componenten is beschikbaar op https://docs.angularjs.org/guide/component
Basiscomponenten en LifeCycle Hooks
Wat is een component?
- Een component is eigenlijk een richtlijn die een eenvoudigere configuratie gebruikt en die geschikt is voor een component-gebaseerde architectuur, dat is waar Angular 2 voor staat. Beschouw een component als een widget: een stuk HTML-code dat u op verschillende plaatsen in uw webtoepassing opnieuw kunt gebruiken.
bestanddeel
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
markup
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
Externe gegevens gebruiken in component:
We kunnen een parameter toevoegen om een naam door te geven aan onze component, die als volgt zou worden gebruikt:
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>
Controllers gebruiken in componenten
Laten we eens kijken hoe we er een controller aan kunnen toevoegen.
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>
Parameters die worden doorgegeven aan de component zijn beschikbaar in het bereik van de controller net voordat de functie $onInit door Angular wordt aangeroepen. Beschouw dit voorbeeld:
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;
}
}
});
In de bovenstaande sjabloon zou dit weergeven: "Hallo John, ik ben MacJohn!".
Merk op dat $ctrl de standaardwaarde Angular is voor controllerAs als er geen is opgegeven.
Het gebruik van "vereisen" als een object
In sommige gevallen moet u mogelijk toegang krijgen tot gegevens van een bovenliggend onderdeel in uw onderdeel.
Dit kan worden bereikt door op te geven dat onze component die bovenliggende component vereist, de vereiste geeft ons een verwijzing naar de vereiste componentcontroller, die vervolgens in onze controller kan worden gebruikt, zoals weergegeven in het onderstaande voorbeeld:
Merk op dat de vereiste controllers gegarandeerd alleen klaar zijn na de $ onInit hook.
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();
}
}
});
Houd er echter rekening mee dat hierdoor een nauwe koppeling tussen het kind en de ouder ontstaat.
Componenten in hoekige JS
De componenten in angularJS kunnen worden gevisualiseerd als een aangepaste richtlijn (<html> dit in een HTML-richtlijn, en zoiets wordt een aangepaste richtlijn <ALLES>). Een component bevat een weergave en een controller. Controller bevat de bedrijfslogica die is verbonden met een weergave die de gebruiker ziet. De component verschilt van een hoekrichtlijn omdat deze minder configuratie bevat. Een hoekcomponent kan zo worden gedefinieerd.
angular.module("myApp",[]).component("customer", {})
Componenten worden gedefinieerd op de hoekmodules. Ze bevatten twee argumenten, de eerste is de naam van de component en de tweede is een object dat een sleutel / waarde-paar bevat, dat bepaalt welke weergave en welke controller deze zo gaat gebruiken.
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp" is de naam van de app die we bouwen en klant is de naam van onze component. Nu, om het in het hoofd html-bestand aan te roepen, zullen we het gewoon zo zetten
<customer></customer>
Nu wordt deze richtlijn vervangen door de weergave die u hebt opgegeven en de bedrijfslogica die u in uw controller hebt geschreven.
OPMERKING: Vergeet niet dat component een object als tweede argument neemt, terwijl instructie een fabrieksfunctie als argument neemt.