Nybegynnerveiledning for å bygge webapper med AngularJS

angularjs hjemmeside

Gå ombord med Googles rammeverk for webapp

Hvis du er en profesjonell JavaScript-utvikler, har du sannsynligvis hørt om Ember.js (et JavaScript-rammeverk med åpen kildekode) og Backbone.js (et JavaScript-bibliotek med et RESTful JSON-grensesnitt). Men hvis du ikke er kjent med AngularJS ennå, du kommer til å savne noen av de veldig overbevisende funksjonene som virkelig kan forbedre HTML-en din for webapplikasjoner.

Her gir vi deg en smak av AngularJS, et superhelt heroisk JavaScript MVW-rammeverk, inkludert dets utestående funksjoner og prosessen med å komme i gang med det.



Forhåpentligvis vil dette ikke bare hjelpe deg med å utvikle velarkitekturerte og vedlikeholdsrike rike webapplikasjoner, men også gi deg noen solide grunner til å velge AngularJS for dine kommende prosjekter. La oss begynne!

hvis jeg treffer det en gang er jeg en piper

01. Hva er AngularJS?

AngularJS, bygget av Google, er et rammeverk med åpen kildekode for nettapplikasjoner som er designet for å gjøre både frontend-utvikling og testing enklere for webutviklere. Hovedmålet med AngularJS er å forlenge webapplikasjoner med MVC-funksjon (Model – view – controller). Det er et JavaScript-MVC / MVVM-rammeverk på klientsiden som er fullt utvidbart, kjører uten biblioteksavhengighet, og fungerer også bra med andre biblioteker. Selv, du kan også endre eller erstatte alle funksjonene for å passe dine spesifikke behov.

AngularJS ble utviklet i 2009 av Adam Abrons og Mi & scaron; ko Heverym, som var Google-ingeniører på den tiden. Som nevnt på det offisielle nettstedet, er det et 'strukturelt rammeverk for dynamiske webapps' som er best egnet for å lage ensides webapplikasjoner som bare krever JavaScript, CSS og HTML på klientsiden.

Det lar deg bruke HTML som malspråk og lar deg utvide HTML-syntaksen for å uttrykke komponentene i webapplikasjonen pent og kortfattet. AngularJS hjelper deg med å strukturere JavaScript-koden din bedre og gjør det enkelt å teste, og lærer nettleseren hvordan du bruker avhengighetsinjeksjon for enhver serverteknologi.

Hvordan bruke AngularJS

Å komme i gang med AngularJS er ganske enkelt. Du kan ha en enkel Angular-app på bare fem minutter ved å legge noen få attributter til HTML-skriptene dine. Disse er:

1. Inkluder 'ng-app' direktivet i koden. Det vil få AngularJS til å kjøre på siden, og definere siden som en Angular-applikasjon.

2. Plasser Angular-koden nederst på siden din, der taggen slutter.

3. Legg til vanlig HTML. HTML-attributter brukes til å få tilgang til AngularJS-direktiver, mens evaluering av uttrykk gjøres med dobbel brakettnotasjon.

Today's tasks

  • {{task.name}}

Her definerer direktivet ng-controller et navneområde, der du kan plassere din Angular JS for å kontrollere dataene og evaluere uttrykkene i HTML-en. Mens ng-repeat-direktivet er et Angular repeater-objekt, som ber Angular om å lage listeelementer så lenge du har oppgaver å vise.

Mens de fleste av rammene i dag bare er en pakke med eksisterende verktøy, er AngularJS et neste generasjons rammeverk som har noen veldig overbevisende funksjoner som er nyttige, ikke bare for utviklere, men også like nyttige for designere. Følgende er noen utrolige funksjoner i AngularJS, som vil hjelpe utviklere å gjøre deres fremtidige webapplikasjoner fantastiske ...

Direktiver

Direktiver er en av de kraftigste og mest overbevisende egenskapene til AngularJS. De lar deg utvide HTML-en din og brukes av AngularJS til å koble dens handling til siden. De lar deg spesifisere tilpassede og gjenbrukbare HTML-koder, som kan brukes til å manipulere DOM-attributter og moderere oppførselen til spesifikke elementer. Alle direktivene er innledet med ng-, designet for å være frittstående elementer atskilt fra MVC-applikasjonen, og plassert i HTML-attributter.



1 TB ekstern harddisk cyber mandag

Noen av de bemerkelsesverdige AngularJS-direktivene er:

  • ng-app: Dette direktivet forteller Angular hvor du skal aktivere. For å definere en side som en Angular-applikasjon, må du bruke en enkel kode:.
  • ng-bind: Dette direktivet forteller Angular å endre tekstinnholdet i et HTML-element med det gitte uttrykkets verdi, og å oppdatere teksten når verdien av uttrykket endres.
  • ng-modell: Den ligner veldig på ng-bind, men binder visningen inn i modellen, som andre direktiver som select, textarea eller input krever.
  • ng-klasse: Tillater dynamisk lasting av klasseattributter.
  • ng-controller: Dette direktivet lar deg spesifisere en JavaScript-kontrollerklasse for evaluering av HTML-uttrykk.
  • ng-repeat: Den løper enkelt gjennom et element, som den gitte loopvariabelen er satt til, i en samling.
  • ng-hide og ng-show: Ved å bruke verdien av et boolsk uttrykk bestemmer dette direktivet om elementet skal vises eller ikke.
  • ngIf: Det er grunnleggende om uttalelsesdirektivet som gjør det mulig å sette inn en klon av det kompilerte elementet på nytt i DOM, hvis forholdene er oppfylte. Hvis tilstanden er falsk, fjerner den elementet fra DOM.

