Inhoud
- 01. Wat is AngularJS?
- Hoe AngularJS te gebruiken
- Richtlijnen
- Gegevensbinding in twee richtingen
- Afhankelijkheidsinjectie
- Sjablonen
- Testen
Als u een professionele JavaScript-ontwikkelaar bent, heeft u waarschijnlijk wel eens gehoord van Ember.js (een open-source JavaScript-framework) en Backbone.js (een JavaScript-bibliotheek met een RESTful JSON-interface). Maar als u AngularJS nog niet kent, zult u enkele van de zeer aantrekkelijke functies missen die uw HTML voor webapplicaties echt kunnen verbeteren.
Hier laten we je proeven van AngularJS, een superheldisch JavaScript MVW-framework, inclusief de opvallende kenmerken en het proces om ermee aan de slag te gaan.
Hopelijk helpt dit je niet alleen om goed ontworpen en onderhoudbare rijke webapplicaties te ontwikkelen, maar geeft het je ook een aantal solide redenen om AngularJS te kiezen voor je aankomende projecten. Laten we beginnen!
01. Wat is AngularJS?
AngularJS, gebouwd door Google, is een open-source framework voor webtoepassingen dat is ontworpen om zowel front-endontwikkeling als testen gemakkelijker te maken voor webontwikkelaars. Het belangrijkste doel van AngularJS is om webapplicaties te verlengen met MVC-mogelijkheden (Model – view – controller). Het is een client-side JavaScript MVC / MVVM-framework dat volledig uitbreidbaar is, zonder bibliotheekafhankelijkheden werkt en ook uitstekend werkt met andere bibliotheken. U kunt zelfs elke functie aanpassen of vervangen om aan uw specifieke behoeften te voldoen.
AngularJS is in 2009 ontwikkeld door Adam Abrons en Miško Heverym, destijds Google-ingenieurs. Zoals vermeld op de officiële website, is het een "structureel raamwerk voor dynamische webapps" dat het best geschikt is voor het maken van webapplicaties van één pagina die alleen JavaScript, CSS en HTML aan de clientzijde vereisen.
Hiermee kunt u HTML gebruiken als uw sjabloontaal en kunt u de syntaxis van HTML uitbreiden om de componenten van uw webtoepassing netjes en beknopt weer te geven. AngularJS helpt u uw JavaScript-code beter te structureren en maakt het gemakkelijk om te testen, door de browser te leren gebruik te maken van afhankelijkheidsinjectie voor elke servertechnologie.
Hoe AngularJS te gebruiken
Aan de slag gaan met AngularJS is vrij eenvoudig. U kunt in slechts vijf minuten een eenvoudige Angular-app hebben door een paar attributen aan uw HTML-scripts toe te voegen. Dit zijn:
1. Neem de "ng-app" -instructie op in de html> -tag. Het zorgt ervoor dat AngularJS op de pagina wordt uitgevoerd en de pagina wordt gedefinieerd als een Angular-applicatie.
html lang = "en" ng-app>
2. Plaats de Angular script> tag onder aan uw pagina, waar de head> tag eindigt.
script src = "lib / angular / angular.js"> / script>
3. Voeg gewone HTML toe. HTML-attributen worden gebruikt om toegang te krijgen tot AngularJS-richtlijnen, terwijl de evaluatie van uitdrukkingen gebeurt met dubbele haakjes.
body ng-controller = "TasksListCtrl"> h1> Taken van vandaag / h1> ul> li ng-repeat = "taken in taken"> {{task.name}} / li> / ul> / body> / html>
Hier definieert de richtlijn ng-controller een naamruimte, waar u uw Angular JS kunt plaatsen om de gegevens te beheren en de uitdrukkingen in uw HTML te evalueren. Hoewel de ng-repeat-instructie een Angular-repeaterobject is, wordt Angular gevraagd om lijstelementen te maken zolang je taken hebt om weer te geven.
Hoewel de meeste frameworks tegenwoordig slechts een bundel bestaande tools zijn, is AngularJS een framework van de volgende generatie, met een aantal zeer aantrekkelijke functies die niet alleen nuttig zijn voor ontwikkelaars, maar ook even nuttig voor ontwerpers. Hieronder volgen enkele ongelooflijke functies van AngularJS, die ontwikkelaars zullen helpen hun toekomstige webtoepassingen geweldig te maken ...
Richtlijnen
Richtlijnen zijn een van de krachtigste en meest aantrekkelijke kenmerken van AngularJS. Ze stellen u in staat uw HTML uit te breiden en worden door AngularJS gebruikt om de actie op de pagina in te pluggen. Hiermee kunt u aangepaste en herbruikbare HTML-tags specificeren, die kunnen worden gebruikt om DOM-attributen te manipuleren en het gedrag van specifieke elementen te modereren. Alle richtlijnen worden voorafgegaan door ng-, ontworpen als zelfstandige elementen die los staan van uw MVC-toepassing en in HTML-attributen worden geplaatst.
Enkele van de opmerkelijke AngularJS-richtlijnen zijn:
- ng-app: deze instructie vertelt Angular waar hij moet worden geactiveerd. Om een pagina als een Angular-applicatie te definiëren, moet u een eenvoudige code gebruiken: html ng-app>.
- ng-bind: deze instructie vertelt Angular om de tekstinhoud van een HTML-element met de gegeven expressie-waarde te wijzigen, en om de tekst bij te werken als de waarde van die expressie verandert.
- ng-model: het lijkt erg op ng-bind, maar bindt de weergave in het model, wat andere richtlijnen, zoals select, textarea of input, vereisen.
- ng-class: staat het dynamisch laden van klasseattributen toe.
- ng-controller: met deze richtlijn kunt u een JavaScript-controllerklasse specificeren voor het evalueren van HTML-expressies.
- ng-repeat: het loopt moeiteloos door een item, waarop de gegeven loopvariabele is ingesteld, in een verzameling.
- ng-hide en ng-show: met behulp van de waarde van een Booleaanse uitdrukking, bepaalt deze instructie of het element wordt weergegeven of niet.
- ngIf: Het is een eenvoudige if statement-instructie die het mogelijk maakt om een kloon van het gecompileerde element opnieuw in de DOM in te voegen, als de voorwaarden waar zijn. Als de voorwaarde onwaar is, wordt het element uit de DOM verwijderd.
Hieronder volgt een voorbeeld van een richtlijn die naar een gebeurtenis luistert en de bijbehorende $ scope bijwerkt.
myModule.directive ('myComponent', function (mySharedService) {return {restrict: 'E', controller: function ($ scope, $ attrs, mySharedService) {$ scope. $ on ('handleBroadcast', function () {$ scope .message = 'Richtlijn:' + mySharedService.message;});}, vervang: true, sjabloon: 'input>'};});
Deze aangepaste richtlijn kan als volgt worden gebruikt:
mijn-component ng-model = "bericht"> / mijn-component>
Gegevensbinding in twee richtingen
Gegevensbinding is waarschijnlijk het meest dominante en opvallende kenmerk van AngularJS. Het bespaart ontwikkelaars van het schrijven van een aanzienlijke hoeveelheid code door een groot deel van de belasting van de serverbackend te verminderen. In een typische webtoepassing is 80% van de codebasis bestemd voor het manipuleren, doorlopen en beluisteren van de DOM. Door gegevensbinding is deze code onzichtbaar, zodat u zich kunt concentreren op andere belangrijke zaken van uw applicatie.
Traditioneel hebben de meeste sjabloonsystemen eenrichtingsgegevensbinding: ze voegen model- en sjablooncomponenten samen tot een weergave. Na het samenvoegen worden wijzigingen aan het model niet automatisch weerspiegeld in de weergave. Om deze wijzigingen weer te geven, moet de ontwikkelaar de DOM-elementen en attributen handmatig manipuleren. Dit proces wordt ingewikkelder en omslachtiger wanneer een gebruiker wijzigingen aanbrengt in de weergave. Omdat de ontwikkelaar vervolgens de interacties moet interpreteren, ze in het model moet samenvoegen en de weergave moet bijwerken.
Daarentegen doet AngularJS de gegevensbinding op een betere en andere manier door de synchronisatie van gegevens tussen het model en de DOM af te handelen, en vice versa.
Hieronder volgt een eenvoudig voorbeeld waarin de binding van een invoerwaarde aan een h1> -tag wordt uitgelegd.
! doctype html> html ng-app> head> script src = "http://code.angularjs.org/angular-1.0.0rc10.min.js"> / script> / head> body> div> label> Naam: / label> input type = "text" ng-model = "yourName" placeholder = "Voer hier een naam in"> hr> h1> Hallo, {{yourName}}! / h1> / div> / body> / html>
Afhankelijkheidsinjectie
AngularJS heeft een ingebouwd injector-subsysteem waarmee ontwikkelaars gemakkelijk applicaties kunnen ontwikkelen, begrijpen en testen. De afhankelijkheidsinjectie in AngularJS is verantwoordelijk voor het maken van componenten, het afhandelen van hoe ze hun afhankelijkheden in handen krijgen en deze op verzoek beschikbaar maken voor andere componenten.
Door gebruik te maken van afhankelijkheidsinjectie, brengt AngularJS traditionele server-side services naar client-side webapplicaties, wat resulteert in een verminderde belasting van de backend en de webapplicatie veel lichter maakt.
Als u toegang wilt krijgen tot de belangrijkste AngularJS-services, moet u een bepaalde service als parameter toevoegen. AngularJS merkt automatisch dat u van die dienst gebruik wilt maken en stelt een instantie voor u beschikbaar.
functie EditCtrl ($ scope, $ location, $ routeParams) {// Schrijf hier iets ...}
Daarnaast kunt u uw eigen aangepaste services definiëren en deze toegankelijk maken voor injectie.
hoekig. module (’MyServiceModule’, []). factory (’verwittigen’, [’$ window’, functie (win) {terugkeerfunctie (msg) {win.alert (msg);};}]); functie myController (bereik, meldingsservice) {bereik.callNotify = functie (msg) {meldingsservice (msg); }; } myController. $ inject = [’$ scope’, ’verwittigen’];
Sjablonen
In AngularJS wordt een sjabloon geschreven met HTML dat Angular-specifieke attributen en elementen bevat. Door de sjabloon te combineren met informatie van de controller en het model, geeft AngularJS de dynamische weergave weer in browsers.
Hieronder staan hoekelementen en attributen die kunnen worden gebruikt:
- Filter: opmaak van gegevens voor weergave wordt gedaan door dit element.
- Formulierbeheer: het wordt gebruikt voor validatie van gebruikersinvoer.
- Markup: om uitdrukkingen aan elementen te binden, met behulp van de dubbele accolade-notatie {{}}.
- Richtlijn: een element of attribuut dat een herbruikbare DOM-component weergeeft of een bestaand DOM-element verlengt.
De onderstaande code toont een sjabloon met richtlijnen en markeringen:
html ng-app>! - Body-tag aangevuld met ngController-instructie -> body ng-controller = "MyController"> input ng-model = "foo" value = "bar">! - Knoptag met ng-click-instructie , en tekenreeksuitdrukking 'buttonText' verpakt in "{{}}" markup -> button ng-click = "changeFoo ()"> {{buttonText}} / button> script src = "angular.js"> / body> / html>
In een typische toepassing heeft de sjabloon CSS-, HTML- en Angular-richtlijnen in één HTML-bestand (meestal index.html).
Testen
Omdat JavaScript dynamisch is en wordt geïnterpreteerd met een grote uitdrukkingskracht, maar bijna geen hulp nodig heeft van de compiler. Daarom begrijpt het AngularJS-team heel goed dat elke JavaScript-code moet worden doorlopen met een reeks strenge tests. Daarom hebben ze AngularJS van begin af aan ontworpen om testbaar te zijn, waardoor het testen van uw webapplicaties zo eenvoudig mogelijk is.
AngularJS maakt optimaal gebruik van afhankelijkheidsinjectie, wordt vooraf gebundeld met spotjes en moedigt scheiding tussen gedrag en weergave aan.Voor end-to-end-testen heeft AngularJS een end-to-end testrunner, genaamd Protractor, die de interne werking van AngularJS begrijpt om testschilfering te elimineren, en gebruikersinteracties met uw applicatie simuleert.
Een ander soort test in de AngularJS is Unit-test waarmee u individuele code-eenheden kunt testen. Bovendien heeft het Angular-team ook een Chrome-extensie gebouwd, genaamd AngularJS Batarang, waarmee ontwikkelaars gemakkelijk prestatieknelpunten kunnen detecteren en hun applicaties in de browser kunnen debuggen.
Ajeet Yadav is een professionele webontwikkelaar, geassocieerd met wordpressintegration.com, een gereputeerd webontwikkelingsbedrijf dat een hoogwaardige Photoshop-naar-WordPress-thema- / sjabloonconversieservice levert. Volg @Wordpress_INT op Twitter.
