En introduktion till AngularJS

När jag kom över AngularJS för några veckor sedan blev jag fascinerad först. När jag hade arbetat igenom uppsatshandböckerna som var tillgängliga på AngularJS-webbplatsen var jag glad över att ha hittat denna ram.

Vad är AngularJS? AngularJS är det (relativt) nya barnet på kodningsblocket. Att citera från deras hemsida är "en strukturell ram för dynamiska webbapps" som är särskilt lämpad för att bygga webbsidor på en sida, men det är visserligen inte begränsat till det.

Utvecklat 2009 av Miško Hevery och Adam Abrons - båda Google-anställda vid den tiden - det är helt JavaScript och helt klientsida, så som helst JavaScript kan springa, kan AngularJS springa. Det är också litet: komprimerat och minimerat är det mindre än 29 kb. Och det är öppen källkod under MIT-licensen. Du kan även använda logotypen, tillgänglig under Creative Commons Attribution-ShareAlike 3.0 Unported-licens.

Enligt Wikipedia är målet med Angular att förstärka webbläsarbaserade applikationer med MVC-kapacitet (MVC), och det gör det bara, vilket ger en bindande / MVC-ram. Det är tvåvägsbindande, tänka på dig. Utsökt. Med en struktur som är enkel som {{min data}}, binder du data till din sida. Tjänsten $ scope upptäcker förändringar i modellen och ändrar HTML-uttryck i vyn genom kontroller. Arbeta i andra riktningen återspeglas ändringar i vyn i modellen. Detta undanröjer behovet av den stora delen av datasentriska DOM-manipuleringar, många av oss, inklusive mig själv, tar för givet när de arbetar med ett bibliotek som jQuery.

Vinkelkörningar sträcker sig direkt ur lådan utan biblioteksberoende, även om det kan utökas med de många modulerna som finns tillgängliga, och självklart kan du bygga dina egna för att passa dina specifika behov. Att vara ren JavaScript har också fördelen att vara server-agnostic.

Att vara van vid ett kraftfullt bibliotek som jQuery, det är lätt att vilja blanda det med att göra saker Angular kan redan göra. I erkännandet av detta potentiella fallgropar har utvecklarna följande att säga: "Om du kämpar för att bryta vanan, överväg att ta bort jQuery från din app. Verkligen. Angular har $ http-tjänsten och kraftfulla direktiv som gör det nästan alltid onödigt. "En sak är säkert, om du håller fast vid Angular, kommer jQuery-looparna och explicit fram och tillbaka med servern att vara frånvarande från din kod, eftersom Vinkel ger en så kort och ren metod för att uppnå samma saker.

direktiven

Angular använder direktiv för att plugga dess åtgärd i sidan. Direktiv, alla prefaced med ng-, placeras i html-attribut.

Några vanliga direktiv som kommer förbyggda med Angular är:

ng-app: detta är i grunden den ursprungliga ingångspunkten för Angular till sidan. Det berättar Angular där det blir att agera. är allt som krävs för att definiera en sida som en Angular-applikation.

ng-bind: Ändrar texten till ett element till värdet av ett uttryck.
kommer att visa värdet av "namn" inuti spänningen. Eventuella ändringar i "namn" återspeglas direkt i DOM var som helst variabeln används.

ng-controller: specificerar JavaScript-klassen för den angivna åtgärden. Controllers hålls vanligtvis i externa .js-filer.

ng-repeat: skapar de mycket rena slingstrukturerna på din sida.

{{item.description}}

enkelt loopar genom varje objekt i samlingen.

Jag har inte använt dem än, men jag har läst att det kan vara svårt att skapa anpassade riktlinjer, något som tar lite tid att byta huvudet runt. Angular erbjuder a video för att klargöra konceptet.

Några exempelkod

Som nämnts tidigare, ng-app direktivet i taggen sätter scenen för Angular att köra på sidan.

Lägg till till sidhuvudet för att ta in själva vinkelramen.

pekar på den externa JavaScript-filen eller filer som innehåller JavaScript-klasserna som din Angular app kommer att ringa. En mycket enkel klass, som ett exempel, kan vara:

function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" }  , {"description": "nerf gun"}, {"description": "phone"},];} 

Passing ng-controller "ItemListCtrl", namnet på min imaginära JavaScript-klass, berättar Angular vilken kod som ska köras:

och dubbel-bracket notation berättar Angular vilka uttryck som ska utvärderas.

ng-repeat är ett underbart kortfattat repeaterdirektiv som slingrar genom den aktuella samlingen och gör den angivna åtgärden eller ger den angivna informationen. Det är så enkelt och rent.

Stuff on my desk:
{{item.description}}

Denna enkla inställning kommer att visa:

Stuff on my desk:coffee potnerf gunphone

Visst, det verkar inte så imponerande, men idén själv är. Mycket enkel sidmarkering och kontroller får igång med Angular, ja, väldigt enkelt.

Att få riktiga data till din app är också enkelt. Vinkel gillar att konsumera JSON:

function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;}  } 

Detta returnerar ett JSON-objekt som kan manipuleras med viljan i din Angular app.

Och det är byggt för testning också!

En av de grundläggande principerna Angular grundades på var att appar som byggdes med det är fullt testbara. För end-to-end testning har vi Angular Scenario Runner för att simulera användarinteraktioner med din app. Du matar det scenariotester skrivet i JavaScript.

För debugging i webbläsaren, AngularJS Batarang är en Chrome-förlängning tillgänglig på github.

Medel

Eftersom AngularJS får mer dragkraft kommer fler resurser att bli tillgängliga, men det finns redan ett antal webbplatser som ger instruktioner och sätt att utvidga Angular.

De AngularJS-webbplatsen själv är självklart din definitiva källa. De erbjuder rock-solida, enkla handledning och har en ganska aktiv Google+ närvaro.

Det finns ett antal vinklar repositories på GitHub.

Vinkelmoduler, erbjuder en samling användarinställda moduler, från Backbone-tjänster till Rails integration.

Har du använt AngularJS än? Hur jämför det med mycket större bibliotek som jQuery? Låt oss veta i kommentarerna.

Utvalda bild / miniatyrbild, vinkelbild via Shutterstock.