Da jeg kom over AngularJS for noen uker siden, ble jeg fascinert først. Da jeg hadde jobbet gjennom settet av opplæringsprogrammer som var tilgjengelige på AngularJS-nettstedet, var jeg begeistret for å ha funnet dette rammeverket.

Hva er AngularJS? AngularJS er den (relativt) nye gutten på kodingsblokken. For å sitere fra deres nettside er det "et strukturelt rammeverk for dynamiske webapps" som er spesielt godt egnet for å bygge websider på en side, selv om det ikke er begrenset til det.

Utviklet i 2009 av Miško Hevery og Adam Abrons - begge Google-ansatte på den tiden - det er helt JavaScript og helt klientsiden, hvor som helst JavaScript kan kjøre, kan AngularJS kjøre. Det er også lite: komprimert og minifisert det er mindre enn 29 kb. Og det er åpen kildekode under MIT-lisensen. Du kan til og med bruke logoen, tilgjengelig under Creative Commons Attribution-ShareAlike 3.0 Unported-lisensen.

Ifølge Wikipedia er målet med Angular å øke nettleserbaserte applikasjoner med MVC-mulighet (MVC), og det gjør det bare, og gir et bindende / MVC-rammeverk. Det er toveis bindende, husk deg. Nydelig. Med en struktur som er enkel som {{min data}}, binder du data til siden din. $ Scope service oppdager endringer i modellen og endrer HTML-uttrykk i visningen ved hjelp av kontroller. Å arbeide i den andre retningen, blir endringer i visningen gjenspeilet i modellen. Dette fjerner behovet for det store flertallet av datasentriske DOM-manipulasjoner mange av oss, inkludert meg selv, tar for gitt når de jobber med et bibliotek som jQuery.

Vinklet går rett ut av esken uten biblioteksavhengigheter, selv om det kan utvides med de mange modulene som er tilgjengelige, og selvfølgelig kan du bygge din egen for å passe dine spesifikke behov. Å være ren JavaScript, det har også fordelen av å være server-agnostiker.

Å være vant til et kraftig bibliotek som jQuery, det er lett å ønske å blande det inn for å gjøre ting Angular kan allerede gjøre. Kjenne til dette potensielle fallgruvet, har utviklerne dette å si: "Hvis du sliter med å bryte vane, bør du vurdere å fjerne jQuery fra appen din. Egentlig. Angular har $ http-tjenesten og kraftige direktiver som gjør det nesten alltid unødvendig. "En ting er sikkert, hvis du holder deg til Angular, vil jQuery-løkkene og eksplisitte frem og tilbake med serveren være fraværende fra koden din siden Vinkel gir en slik kortfattet og ren metode for å oppnå de samme tingene.

direktiver

Angular bruker direktiver for å koble sin handling til siden. Direktiver, alle prefaced med ng-, er plassert i html attributter.

Noen vanlige direktiver som kommer pre-built med Angular er:

ng-app: dette er i utgangspunktet det opprinnelige inngangspunktet for Angular til siden. Det forteller Angular hvor det blir å handle. er alt som trengs for å definere en side som en kantet applikasjon.

ng-bind: Endrer teksten til et element til verdien av et uttrykk.
vil vise verdien av 'navn' inne i spekteret. Eventuelle endringer i "navn" gjenspeiles umiddelbart i DOM hvor variabelen brukes.

ng-controller: angir JavaScript-klassen for den oppgitte handlingen. Kontrollører holdes vanligvis i eksterne .js-filer.

ng-repeat: oppretter de veldig rene loopstrukturer på siden din.

  • {{item.description}}

Umiddelbart løkker gjennom hvert element i samlingen.

Jeg har ikke brukt dem enda meg selv, men jeg har lest at det å opprette egendefinerte direktiver kan være et vanskelig problem, noe som tar litt tid å vikle hodet rundt. Angular tilbyr a video for å avklare konseptet.

Noen prøvekode

Som nevnt før, ng-app direktivet i tag angir scenen for vinkel å kjøre på siden.

Legg til til sidehodet for å bringe inn Angular Framework selv.

peker på den eksterne JavaScript-filen eller filene som holder JavaScript-klassene din Angular app vil ringe. En veldig enkel klasse, som et eksempel, kan være:

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

Passing ng-controller "ItemListCtrl", navnet på min imaginære JavaScript-klasse, forteller Angular hvilken kode som skal kjøres:

og dobbeltkonsollnotasjon forteller Angular hvilke uttrykk som skal evalueres.

ng-repeat er et fantastisk kortfattet repeater-direktiv som går gjennom gjeldende samling og gjør den angitte handlingen eller gir de angitte dataene. Det er så enkelt og rent.

Stuff on my desk:

  • {{item.description}}

Denne enkle oppsettet vil vise:

Stuff on my desk:coffee potnerf gunphone

Ganske vist virker det ikke så imponerende, men ideen selv er. Veldig enkel sideoppretting og kontroller gjør det mulig å komme i gang med Angular, vel, veldig enkelt.

Å få ekte data i appen din er også behagelig. Angular liker å konsumere 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 Angular app.

Og det er bygget for testing også!

En av de grunnleggende prinsippene Angular ble grunnlagt på, var at appene som ble bygget med det, var fullt testbare. For end-to-end testing har vi Angular Scenario Runner for å simulere brukerinteraksjoner med appen din. Du foder det scenarietester skrevet i JavaScript.

For feilsøking i nettleseren, AngularJS Batarang er en Chrome-utvidelse tilgjengelig på github.

ressurser

Som AngularJS får mer trekkraft, vil flere ressurser bli tilgjengelige, men det finnes allerede en rekke nettsteder som gir instruksjoner og måter å utvide Angular.

De AngularJS nettsted selv, er selvfølgelig din endelige kilde. De tilbyr rock-solid, enkle opplæringsprogrammer og har en ganske aktiv Google+ tilstedeværelse.

Det er en rekke vinkler repositorier på GitHub.

Vinkelmoduler, tilbyr en samling av bruker-innsendte moduler, fra Backbone tjenester til Rails integrasjon.

Har du brukt AngularJS ennå? Hvordan sammenligner det med mye større biblioteker som jQuery? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, vinkelbilde via Shutterstock.