Begyndervejledning til opbygning af webapps med AngularJS

angularjs hjemmeside

Kom ombord med Googles ramme om webapp

Hvis du er en professionel JavaScript-udvikler, har du sikkert hørt om det Ember.js (en open source JavaScript-ramme) og Backbone.js (et JavaScript-bibliotek med en RESTful JSON-grænseflade). Men hvis du ikke er fortrolig med AngularJS alligevel vil du gå glip af nogle af dens meget overbevisende funktioner, der virkelig kan forbedre din HTML til webapplikationer.

Her giver vi dig en smag af AngularJS, en superheltisk JavaScript MVW-ramme, herunder dens markante funktioner og processen med at komme i gang med det.



Forhåbentlig vil dette ikke kun hjælpe dig med at udvikle velarkitekturerede og vedligeholdelige rige webapplikationer, men også give dig nogle solide grunde til at vælge AngularJS til dine kommende projekter. Lad os begynde!

01. Hvad er AngularJS?

AngularJS, bygget af Google, er en open source-webapplikationsramme, der er designet til at gøre både frontend-udvikling og test nemmere for webudviklere. Hovedmålet med AngularJS er at forlænge webapplikationer med MVC-funktion (Model-view-controller). Det er en JavaScript-MVC / MVVM-ramme på klientsiden, der er fuldt udvidelig, kører uden biblioteksafhængighed og fungerer også godt sammen med andre biblioteker. Selv kan du også ændre eller udskifte dens hver funktion, så den passer til dine specifikke behov.

AngularJS blev udviklet i 2009 af Adam Abrons og Mi & scaron; ko Heverym, som på det tidspunkt var Google-ingeniører. Som nævnt på det officielle websted er det en 'strukturel ramme for dynamiske webapps', der er bedst egnet til at oprette en-side webapplikationer, der kun kræver JavaScript, CSS og HTML på klientsiden.

Det giver dig mulighed for at gøre brug af HTML som dit skabelonsprog og giver dig mulighed for at udvide HTML-syntaksen for at udtrykke komponenterne i din webapplikation pænt og kortfattet. AngularJS hjælper dig med at strukturere din JavaScript-kode bedre og gør det let at teste og lærer browseren, hvordan man bruger afhængighedsinjektion til enhver serverteknologi.

Sådan bruges AngularJS

Kom godt i gang med AngularJS er ret let. Du kan have en simpel Angular-app på bare fem minutter ved at sætte et par attributter til dine HTML-scripts. Disse er:

1. Inkluder 'ng-app'-direktivet i koden. Det får AngularJS til at køre på siden og definerer siden som en kantet applikation.

2. Anbring det kantede mærke i bunden af ​​din side, hvor mærket slutter.

3. Tilføj almindelig HTML. HTML-attributter bruges til at få adgang til AngularJS-direktiverne, mens evaluering af udtryk foretages med dobbelt parentesnotation.

Today's tasks

  • {{task.name}}

Her definerer direktivet ng-controller et navneområde, hvor du kan placere din Angular JS til at kontrollere dataene og evaluere udtrykkene i din HTML. Mens ng-gentagelsesdirektivet er et Angular repeater-objekt, som beder Angular om at oprette listeelementer, så længe du har opgaver at vise.

Mens de fleste af rammerne i dag kun er et bundt af eksisterende værktøjer, er AngularJS en næste generations ramme med nogle meget overbevisende funktioner, der ikke kun er nyttige for udviklere, men også lige så nyttige for designere. Følgende er nogle utrolige funktioner i AngularJS, som vil hjælpe udviklere med at gøre deres fremtidige webapplikationer fantastiske ...

Direktiver

Direktiver er en af ​​de mest kraftfulde og overbevisende funktioner i AngularJS. De giver dig mulighed for at udvide din HTML og bruges af AngularJS til at tilslutte dens handling til siden. De giver dig mulighed for at specificere brugerdefinerede og genanvendelige HTML-tags, som kan bruges til at manipulere DOM-attributter og moderere opførelsen af ​​bestemte elementer. Alle direktiverne er indledt med ng-, designet til at være uafhængige elementer adskilt fra din MVC-applikation og placeret i HTML-attributter.



Nogle af de bemærkelsesværdige AngularJS-direktiver er:

  • ng-app: Dette direktiv fortæller Angular, hvor man skal aktivere. For at definere en side som et vinklet program skal du bruge en simpel kode:.
  • ng-bind: Dette direktiv fortæller Angular at ændre tekstindholdet i et HTML-element med det givne udtryks værdi og at opdatere teksten, når værdien af ​​dette udtryk ændres.
  • ng-model: Det ligner meget ng-bind, men binder visningen ind i modellen, som andre direktiver som select, textarea eller input kræver.
  • ng-klasse: Tillader dynamisk indlæsning af klasseattributter.
  • ng-controller: Dette direktiv giver dig mulighed for at specificere en JavaScript-controller-klasse til evaluering af HTML-udtryk.
  • ng-gentagelse: Den løber ubesværet gennem et element, som den givne sløjfevariabel er indstillet til, i en samling.
  • ng-hide og ng-show: Ved hjælp af værdien af ​​et boolsk udtryk bestemmer dette direktiv, om elementet skal vises eller ej.
  • ngIf: Det er grundlæggende, hvis sætningsdirektivet giver mulighed for at genindsætte en klon af det kompilerede element i DOM, hvis betingelserne er sande. Hvis betingelsen er falsk, fjerner den elementet fra DOM.

