En introduktion til AngularJS

Da jeg kom på tværs af AngularJS for et par uger siden, var jeg først fascineret. Da jeg havde arbejdet gennem det sæt af vejledninger, der var tilgængelige på AngularJS-webstedet, var jeg begejstret over at have fundet denne ramme.

Hvad er AngularJS? AngularJS er det (relativt) nye barn på kodningsblokken. For at citere fra deres hjemmeside er det "en strukturel ramme for dynamiske webapps", der er særligt velegnet til opbygning af websider på en side, men det er bestemt ikke begrænset til det.

Udviklet i 2009 af Miško Hevery og Adam Abrons - både Google-medarbejdere på det tidspunkt - det er helt JavaScript og helt klientsiden, hvor som helst JavaScript kan køre, kan AngularJS køre. Det er også lille: komprimeret og minificeret er det mindre end 29 kb. Og det er open source under MIT-licensen. Du kan endda bruge logoet, der er tilgængeligt under Creative Commons Attribution-ShareAlike 3.0 Unported-licens.

Ifølge Wikipedia er målet med Angular "at øge browserbaserede applikationer med MVC-kapacitet (MVC)", og det gør netop det, der giver en bindende / MVC-ramme. Det er tovejs bindende, tænk på dig. Lækker. Med en struktur, der er så enkel som {{my data}}, binder du data til din side. $ Scope-tjenesten registrerer ændringer i modellen og ændrer HTML-udtryk i visningen ved hjælp af controllere. Arbejder i den anden retning afspejles ændringer i visningen i modellen. Dette fjerner behovet for det store flertal af datacentriske DOM-manipulationer, mange af os, selv inkluderet, tager for givet, når de arbejder med et bibliotek som jQuery.

Vinkelkørsler kører lige ud af kassen uden biblioteksafhængigheder, selvom det kan udvides med de mange moduler, der er tilgængelige, og selvfølgelig kan du selv bygge op til dine specifikke behov. At være ren JavaScript, det har også den fordel at være server-agnostic.

At være vant til et kraftfuldt bibliotek som jQuery, det er nemt at blande det ind for at gøre ting Angular kan allerede gøre. Ved at anerkende dette potentielle faldgrube har udviklerne følgende at sige: "Hvis du kæmper for at bryde vanen, overvej at fjerne jQuery fra din app. Virkelig. Angular har $ http-tjenesten og kraftfulde direktiver, der gør det næsten altid unødvendigt. "En ting er helt sikkert, at hvis du holder dig til Angular, vil jQuery-sløjferne og eksplicit frem og tilbage med serveren være fraværende fra din kode siden Vinkel giver en sådan kortfattet og ren metode til at opnå de samme ting.

direktiver

Angular bruger direktiver til at sætte sin handling ind på siden. Direktiver, alle præfaced med ng-, er placeret i html attributter.

Nogle fælles direktiver, der kommer forudbygget med Vinkel er:

ng-app: dette er i det væsentlige det oprindelige indgangspunkt for Angular til siden. Det fortæller Angular hvor det bliver til at handle. er alt hvad der kræves for at definere en side som en kantet applikation.

ng-bind: Ændrer teksten af ​​et element til værdien af ​​et udtryk.
vil vise værdien af ​​'navn' inde i spændet. Eventuelle ændringer til 'navn' afspejles øjeblikkeligt i DOM hvor som helst variablen bruges.

ng-controller: angiver JavaScript-klassen for den givne handling. Controllers holdes typisk i eksterne .js-filer.

ng-repeat: skaber de meget rene loopstrukturer på din side.

{{item.description}}

ubesværet løkker gennem hvert element i samlingen.

Jeg har ikke brugt dem selv endnu, men jeg har læst, at oprette brugerdefinerede direktiver kan være et vanskeligt problem, noget der tager lidt tid at pakke dit hoved rundt. Vinkel tilbyder a video for at hjælpe med at præcisere konceptet.

Nogle prøvekode

Som nævnt før, ng-app direktivet i tag sætter scenen for vinkel at køre på siden.

Tilføje til sidehovedet for at bringe ind i Angular framework selv.

peger på den eksterne JavaScript-fil eller filer, der indeholder JavaScript-klasserne, som din Angular app vil ringe til. En meget enkel klasse, som et eksempel, kan være:

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

Passing ng-controller "ItemListCtrl", navnet på min imaginære JavaScript-klasse, fortæller Angular hvilken kode der skal køres:

og dobbelt-bracket notation fortæller Angular hvilke udtryk der skal evalueres.

ng-repeat er et fantastisk succinkt repeater-direktiv, der løkker gennem den nuværende samling og gør den angivne handling eller giver de specificerede data. Det er så simpelt og rent.

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

Denne enkle opsætning vil vise:

Stuff on my desk:coffee potnerf gunphone

Det synes jo ikke så imponerende, men ideen selv er. Meget enkel side markup og controllere gør at komme i gang med Angular, godt, meget simpelt.

At få virkelige data til din app er også behageligt enkel. Angular kan lide at forbruge JSON:

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

Dette returnerer et JSON objekt, som kan manipuleres ved vilje i din Angular app.

Og det er bygget til testning også!

En af de grundlæggende principper Angular var baseret på, var at apps bygget med det være fuldt testbare. Til end-to-end test har vi Angular Scenario Runner til at simulere brugerinteraktioner med din app. Du føder det scenarietest skrevet i JavaScript.

Til debugging i browseren, AngularJS Batarang er en Chrome-udvidelse tilgængelig på github.

Ressourcer

Da AngularJS får mere trækkraft, vil flere ressourcer blive tilgængelige, men der er allerede en række websteder, der giver vejledning og måder at udvide Angular.

Det AngularJS site selv er selvfølgelig din endelige kilde. De tilbyder rock-solid, simple tutorials og har en temmelig aktiv Google+ tilstedeværelse.

Der er en række vinkler repositorier på GitHub.

Vinkelmoduler, tilbyder en samling af brugerindgivne moduler, fra Backbone-tjenester til Rails integration.

Har du brugt AngularJS endnu? Hvordan sammenligner det med mange større biblioteker som jQuery? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, vinkelbillede via Shutterstock.