Oversikt over AngularJS
På Brat Tech LLC i 2009 utviklet utviklerne Misko Hevery og Adam Abrons et AngularJS-rammeverk, hvoretter det skjedde en revolusjon i frontend-utvikling og bygging av en-sides applikasjoner. AngularJS er et javascript-rammeverk, som binder Html-elementer med javascript-objekter. Databehandling og avhengighetsinjeksjon er noen av de ledende funksjonene i AngularJs som sparer tid på å skrive lange koder som gjør utviklere og nettlesere lettere. Hvordan dette oppnås vil bli forklart nærmere, men foreløpig husker du disse terminologiene. I dette emnet skal vi lære om AngularJS versjon.
Versjoner av AngularJS
AngularJS er Angular 1.x-versjonene og etter det er Angular 2 utviklet som er forskjellig fra Angular 1.x. virker.
Hvorfor AngularJS versjon og hvordan fungerer det?
AngularJS hjelper oss med å utvikle interaktive applikasjoner på en side. Med enkeltsidesapplikasjoner mener jeg at den enkle siden du besøkte, vil laste inn alt annet innhold ved hjelp av javascript. Denne funksjonen hjelper applikasjonen til å være rask og effektiv.
Når vi bruker javascript og html for å bygge applikasjoner, må du binde visningen til modell ved å bruke JS-funksjoner og objekter. Men hvis du tror at disse toveis dataene som bindes i en praktisk industriell applikasjon, blir samme tilnærming kjedelig med lange koder. Det er en av de viktigste grunnene til at det var behov for å lære og utvikle AngularJS.
På tide å lære noen grunnleggende konsepter før du begynner å utvikle applikasjoner der AngularJS er bygd på:
- Modell: Modellen inneholder data, objekter og logikk.
- Vis: Det er den visuelle presentasjonen av applikasjonen som også kalles et brukergrensesnitt.
- Vis til modell toveisbinding: JavaScript-objektet, dvs. objektet du vil binde til en Html DOM for f.eks en tekstboks, inndata eller eventuelle Html-tagger, og omvendt kan gjøres enkelt ved å bruke noen forhåndsdefinerte AngularJS-biblioteker.
- Kontrollere: Kontrollere er javascript-funksjoner som forbinder modellen og utsikten.
- Tjenester: AngularJS-tjenester er javascript-funksjoner som utfører spesifikk oppgave eller funksjonalitet som vedlikeholdes og testes av javascript. Noen av eksemplene på tjenester er $ scope, $ http, $ rootScope.
- Uttrykk: Uttrykk brukes til å binde data med Html. Denne funksjonen er også kjent som interpolasjon. Uttrykk er skrevet med ((expression)) krøllete seler. Uttrykk blir evaluert og kan skrives uten HTML-tagger.
- Moduler: Moduler fungerer som en beholder som inneholder forskjellige deler av vinkelapplikasjonen som kontroller, tjenester, direktiver, etc.
Direktiv og omfang
La oss fokusere på noen av de forhåndsdefinerte direktiver og hvordan de faktisk fungerer. Det meste av dette direktivet starter med 'ng' hentet fra Angular
1. Omfang
- Omfanget definerer javascript-objektet som data kan være tilgjengelige fra modell til HTML med. Scope fungerer som en kontakt mellom de to.
- Noen omfangstjenester er $ omfang, $ rootScope. '$' definerer at disse tjenestene er forhåndsdefinerte og ikke kan endres. Husk at HTML er små og store bokstaver, men AngularJS er store og små bokstaver, så $ Scope vil kaste en feil som ikke definert.
- Det er påkrevd å erklære disse i vår kontrollfunksjon, og vinkelformet vil injisere den automatisk.
2. ng-kontroller
- Dette direktivet brukes til å lage en forekomst / objekt av kontrolleren som HTML DOM kommuniserer med den faktiske logikken.
- HTML sier at alle tagger med en '-' vil bli ignorert mens du oppretter Html DOM.
- Når DOM er opprettet, finner Angular tolk et ng-controller-direktiv og oppretter en forekomst av den bestemte kontrolleren som også tilbyr en $ scope-tjeneste.
- Det kan være mange ng-kontrollere på en enkelt HTML-side.
3. ng-app
- Dette direktivet fungerer som en beholder som inneholder kontrollere, direktiver, filtre, uttrykk, etc. Det registrerer eller starter applikasjonen eller modulen.
- Det finnes bare en ng-app i HTML-koden din. Under en ng-app kan det være mange ng-controller.
Dette instantierer et applikasjonsobjekt med $ rootScope-tjenesten.
- Dermed er $ rootScope-variabler / funksjoner tilgjengelige i en komplett applikasjon.
4. ng-modell
- ng-modell brukes til å binde dataene fra html til modellobjekt. Det gir toveis binding.
5. ng-if
- For å utføre betingede uttalelser på Html-tagger brukes ng-if. Hvis tilstanden blir falsk, inkluderer ikke DOM den div på DOM.
6. ng-bind
- I stedet for å bruke (()) til interpolering, kan ng-bind også brukes.
7. ng-deaktivert
- Basert på en betingelse, kan et element i visningen deaktiveres.
8. ng-show
- Hvis den gitte betingelsen for ng-show er sann, vises det aktuelle elementet på DOM.
9. ng-skjul
- Hvis den gitte betingelsen for ng-hide er sann, vil det bestemte elementet forbli skjult i DOM.
10. ng-gjenta
- Det vil gjenta bestemt divisjon eller spenn på HTML med lengden på matrisen eller listen som følger med.
11. ng-klikk
- Når du klikker på html-elementet, vil den utføre den oppgitte funksjonaliteten eller oppgaven.
Tips: Den beste måten å lære noe språk på er å kode det. Så la oss se vår første kode.
Eksempler på AngularJS versjon
Her er noen av eksemplene gitt nedenfor
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Produksjon:
Fornavn: Joseph
Etternavn: Alex
Ditt navn er: Joseph Alex
Det er noen punkter å fokusere ovenfra på kodebiten:
- På linje 3 legges det til en angular.min.js-fil på siden som vil laste inn alle nødvendige biblioteker for å kjøre AngularJS-applikasjonen.
- AngularJS har stort sett 2 biblioteker angular.js og en komprimert versjon av denne filen som angular.min.js.
- På linje 5 kan du se direktivet som ng-app som blir ignorert av Html mens du oppretter Html DOM og tatt opp av AngularJS som et av direktivene for å starte applikasjonen.
- På linje 6, 7 ng-modell brukes som vil binde teksten du vil legge inn i tekstboksen til variablene fname og lname. Husk at disse variablene er store og små bokstaver.
- På linje 8 ser du uttrykket ((fname + ”“ + lname)) som kantet vil evaluere og vise dataene du skriver inn i tekstbokser. Dette er kjent som interpolasjon.
La oss utforske med ett eksempel til:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Fornavn:
Etternavn:
Kundenavn er ((customerName)) og alderen er ((customerAge))
I dette eksemplet opprettes det på linje 5 en app med navnet CustomerApp som vil inkludere alle delene av applikasjonen. Helt neste linje opprettes en kontroller og får navn som firstController. $ scope erklæres som en funksjonsparameter. AngularJS vil injisere den automatisk i applikasjonen for direkte bruk, utvikleren trenger ikke å opprette den eksplisitt.
Denne funksjonen er kjent som avhengighetsinjeksjon. På en lignende måte brukes ng-kontrolleren for den samme kontrolleren under ng-app-taggen. Husk omfanget av appen eller kontrolleren vil være der opp til div slutter eller noe du definerer en app eller kontroller til. I dette tilfellet har du ikke tilgang til kontrolleren eller applikasjonen etter linje 16.
Anbefalte artikler
Dette er en guide til What is AngularJS versjon. Her diskuterer vi versjonene av AngularJS med direktiver, omfang og hvordan fungerer AngularJS. Du kan også se på følgende artikler for å lære mer -
- AngularJS Architecture
- Angular JS-applikasjon
- AngularJS-enhetstesting
- Karriere i AngularJS
- Hva er Angular 2?