Følgende er et eksempel på et direktiv, der lytter til en begivenhed og opdaterer dens $ -omfang følgelig.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Dette brugerdefinerede direktiv kan bruges som følger:

Tovejs databinding

Databinding er sandsynligvis det mest dominerende og bemærkelsesværdige træk ved AngularJS. Det sparer udviklere fra at skrive en betydelig mængde kode ved at reducere meget af byrden for serverbackend. I en typisk webapplikation er 80% af kodebasen dedikeret til at manipulere, krydse og lytte til DOM. Data-binding gør denne kode usynlig, så du kan fokusere på andre vigtige ting i din applikation.

Traditionelt har de fleste skabelonsystemer envejs databinding: de fletter model- og skabelonkomponenter sammen til en visning. Efter fletningen afspejles ændringer i modellen ikke automatisk i visningen. For at afspejle disse ændringer skal udvikleren manuelt manipulere DOM-elementerne og attributterne. Denne proces bliver mere kompliceret og besværlig, når en bruger foretager ændringer i visningen. Fordi udvikleren derefter skal fortolke interaktionerne, flette dem ind i modellen og opdatere visningen.

Envejs bindingsdiagram

Billede med tilladelse fra http://docs.angularjs.org

I modsætning hertil udfører AngularJS data-binding på en bedre og anderledes måde ved at håndtere synkronisering af data mellem modellen og DOM og omvendt.

Tovejs databindingsdiagram

Billede med tilladelse fra http://docs.angularjs.org

Følgende er et simpelt eksempel, der forklarer bindingen af ​​en inputværdi til en

tag.

Name:

Hello, {{yourName}}!

Afhængighedsinjektion

AngularJS har et indbygget injektor-undersystem, der gør det let for udviklere at udvikle, forstå og teste applikationer. Afhængighedsinjektionen i AngularJS er ansvarlig for at skabe komponenter, håndtere, hvordan de får fat i deres afhængigheder, og gøre dem tilgængelige for andre komponenter, når de bliver anmodet om det.

Ved at gøre brug af afhængighedsindsprøjtning bringer AngularJS traditionelle services på serversiden til webapplikationer på klientsiden, hvilket resulterer i reduceret byrde for backend og gør webapplikationen meget lettere.

Hvis du ønsker at få adgang til centrale AngularJS-tjenester, skal du tilføje en bestemt tjeneste som parameter. AngularJS bemærker automatisk, at du vil bruge denne service, og vil gøre en instans tilgængelig for dig.



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

Ud over dette kan du definere dine egne brugerdefinerede tjenester og gøre dem tilgængelige for injektion.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Skabeloner

I AngularJS skrives en skabelon med HTML, der indeholder Angular-specifikke attributter og elementer. Ved at kombinere skabelonen med information fra controlleren og modellen gengiver AngularJS den dynamiske visning i browsere.

Nedenfor er vinklede elementer og attributter, der kan bruges:

  • Filter: Formatering af data til visning udføres af dette element.
  • Formkontrol: Det bruges til validering af brugerinput.
  • Markup: For at binde udtryk til elementer ved hjælp af den dobbelte krøllede afstivningsnotation {{}}.
  • Direktiv: Et element eller en attribut, der gengiver en genanvendelig DOM-komponent eller forlænger et eksisterende DOM-element.

Koden nedenfor viser en skabelon med direktiver og markering:

{{buttonText}}

I en typisk applikation har skabelonen CSS-, HTML- og Angular-direktiver i en enkelt HTML-fil (normalt index.html).

Testning

Da JavaScript er dynamisk og fortolkes med stor udtryksstyrke, men ikke næsten tager hjælp fra compileren. Derfor forstår AngularJS-teamet godt, at enhver JavaScript-kode skal gennemføres med et sæt alvorlige tests. Så de har designet AngularJS fra bunden til at kunne testes, hvilket gør test af dine webapplikationer så let som muligt.

AngularJS drager fuld fordel af afhængighedsindsprøjtning, leveres forudpakket med mocks og tilskynder adfærdssynsadskillelse. Til end-to-end-test har AngularJS en ende-til-slut-testløber, kaldet Vinkelmåler, som forstår den indre funktion af AngularJS for at eliminere testafskalning og simulerer brugerinteraktioner med din applikation.

En anden form for test i AngularJS er Enhedstest, hvorigennem du kan teste individuelle kodeenheder. Desuden byggede Angular-teamet også en Chrome-udvidelse, der hedder AngularJS Batarang , som gør det muligt for udviklere at opdage ydeevne flaskehalse og lade dem fejle deres applikationer i browseren.

Ajeet Yadav er en professionel webudvikler, tilknyttet wordpressintegration.com , et velrenommeret webudviklingsfirma, der leverer en højkvalitets Photoshop til WordPress-tema / skabelonkonverteringstjeneste. Følge efter @Wordpress_INT på Twitter.