het Maken van Zeer Herbruikbare Onderdelen AngularJS
het Voorbereiden van uw AngularJS app voor de Hoekige
Geen vraag als je gaat om het bouwen van een nieuwe app die vandaag de dag kunt u beginnen met Hoekig gebouwd op de Schrijfmachine (Hoek 2+). Echter, met duizenden AngularJS (hoekige 1.X) apps nog steeds in productie, AngularJS gaat nergens gewoon nog. In feite, AngularJS ziet nog steeds voortdurende ontwikkeling en ondersteuning van het team.
**UPDATE**
Angular is momenteel op v6 en is zeer geschikt voor grote productie-apps. Als u het bouwen van een nieuwe app vandaag, kijk dan op Angular 6+.
Bekijk onze nieuwe Gids Voor het maken van zeer herbruikbare componenten met hoekige
ontwikkelaars zouden ook de rijke ontwikkelaarsgemeenschap en open source bibliotheken rond AngularJS kunnen bevoordelen, in tegenstelling tot het duiken in nieuwe en beperkte. Er zijn verschillende redenen waarom u een app in AngularJS wilt maken. Als het migreren van uw ng1-app naar ng2+ op de radar staat, overweeg dan om uw app te componeren als voorwaarde voor uw migratie.
nieuwe functies sinds 1.5.x zijn met terugwerkende kracht toegevoegd, voornamelijk de ondersteuning van componenten en one-way data binding. We zullen kijken hoe u deze functies te maximaliseren om zeer herbruikbare componenten voor uw AngularJS applicaties die dichter bij de nieuwe hoek kader te creëren.
Component Organization
het is gemakkelijk om verloren te gaan in de component dit, component dat hoopla. Een van de meest kritische stukken om te begrijpen is welke component verantwoordelijk moet zijn voor wat.
houd paginaniveau-componenten als de drijvende kracht achter een beeld terwijl herbruikbare of “domme” componenten worden gebruikt om gemeenschappelijke taken uit te voeren.
dit houdt paginaspecifieke logica in één component terwijl alle routinematige code en functionaliteit worden ingekapseld in herbruikbare brokken.
een van de grootste fouten die ik heb gezien is het doorgeven van gegevens aan kinderen componenten die de gegevens veranderen, aannemen een zeer specifieke use case, of communiceren via diensten over de plaats. Dit maakt ze uiteindelijk moeilijk te begrijpen / testen en niet herbruikbaar helemaal als ze worden moeilijk gecodeerd om specifieke use-cases.
uw eerste” Hello World ” Component
het eenvoudigst mogelijke component zou er ongeveer zo uitzien. Merk op hoe vergelijkbaar Deze richtlijnen zijn.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
het is vermeldenswaard dat richtlijnen zijn nog steeds beschikbaar voor ontwikkelaars. Er zijn enkele zeldzame omstandigheden waarin u nog steeds een template directive over een component wilt gebruiken. Eventueel als je afhankelijk van een aantal compileren of link fase waren…. maar richtlijnen moeten worden gebruikt als attributen om andere functionaliteit toe te voegen aan een component … bijvoorbeeld, misschien wilde je toestemming gebaseerde beveiliging toevoegen als een component beschikbaar zou moeten zijn of niet voor een gebruiker.
bij twijfel voorkeur voor het componentmodel. U wilt uw app te bouwen als een boom van componenten. Zie AngularJS docs voor meer informatie over componenten vs richtlijnen. Er moeten richtlijnen worden overwogen voor componenten zonder sjablonen die worden gebruikt om componenten te verbeteren.
Bindingsopties
Componentparameters worden doorgegeven via de eigenschap bindings. Vergelijkbaar met de oude manier om variabelen voor het toepassingsgebied van de richtlijn toe te wijzen.
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
Component Communication
stel dat we een messenger-app maken. De hoofdweergave is een paginaniveau component met een herbruikbare contactenlijst component. We willen de component contactenlijst in andere toepassingsgebieden gebruiken, dus het is belangrijk om dit zo herbruikbaar mogelijk te maken.
de component contactenlijst heeft één doel. Om de lijst met beschikbare contacten van de server weer te geven en de gemaakte selecties uit te voeren.
de messenger component moet selecties accepteren die gemaakt zijn van de contactenlijst component en deze toevoegen aan de geadresseerden lijst.
