skapa mycket återanvändbara AngularJS-komponenter
förbereda din AngularJS app för Angular
ingen fråga om du ska bygga en ny app idag kan du börja med Angular byggd på Typescript (Angular 2+). Men med tusentals AngularJS (vinkel 1.X) appar som fortfarande är i produktion, AngularJS går inte någonstans ännu. Faktum är att AngularJS fortfarande ser fortsatt utveckling och stöd från laget.
* * uppdatering * *
Angular är för närvarande på v6 och är väl lämpad för stora produktionsappar. Om du bygger en ny app idag, se till Angular 6+.
kolla in vår nya guide för att skapa mycket återanvändbara komponenter med Angular
utvecklare kan också gynna den rika utvecklargemenskapen och Open source-biblioteken runt AngularJS som motsätter sig att dyka in i nya och begränsade. Det finns flera anledningar till varför du kanske vill skapa en app i AngularJS. Om migrering av din NG1-app till ng2+ är på radaren, överväg att komponera din app som en förutsättning för din migrering.
nya funktioner Sedan 1.5.x har retroaktivt lagts till, främst stöd för komponenter och enkelriktad databindning. Vi kommer att se ut hur du maximerar dessa funktioner för att skapa mycket återanvändbara komponenter för dina AngularJS-applikationer som ligger närmare det nya Angular framework.
Komponentorganisation
det är lätt att gå vilse i komponenten här, komponent som hoopla. En av de mest kritiska delarna att förstå är vilken komponent som ska vara ansvarig för vad.
Håll sidnivåkomponenter som drivkraft bakom en vy medan du använder återanvändbara eller” dumma ” komponenter för att ta hand om gemensam uppgift.
detta håller sidan specifik logik till en enda komponent samtidigt inkapsla alla rutin kod och funktionalitet i återanvändbara bitar.
ett av de största misstagen jag har sett är att överföra data till barnkomponenter som ändrar data, antar ett mycket specifikt användningsfall eller kommunicerar via tjänster överallt. Detta gör dem så småningom svåra att förstå/testa och inte återanvändbara alls eftersom de blir hårdkodade för specifika användningsfall.
din första “Hello World” – komponent
den enklaste möjliga komponenten skulle se ut så här. Lägg märke till hur liknande direktiv dessa är.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
det är värt att notera att direktiv fortfarande är tillgängliga för utvecklare. Det finns några sällsynta omständigheter där du fortfarande vill använda ett malldirektiv över en komponent. Eventuellt om du var beroende av någon kompilerings-eller länkfas…. men direktiv bör användas som attribut för att lägga till annan funktionalitet till en komponent … till exempel kanske du ville lägga till behörighetsbaserad säkerhet om en komponent skulle vara tillgänglig eller inte för en användare.
när du är osäker gynnar komponentmodellen. Du vill bygga din app som ett träd av komponenter. Se AngularJS docs för mer information om komponenter vs direktiv. Direktiv bör ses på komponenter utan mallar som används för att förbättra komponenter.
bindningsalternativ
Komponentparametrar skickas via egenskapen bindings. Liknande det gamla sättet att tilldela direktivets tillämpningsvariabler.
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
komponentkommunikation
Antag att vi gör en messenger-app. Huvudvyn är en sidnivåkomponent med en återanvändbar kontaktlistkomponent. Vi vill använda kontaktlistkomponenten i andra delar av vår applikation, så det är viktigt att göra detta så återanvändbart som möjligt.
kontaktlistkomponenten har ett enda syfte. För att göra listan över tillgängliga kontakter från servern och mata ut de val som gjorts.
messenger-komponenten ska acceptera val som gjorts från kontaktlistkomponenten och lägga till dem i mottagarlistan.
