Accentsconagua

3 grunner til å velge AngularJS for ditt neste prosjekt

Kode
Share

AngularJS er et relativt nytt JavaScript-rammeverk av Google, designet for å gjøre utviklingen din så enkelt som mulig. Det er mange rammer og plugins tilgjengelig. Som sådan kan det noen ganger være vanskelig å sile gjennom all støyen for å finne nyttige verktøy.

Her er tre grunner til at du kan velge AngularJS for ditt neste prosjekt.

1 - Det ble utviklet av Google

Angular er bygget og vedlikeholdt av dedikerte Google ingeniører.

Dette kan virke åpenbart, men det er viktig å huske at mange (ikke alle) rammer er laget av hobbyister i open source-samfunnet. Mens lidenskap og kjøring har smidd rammeverk, som Cappucino og Knockout, er Angular bygget og vedlikeholdt av dedikert (og svært talentfulle) Google ingeniører. Dette betyr at du ikke bare har et stort åpent fellesskap å lære av, men du har også dyktige, høyt tilgjengelige ingeniører som er opptatt av å hjelpe deg med å få dine svingete spørsmål besvart.

Dette er ikke Googles første forsøk på et JavaScript-rammeverk; De utviklet først sin omfattende Web Toolkit, som samler Java ned til JavaScript, og ble brukt av Google Wave-teamet i stor utstrekning. Med fremveksten av HTML5, CSS3 og JavaScript, innså Google at både websiden og back-end-språket var at nettet ikke var ment å være skrevet bare i Java.

AngularJS kom til å standardisere webapplikasjonsstrukturen og gi en fremtidig mal for hvordan applikasjoner på klientsiden skal utvikles.

Versjon 1.0 ble utgitt bare under 6 måneder siden (per desember 2012) og brukes av en rekke applikasjoner, alt fra hobby til kommersielle produkter. Vedtaket av AngularJS som et levedyktig rammeverk for utvikling av kundesiden blir raskt kjent med hele webutviklingssamfunnet.

Fordi AngularJS er bygd av Google, kan du være sikker på at du har å gjøre med effektiv og pålitelig kode som skaleres med prosjektet. Hvis du er ute etter et rammeverk med et solid fundament, er Angular ditt valg!

2 - Det er omfattende

Hvis du er kjent med prosjekter, som QUnit, Mocha eller Jasmine, så har du ingen problemer med å lære Angular's unit testing API.

Vinkelformet, ligner Ryggraden eller JavaScriptMVC, er en komplett løsning for rask utvikling i fronten. Ingen andre plugins eller rammer er nødvendige for å bygge en data-drevet webapplikasjon. Her er en oversikt over Angular's stand-out funksjoner:

  • Slapp av. RESTful handlinger blir raskt standard for kommunikasjon fra serveren til klienten. I en linje med JavaScript kan du raskt snakke med serveren og få de dataene du trenger for å samhandle med dine nettsider. AngularJS gjør dette til et enkelt JavaScript-objekt, som Modeller, følger MVVM-modellen (Model View View-Model).
  • MVVM til redning! Modeller snakker med ViewModel-objekter (gjennom noe som heter $ scope-objektet), som lytter etter endringer i modellene. Disse kan deretter leveres og gjengis av visninger, som er HTML som uttrykker koden din. Visninger kan dirigeres ved hjelp av $ routeProvider-objektet, slik at du kan doble linker og organisere visninger og kontrollører, og gjøre dem til navigerbare nettadresser. AngularJS gir også statsløse kontrollere, som initierer og kontrollerer $ omfang gjenstand.
  • Data Binding og Dependency Injection. Alt i MVVM-mønsteret kommuniseres automatisk over hele brukergrensesnittet når noe endres. Dette eliminerer behovet for wrappers, getters / setters eller klassedeklarasjoner. AngularJS håndterer alt dette, slik at du kan uttrykke dataene dine så enkelt som med JavaScript-primitive, som arrays, eller så komplisert som du ønsker, gjennom egendefinerte typer. Siden alt skjer automatisk, kan du be om dine avhengigheter som parametere i AngularJS-tjenestefunksjoner, i stedet for en gigant hoved() ring for å utføre koden din.
  • Utvider HTML. De fleste nettsteder bygget i dag er en gigantisk serie av
    merker med liten semantisk klarhet. Du må opprette omfattende og uttømmende CSS-klasser for å uttrykke hensikten med hvert objekt i DOM. Med Angular kan du bruke HTML som XML, noe som gir deg uendelige muligheter for tagger og attributter. Angular oppnår dette, via HTML-kompilatoren og bruken av direktiver for å utløse atferd basert på den nyopprettede syntaksen du skriver.
  • Gjør HTML til din mal. Hvis du er vant til mustache eller Hogan.js, så kan du quckly gripe brakets syntaks av Angular's templating motor, fordi det er bare HTML. Angular krysser DOM for disse malene, som inneholder de ovennevnte retningslinjene. Malerne sendes deretter til AngularJS-kompilatoren som DOM-elementer, som kan utvides, utføres eller gjenbrukes. Dette er nøkkelen, fordi nå har du rå DOM-komponenter, i stedet for strenge, som tillater direkte manipulering og utvidelse av DOM-treet.
  • Bedriftsnivåtesting. Som angitt ovenfor krever AngularJS ingen tilleggsrammer eller plugins, inkludert testing. Hvis du er kjent med prosjekter, som QUnit, Mocha eller Jasmine, så har du ingen problemer med å lære Angular's unit-testing API og Scenario Runner, som veileder deg gjennom å gjennomføre testene dine så nær selve produksjonsapplikasjonen som mulig.

