Een inleiding tot AngularJS

Toen ik een paar weken geleden AngularJS tegenkwam, was ik eerst geïntrigeerd. Tegen de tijd dat ik de reeks tutorials die beschikbaar waren op de AngularJS-website had doorgenomen, was ik heel blij dat ik dit raamwerk had gevonden.

Wat is AngularJS? AngularJS is het (relatief) nieuwe kind op het codeerblok. Om te citeren van hun website is het "een structureel kader voor dynamische web-apps" dat vooral geschikt is voor het bouwen van web-apps van één pagina, hoewel het zeker niet beperkt is tot dat.

Ontwikkeld in 2009 door Miško Hevery en Adam Abrons - beide Google-medewerkers op dat moment - het is volledig JavaScript en volledig client-side, dus overal waar JavaScript kan worden uitgevoerd, kan AngularJS worden uitgevoerd. Het is ook klein: gecomprimeerd en verkleind is het minder dan 29 kb. En het is open source onder de MIT-licentie. U kunt zelfs het logo gebruiken, beschikbaar onder de Creative Commons Attribution-ShareAlike 3.0 Unported-licentie.

Volgens Wikipedia is het doel van Angular "om browsertoepassingen te verbeteren met MVC-functionaliteit (model-view-controller)" en dat biedt precies dat, waardoor een bindend / MVC-raamwerk wordt geboden. Dat is tweerichtingsbinding, let wel. Heerlijk. Met een structuur zo eenvoudig als {{mijn gegevens}}, bind je gegevens aan je pagina. De $ scope-service detecteert wijzigingen in het model en past HTML-uitdrukkingen in de weergave aan door middel van controllers. Werken in de andere richting, wijzigingen in de weergave worden weerspiegeld in het model. Dit neemt de noodzaak weg voor de overgrote meerderheid van datageheivende DOM-manipulaties die velen van ons, waaronder ikzelf, als vanzelfsprekend beschouwen bij het werken met een bibliotheek zoals jQuery.

Hoekige loopt direct uit de doos zonder bibliotheekafhankelijkheden, hoewel het kan worden uitgebreid met de vele modules die beschikbaar zijn, en u kunt natuurlijk uw eigen modules bouwen om aan uw specifieke behoeften te voldoen. Omdat het pure JavaScript is, heeft het ook het voordeel dat het server-agnostisch is.

Gewend aan een krachtige bibliotheek zoals jQuery, is het gemakkelijk om het te willen mixen om dingen te doen die Angular al kan doen. De ontwikkelaars herkennen deze potentiële valkuil als volgt: "Als je moeite hebt om de gewoonte te doorbreken, overweeg dan om jQuery uit je app te verwijderen. Werkelijk. Angular heeft de $ http-service en krachtige richtlijnen die het bijna altijd onnodig maken. "Eén ding is zeker, als je bij Angular blijft, zullen de jQuery-lussen en expliciet heen en weer met de server niet in je code voorkomen, omdat Angular biedt zo'n beknopte en schone methode om dezelfde dingen te bereiken.

richtlijnen

Angular gebruikt richtlijnen om zijn actie op de pagina aan te sluiten. Directieven, allemaal voorafgegaan door ng-, worden geplaatst in html-attributen.

Enkele veel voorkomende richtlijnen die vooraf zijn gebouwd met Angular zijn:

ng-app: dit is in feite het eerste toegangspunt van Angular tot de pagina. Het vertelt Angular waar het in actie komt. is alles wat nodig is om een ​​pagina als een hoekapplicatie te definiëren.

ng-bind: verandert de tekst van een element in de waarde van een uitdrukking.
geeft de waarde van 'naam' weer binnen de reeks. Alle wijzigingen in 'naam' worden onmiddellijk weergegeven in de DOM, overal waar de variabele wordt gebruikt.

ng-controller: specificeert de JavaScript-klasse voor de gegeven actie. Controllers worden meestal bewaard in externe .js-bestanden.

ng-repeat: maakt de zeer schone lusstructuren op uw pagina.

{{item.description}}

moeiteloos elk item in de verzameling doorloopt.

Ik heb ze nog niet zelf gebruikt, maar ik heb gelezen dat het maken van aangepaste richtlijnen een lastige kwestie kan zijn, iets dat enige tijd kost om je hoofd rond te winden. Hoekige aanbiedingen a video om te helpen verduidelijken het concept.

Een voorbeeldcode

Zoals eerder vermeld, de ng-app-richtlijn in de tag bepaalt de fase voor Angular om op de pagina te worden uitgevoerd.

Toevoegen naar de paginakop om het hoekige raamwerk zelf in te brengen.

verwijst naar het externe JavaScript-bestand of bestanden die de JavaScript-klassen bevatten die uw Angular-app zal bellen. Een heel eenvoudige klasse, bijvoorbeeld, kan zijn:

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

Door ng-controller "ItemListCtrl", de naam van mijn denkbeeldige JavaScript-klasse, door te geven, vertelt Angular welke code moet worden uitgevoerd:

en dubbele beugelnotatie vertelt Angular welke expressies moeten worden geëvalueerd.

ng-repeat is een prachtig beknopte repeaterrichtlijn die door de huidige verzameling loopt en de opgegeven actie uitvoert of de opgegeven gegevens levert. Het is zo eenvoudig en schoon.

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

Deze eenvoudige set-up toont:

Stuff on my desk:coffee potnerf gunphone

Toegegeven, dat lijkt niet zo indrukwekkend, maar het idee zelf is dat wel. Zeer eenvoudige pagina-opmaak en controllers maken de slag aan de slag met Angular, nou ja, heel eenvoudig.

Het is ook eenvoudig om echte gegevens in je app te krijgen. Angular neemt graag JSON:

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

Hiermee wordt een JSON-object geretourneerd dat naar believen kan worden gemanipuleerd in uw Angular-app.

En het is ook gebouwd voor testen!

Een van de basisprincipes waar Angular op gebaseerd was, was dat apps die ermee gebouwd zijn, volledig testbaar zijn. Voor end-to-end testen hebben we Angular Scenario Runner om gebruikersinteracties met uw app te simuleren. Je voert het scenariotoetsen uit die zijn geschreven in JavaScript.

Voor foutopsporing in de browser, AngularJS Batarang is een Chrome-extensie beschikbaar op github.

Middelen

Naarmate AngularJS meer tractie krijgt, zullen er meer middelen beschikbaar komen, maar er zijn al een aantal sites die instructies en manieren bieden om Angular uit te breiden.

De AngularJS-site zelf, is natuurlijk uw definitieve bron. Ze bieden solide, eenvoudige tutorials en hebben een vrij actieve Aanwezigheid op Google+.

Er zijn een aantal Angular opslagplaatsen op GitHub.

Hoekige modules, biedt een verzameling door de gebruiker aangeleverde modules, van backbone-services tot Rails-integratie.

Heeft u AngularJS al gebruikt? Hoe verhoudt het zich tot veel grotere bibliotheken zoals jQuery? Laat het ons weten in de comments.

Uitgelichte afbeelding / thumbnail, hoek afbeelding via Shutterstock.