Share
AngularJS er en flott JavaScript rammeverk som har noen svært overbevisende funksjoner for ikke bare utviklere, men designere også! I denne opplæringen vil vi dekke hva jeg anser som de mest essensielle funksjonene, og hvordan de kan bidra til å gjøre ditt neste webprogram fantastisk.
For å få en ide om hva du kan gjøre med AngularJS, sjekk utvalget av AngularJS-elementer på Envato Market. Du kan finne et bilde cropper, en e-handel webapplikasjon, en JSON editor, og mye mer.
AngularJS-produkter på Envato Market AngularJS er en ny, kraftig, klient-side-teknologi som gir en måte å oppnå virkelig kraftige ting på en måte som omfavner og utvider HTML, CSS og JavaScript, samtidig som du skarper opp noen av sine skarpe mangler. Det er hva HTML ville ha vært, hadde det blitt bygget for dynamisk innhold.
I denne artikkelen vil vi dekke noen av de viktigste AngularJS-konseptene for å få det "store bildet". Det er mitt mål at etter å ha sett noen av disse funksjonene, vil du være spent nok til å gå og bygge noe morsomt med AngularJS.
Tenk på modellen din som single-source-of-truth for din søknad. Modellen din er hvor du går til å lese eller oppdatere noe i søknaden din.
Data-binding er sannsynligvis den kuleste og mest nyttige funksjonen i AngularJS. Det vil spare deg for å skrive en betydelig mengde boilerplate kode. En typisk webapplikasjon kan inneholde opptil 80% av sin kodebase, dedikert til å krysse, manipulere og lytte til DOM. Databindende gjør at denne koden forsvinner, slik at du kan fokusere på søknaden din.
Tenk på modellen din som single-source-of-truth for din søknad. Modellen din er hvor du går til å lese eller oppdatere noe i søknaden din. Databindingsdirektiver gir en projeksjon av modellen til søknadsvisningen. Denne projeksjonen er sømløs og skjer uten noen anstrengelse fra deg.
Tradisjonelt, når modellen endres, er utvikleren ansvarlig for å manuelt manipulere DOM-elementene og attributter som reflekterer disse endringene. Dette er en toveis gate. I en retning endrer modellen endringshastigheten i DOM-elementene. I det andre gjør endringer i DOM-elementet nødvendige forandringer i modellen. Dette er ytterligere komplisert av brukerinteraksjon, siden utvikleren er ansvarlig for å tolke samspillet, fusjonere dem til en modell og oppdatere visningen. Dette er en veldig manuell og tungvint prosess, som blir vanskelig å kontrollere, ettersom en applikasjon vokser i størrelse og kompleksitet.
Det må være en bedre måte! AngularJS 'toveis databindende håndterer synkroniseringen mellom DOM og modellen, og omvendt.
Her er et enkelt eksempel, som viser hvordan man binder en inngangsverdi til en element.
Hei, yourName!
Dette er ekstremt enkelt å sette opp, og nesten magisk ...
Det er viktig å innse at AngularJS på ingen måte manipulerer malen som strenger. Det er hele nettleseren DOM.
I AngularJS er en mal bare vanlig gammel HTML. HTML-ordforrådet er utvidet, for å inneholde instruksjoner om hvordan modellen skal projiseres i visningen.
HTML-maler blir analysert av nettleseren i DOM. DOM blir da inngangen til AngularJS-kompilatoren. AngularJS krysser DOM-malen for gjengivelsesinstruksjoner, som kalles direktiver. Samlet sett er direktiver ansvarlig for å sette opp datobindingen for søknadsvisningen.
Det er viktig å innse at AngularJS på ingen måte manipulerer malen som strenger. Inngangen til AngularJS er nettleser DOM og ikke en HTML-streng. Databindingene er DOM-transformasjoner, ikke strengkonsentasjoner eller innerhtml Endringer. Bruke DOM som inngang, i stedet for strenger, er den største differensieringen AngularJS har fra sin søskenramme. Ved hjelp av DOM er det som gjør at du kan forlenge direktivets ordforråd og bygge dine egne direktiver, eller til og med abstrahere dem til gjenbrukbare komponenter!
En av de største fordelene ved denne tilnærmingen er at den skaper en stram arbeidsflyt mellom designere og utviklere. Designere kan markere sin HTML som de normalt ville, og da utviklerne tar stafett- og krokfunksjonaliteten, via bindinger med svært liten innsats.
Her er et eksempel hvor jeg bruker ng-repeat Direktiv til å løse over Bilder array og fylle hva som egentlig er en img mal.
Funksjon AlbumCtrl ($ scope) scope.images = ["thumbnail": "img / image_01.png", "beskrivelse": "Bilde 01 beskrivelse", "thumbnail": "img / image_02.png" beskrivelse ":" Bilde 03 beskrivelse ", " miniatyrbilde ":" img / image_03.png "," beskrivelse ":" Bilde 03 beskrivelse ", " miniatyrbilde ":" img / image_04.png " : "Bilde 04 beskrivelse", "miniatyrbilde": "img / image_05.png", "beskrivelse": "Bilde 05 beskrivelse"];
Det er også verdt å nevne at AngularJS ikke tvinge deg til å lære en ny syntaks eller trekk ut maler fra søknaden din..
AngularJS inkorporerer de grunnleggende prinsippene bak det opprinnelige MVC-programvareutformingsmønsteret i hvordan det bygger web-applikasjoner på klientsiden.
MVC- eller modell-View-Controller-mønsteret betyr mange forskjellige ting for forskjellige mennesker. AngularJS implementerer ikke MVC i tradisjonell forstand, men heller noe nærmere MVVM (Model-View-ViewModel).
De modell er bare dataene i søknaden. De modell er bare ren gamle JavaScript-objekter. Det er ikke nødvendig å arve fra rammeklasser, pakke det i proxy objekter, eller bruk spesielle getter / setter metoder for å få tilgang til den. Det faktum at vi har å gjøre med vanilje JavaScript er en veldig fin funksjon, som skjærer ned på applikasjonspanna.
EN viewmodel er et objekt som gir spesifikke data og metoder for å opprettholde bestemte visninger.
De viewmodel er den $ omfang objekt som lever innenfor AngularJS-applikasjonen. $ omfang er bare et enkelt JavaScript-objekt med en liten API utviklet for å oppdage og kringkaste endringer i sin tilstand.
De kontrolleren er ansvarlig for å sette inn initial tilstand og utvidelse $ omfang med metoder for å kontrollere oppførsel. Det er verdt å merke seg at kontrolleren lagrer ikke tilstand og samhandler ikke med eksterne tjenester.
De utsikt er HTML som eksisterer etter at AngularJS har analysert og samlet HTML-en for å inkludere gjengitt markering og bindinger.
Denne divisjonen skaper et solid fundament for arkitekten din søknad. De $ omfang har en referanse til dataene, den kontrolleren definerer atferd, og utsikt håndterer oppsettet og avgir samhandling til kontrolleren å svare tilsvarende.
AngularJS har et innebygd subsystem for avhengighetsinjeksjon som hjelper utvikleren ved å gjøre applikasjonen enklere å utvikle, forstå og teste.
Dependency Injection (DI) gjør at du kan be om dine avhengigheter, heller enn å måtte lete etter dem eller lage dem selv. Tenk på det som en måte å si "Hei jeg trenger X", og DI er ansvarlig for å skape og gi det til deg.
For å få tilgang til kjernen AngularJS-tjenester, er det bare et spørsmål om å legge til den tjenesten som en parameter; AngularJS vil oppdage at du trenger den tjenesten og gi en forekomst for deg.
funksjon EditCtrl ($ scope, $ location, $ routeParams) // Noe smart her ...
Du kan også definere dine egne spesialtilpassede tjenester og gjøre dem tilgjengelige for injeksjon også.
Accentsconagua
kantete. modulen ('MyServiceModule', []). fabrikk ('varsle', ['$ vindu', funksjon (seier) returfunksjon (msg) win.alert (msg);;]); funksjon myController (scope, notifyService) scope.callNotify = funksjon (msg) notifyService (msg); ; myController. $ inject = ['$ scope', 'notify']; Direktiver er min personlige favorittfunksjon i AngularJS. Har du noen gang ønsket at nettleseren din ville gjøre nye triks for deg? Vel, nå kan det! Dette er en av mine favorittdeler av AngularJS. Det er også sannsynligvis det mest utfordrende aspektet av AngularJS.
Direktiver kan brukes til å lage egendefinerte HTML-koder som fungerer som nye, egendefinerte widgets. De kan også brukes til å "dekorere" elementer med oppførsel og manipulere DOM-attributter på interessante måter.
Her er et enkelt eksempel på et direktiv som lytter etter en hendelse og oppdaterer sin $ omfang, tilsvarende.
myModule.directive ("myComponent" -funksjonen (mySharedService) return restrict: 'E', kontroller: funksjon ($ scope, $ attrs, mySharedService) $ scope. $ on ('handleBroadcast' .message = 'Direktiv:' + mySharedService.message;);, erstatt: true, template: ''; ); Deretter kan du bruke dette tilpassede direktivet, slik som det.
Å lage din applikasjon som en sammensetning av diskrete komponenter gjør det utrolig enkelt å legge til, oppdatere eller slette funksjonalitet etter behov.
AngularJS-teamet føler veldig sterkt at en hvilken som helst kode som er skrevet i JavaScript, må komme med et sterkt sett med tester. De har designet AngularJS med testbarhet i tankene, slik at det gjør testing av dine AngularJS-applikasjoner like enkelt som mulig. Så det er ingen unnskyldning for ikke å gjøre det.
Gitt det faktum at JavaScript er dynamisk og tolket, i stedet for kompilert, er det ekstremt viktig for utviklere å vedta en disiplinert tankegang for å skrive tester.
AngularJS er skrevet helt fra grunnen for å kunne testes. Det kommer til og med med en ende-til-ende og enhets test runner oppsett. Hvis du vil se dette i aksjon, kan du gå gjennom vinkelsprosjektet på https://github.com/angular/angular-seed.
Når du har frøprosjektet, er det en cinch å kjøre testene mot det. Her ser utgangen ut:
API-dokumentasjonen er full av end-to-end tester som gjør en utrolig jobb med å illustrere hvordan en bestemt del av rammen skal fungere. Etter en stund fant jeg meg selv å gå rett til testene for å se hvordan noe virket, og så leser du kanskje resten av dokumentasjonen for å finne ut noe.
Vi har dekket seks av de mange AngularJS-funksjonene jeg elsker. Jeg tror at disse seks funksjonene er avgjørende for ikke bare å komme i gang med AngularJS, men også sette søknaden sammen på en måte som er vedlikeholdbar og utvidbar.
Nettstedet for AngularJS, http://angularjs.org, har mange arbeidseksempler og god dokumentasjon. Jeg anbefaler også å sjekke ut det fantastiske samfunnet på AngularJS-postlisten.
Fortell meg hva du tenker!