Følgende er et eksempel på et direktiv som lytter til en hendelse og oppdaterer $ omfanget, 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 tilpassede direktivet kan brukes som følger:

Toveis databinding

Databinding er trolig den mest dominerende og bemerkelsesverdige funksjonen i AngularJS. Det sparer utviklere fra å skrive en betydelig mengde kode ved å redusere mye av belastningen på server-backend. I en typisk webapplikasjon er 80% av kodebasen dedikert til å manipulere, krysse og lytte til DOM. Databinding gjør denne koden usynlig, slik at du kan fokusere på andre viktige ting i applikasjonen din.

Tradisjonelt har de fleste malingssystemene enveis databinding: de fletter modell- og malkomponenter sammen til en visning. Etter sammenslåingen gjenspeiles ikke endringer i modellen automatisk i visningen. For å gjenspeile disse endringene, må utvikleren manuelt manipulere DOM-elementene og attributtene. Denne prosessen blir mer komplisert og tungvint når en bruker gjør endringer i visningen. Fordi utvikleren da trenger å tolke interaksjonene, slå dem sammen i modellen og oppdatere visningen.

Enveis databindingsdiagram

Bilde med tillatelse fra http://docs.angularjs.org

Derimot gjør AngularJS databindingen på en bedre og annerledes måte ved å håndtere synkroniseringen av data mellom modellen og DOM, og omvendt.

hvilken størrelse er iphone 8 pluss

To-veis data bindende diagram

Bilde med tillatelse fra http://docs.angularjs.org

Følgende er et enkelt eksempel som forklarer bindingen av en inngangsverdi til en

stikkord.

Name:

Hello, {{yourName}}!

Avhengighetsinjeksjon

AngularJS har et innebygd injektor-undersystem som gjør det enkelt for utviklere å utvikle, forstå og teste applikasjoner. Avhengighetsinjeksjonen i AngularJS er ansvarlig for å lage komponenter, håndtere hvordan de får tak i sine avhengigheter, og gjøre dem tilgjengelige for andre komponenter når det blir bedt om det.

Ved å gjøre bruk av avhengighetsinjeksjon, bringer AngularJS tradisjonelle server-side-tjenester til klientsiden webapplikasjoner, noe som resulterer i redusert belastning på backend og gjør webapplikasjonen mye lettere.

Hvis du vil få tilgang til kjernen av AngularJS-tjenester, trenger du å legge til en bestemt tjeneste som parameter. AngularJS vil automatisk legge merke til at du vil bruke den tjenesten, og vil gjøre en forekomst tilgjengelig for deg.



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

I tillegg til dette kan du definere dine egne tilpassede tjenester og gjøre dem tilgjengelige for injeksjon.

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'];

Maler

I AngularJS skrives en mal med HTML som inneholder Angular-spesifikke attributter og elementer. Ved å kombinere malen med informasjon fra kontrolleren og modellen, gjengir AngularJS den dynamiske visningen i nettlesere.

Nedenfor er vinklede elementer og attributter som kan brukes:

  • Filter: Formatering av data for visning gjøres av dette elementet.
  • Formkontroller: Den brukes til validering av brukerinngang.
  • Markup: For å binde uttrykk til elementer ved bruk av den dobbelte krøllete notasjonen {{}}.
  • Direktiv: Et element eller attributt som gjengir en gjenbrukbar DOM-komponent eller forlenger et eksisterende DOM-element.

Koden nedenfor viser en mal med direktiver og markering:

hvordan være god på digital kunst
{{buttonText}}

I et typisk program har malen CSS-, HTML- og Angular-direktiver i en enkelt HTML-fil (vanligvis index.html).

Testing

Siden JavaScript er dynamisk og tolkes med stor uttrykkskraft, men ikke tar nesten ingen hjelp fra kompilatoren. Derfor forstår AngularJS-teamet godt at enhver JavaScript-kode må gå gjennom med et sett med alvorlige tester. Så de har designet AngularJS fra grunnen av for å kunne testes, noe som gjør testing av webapplikasjonene dine så enkle som mulig.

AngularJS drar full nytte av avhengighetsinjeksjon, kommer forhåndsbuntet med mocks og oppmuntrer til adferdssynsseparasjon. For end-to-end-testing har AngularJS en ende-til-slutt-testløper, kalt Vinkelmåler, som forstår det indre arbeidet til AngularJS for å eliminere testflekke, og simulerer brukerinteraksjoner med applikasjonen din.

En annen type test i AngularJS er Enhetstest der du kan teste individuelle kodeenheter. Videre bygde Angular-teamet også en Chrome-utvidelse, kalt AngularJS Batarang , som lar utviklere enkelt oppdage ytelsesflaskehalser og lar dem feilsøke applikasjonene sine i nettleseren.

Ajeet Yadav er en profesjonell webutvikler, assosiert med wordpressintegration.com , et kjent webutviklingsselskap som tilbyr en høykvalitets Photoshop til WordPress-tema / malkonverteringstjeneste. Følg @Wordpress_INT på Twitter.