Dette er de grunnleggende prinsippene som styrer AngularJS for å skape en effektiv, ytelsesdrevet og vedlikeholdsbar frontend-kodebase. Så lenge du har en kilde til lagring av data, kan AngularJS gjøre alt tungt løft på klienten, samtidig som du gir en rik og rask opplevelse for sluttbrukeren..

3 - Kom i gang i minutter

Å komme i gang med AngularJS er utrolig enkelt. Med noen attributter som er lagt til i HTML-en din, kan du få en enkel Angular app opp på under 5 minutter!

  1. Legg til ng-app direktiv til tag så kantet vet å kjøre på siden: 
     
    2.  
  2. Legg til vinkelen  
    3.  
  3. Legg til vanlig HTML. AngularJS-direktiver er tilgjengelige gjennom HTML-attributter, mens uttrykkene blir evaluert med dobbelt-brakettnotasjon: 
     
    Dagens aktiviteter
     
       
    •  Activity.name 
      •  
      
     
    4.  
 
De ng-kontrolleren Direktivet oppretter et navneområde, hvor vi kan plassere vårt Angular JavaScript for å manipulere dataene og evaluere uttrykkene i HTML-koden vår. ng-repeat er et Angular repeater-objekt, som instruerer Angular å fortsette å lage listelementer så lenge vi har aktiviteter som skal vises, og bruk dette 
  •  element som en mal for hvordan vi vil at alle skal se.
     
       
    1. Når du vil ta tak i noe fra Angular, hent dataene dine med en JavaScript-fil som inneholder en funksjon hvis navn tilsvarer kontrolleren du har skissert i HTML-koden din:
      2.  
     
    FunksjonListCtrl ($ omfang) $ scope.activities = ["name": "Wake up", "navn": "Borste tenner", "navn": "Dusj", "navn" "Ta med på mat", "navn": "Gå på jobb", "navn": "Skriv en nettsideartikkel", "navn": "Gå til treningsstudioet", "navn" Møt venner ", " navn ":" Gå til sengs "]; 
     
    Som nevnt tidligere lager vi en funksjon med samme navn som ng-kontrolleren direktivet, så vår side kan finne den tilsvarende vinkelfunksjonen for å initialisere og utføre koden vår med dataene vi ønsker å ta tak i. Vi passerer i $ omfang parameter for å få tilgang til malens aktiviteter liste som vi opprettet i vår HTML-visning. Vi gir deg et grunnleggende sett med aktiviteter med nøkkelen, Navn, svarende til aktivitets eiendom Navn som vi opplistet i notatboksen, og en verdi, som er en streng som representerer aktivitetene vi vil oppnå i dag.
     
       
    1. Mens denne applikasjonen er fullført, er den ikke altfor praktisk. De fleste webapplikasjoner inneholder mange data lagret på eksterne servere. Hvis du har dataene dine lagret på en server et sted, kan vi enkelt erstatte arrayet med en samtale fra Angular's AJAX API:
      2.  
     
    funksjon Activity $ scope.activities = data;
     
    Vi har rett og slett erstattet det innfødte JavaScript-arrayobjektet med hashes med en spesialisert HTTP GET-funksjon, levert av Angular API. Vi passerer i navnet på filen vi ser for å hente fra serveren (i dette tilfellet en JSON-fil med aktiviteter) og vi returneres et løfte fra Angular, mye på samme måte som løfte mønsteret fungerer i jQuery.
     
     
     Lær mer om løfter i jQuery her på Nettuts+. 
     
     
    Dette løftet kan da utføre vår suksess Fungerer når dataene er returnert, og alt vi må gjøre er å binde returdataene til våre aktiviteter, som som tidligere nevnt, ble gitt av avhengighetsinjeksjon via $ omfang parameter.
     
    En statisk oppgaveliste er fin, men den virkelige kraften stammer fra hvor lett vi kan manipulere siden uten å måtte sette opp en haug med JavaScript-funksjoner for å lytte og svare på brukerinteraksjoner. Tenk deg at vi må sortere aktivitetslisten vår alfabetisk. Vel, vi legger ganske enkelt til en rullegardinvelger slik at brukeren kan sortere listen: 
    Sortere:
     
     
    Legg til modell Direktiv til rullegardinmenyen:
     
    
							
      

						
      •