Hvad er AngularJS? - Lær versionerne af AngularJS med direktiver

• Oversigt over AngularJS

Oversigt over AngularJS

Hos Brat Tech LLC i 2009 udviklede udviklere Misko Hevery og Adam Abrons en AngularJS-ramme, hvorefter der opstod en revolution i frontend-udvikling og bygning af applikationer på én side. AngularJS er en javascript-ramme, der binder Html-elementer med javascript-objekter. Databehandling og afhængighedsinjektion er nogle af de førende funktioner i AngularJs, der sparer tid ved at skrive lange koder, der gør udviklere og browsere lettere. Hvordan det opnås, vil blive dybt forklaret, men lige nu husker du disse terminologier. I dette emne skal vi lære om AngularJS version.

Versioner af AngularJS

AngularJS er Angular 1.x-versionerne, og derefter udvikles Angular 2, som adskiller sig fra Angular 1.x. arbejder.

Hvorfor AngularJS version, og hvordan fungerer det?

AngularJS hjælper os med at udvikle interaktive applikationer på én side. Med applikationer på en side mener jeg, at den enkelt side, du har besøgt, indlæser alt andet indhold ved hjælp af javascript. Denne funktion hjælper applikationen med at være hurtig og effektiv.

Når vi bruger javascript og html til at bygge applikationer, bliver du nødt til at binde visningen til model ved hjælp af JS-funktioner og objekter. Men hvis du synes, at disse tovejs-bindinger i en praktisk industriel anvendelse bliver samme fremgangsmåde trættende med lange koder. Det er en af ​​de vigtigste grunde til, at der var behov for at lære og udvikle AngularJS.

Tid til at lære nogle grundlæggende koncepter, før du begynder at udvikle applikationer, hvor AngularJS er bygget på:

• Model: Modellen indeholder data, objekter og logik.
• Vis: Det er den visuelle præsentation af applikationen, der også kaldes en brugergrænseflade.
• Vis til model tovejs binding: Javascript-objektet, dvs. det objekt, du vil binde til en Html DOM til f.eks. En tekstboks, input eller eventuelle Html-tags, og vice versa kan let udføres ved hjælp af nogle foruddefinerede AngularJS-biblioteker.
• Controllers: Controllers er javascript-funktioner, der forbinder modellen og visningen.
• Tjenester: AngularJS-tjenester er javascript-funktioner, der udfører specifik opgave eller funktionalitet, som vedligeholdes og testes af javascript. Nogle af eksemplerne på tjenester er $ scope, $ http, $ rootScope.
• Udtryk: Udtryk bruges til at binde data med Html. Denne funktion kaldes også interpolation. Udtryk er skrevet med ((expression)) krøllede seler. Udtryk evalueres og kan skrives uden html-tags.
• Moduler: Moduler fungerer som en container, der indeholder forskellige dele af vinkelapplikationen, såsom controller, tjenester, direktiver osv.

Direktiver og anvendelsesområde

Lad os fokusere på nogle af de foruddefinerede direktiver, og hvordan de rent faktisk fungerer. Det meste af dette direktiv starter med 'ng' hentet fra Angular

1. Omfang

• Omfanget definerer det javascript-objekt, hvormed data kan være tilgængelige fra model til HTML. Omfang fungerer som et stik mellem de to.
• Nogle omfangstjenester er $ scope, $ rootScope. '$' definerer, at disse tjenester er foruddefineret og ikke kan ændres. Husk, HTML er store og små bogstaver, men AngularJS er store og små bogstaver, så $ Scope vil kaste en fejl som udefineret.
• Det kræves at deklarere disse i vores controller-funktion, og vinkelformet indsprøjter det automatisk.

2. ng-controller

• Dette direktiv bruges til at oprette et eksempel / objekt på den controller, gennem hvilken HTML DOM kommunikerer med den faktiske logik.
• HTML siger, at ethvert tag med et '-' ignoreres, mens du opretter Html DOM.
• Når DOM er oprettet, finder vinkeltolk et ng-controller-direktiv og opretter et eksempel på, at den bestemte controller også leverer en $ scope-tjeneste.
• Der kan være mange ng-controller på en enkelt HTML-side.

3. ng-app

• Dette direktiv fungerer som en container, der indeholder controllere, direktiver, filtre, udtryk osv. Det registrerer eller starter applikationen eller modulet.
• Der findes kun en ng-app i din Html. Under en ng-app kan der være mange ng-controller.

Dette instantierer et applikationsobjekt med $ rootScope-tjenesten.

• Således er $ rootScope-variabler / -funktioner tilgængelige i en komplet applikation.

4. ng-model

• ng-model bruges til at binde dataene fra html til modelobjekt. Det giver tovejs binding.

5. ng-if

• Sådan udføres betingede udsagn på Html-tags ng-if bruges. Hvis betingelsen er falsk, inkluderer DOM ikke denne div på DOM.

6. ng-bind

• I stedet for at bruge (()) til interpolering, kan ng-bind også bruges.

7. ng-deaktiveret

• Baseret på en betingelse kan et element i visningen deaktiveres.

8. ng-show

• Hvis den givne betingelse for ng-show er sand, vises det bestemte element på DOM.

9. ng-skjul

• Hvis den givne betingelse for ng-skjul er sand, forbliver det bestemte element skjult i DOM.

10. ng-gentag

• Det gentager det bestemte div eller spænd på Html med længden på den matrix eller den medfølgende liste.

11. ng-klik

• Ved klikbegivenhed på html-elementet udfører den den medfølgende funktionalitet eller opgave.

Tip: Den bedste måde at lære ethvert sprog på er at kode det. Så lad os se vores første kode.

Eksempler på AngularJS version

Her er nogle af nedenstående eksempler




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))



Produktion:

Fornavn: Joseph
Efternavn: Alex
Dit navn er: Joseph Alex

Der er nogle punkter, der skal fokuseres fra ovenstående kodningsuddrag:

• På linje 3 tilføjes en angular.min.js-fil på siden, der indlæser alle de nødvendige biblioteker til at køre AngularJS-applikationen.
• AngularJS har stort set 2 biblioteker angular.js og en komprimeret version af denne fil som angular.min.js.
• På linje 5 kan du se direktivet som ng-app, som ignoreres af Html, mens du opretter Html DOM og optages af AngularJS som et af dens direktiv for at starte applikationen.
• På linje 6, 7 ng-model bruges der binder teksten, du indtaster i tekstboksen til variablerne fname og lname. Husk, at disse variabler er store og små bogstaver.
• På linje 8 ser du udtrykket ((fname + ”“ + lname)), hvilken vinkel vil evaluere og vise de data, du indtaster i tekstbokse. Dette er kendt som interpolation.

Lad os undersøge med endnu et eksempel:



var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));



Fornavn:

Efternavn:

Kundenavn er ((customerName)) og alderen er ((customerAge))

I dette eksempel oprettes på linje 5 en app med navnet CustomerApp, som vil omfatte alle dele af applikationen. Helt næste linje oprettes en controller og får navnet som firstController. $ omfang erklæres som en funktionsparameter. AngularJS vil automatisk injicere det i applikationen til direkte brug. Udvikleren behøver ikke at oprette det eksplicit.

Denne funktion er kendt som afhængighedsinjektion. På en lignende måde bruges ng-controlleren til den samme controller under ng-app-mærket. Husk, at appens eller controllerens rækkevidde vil være, hvor op til div ender eller noget, du definerer en app eller controller i. I dette tilfælde kan du ikke få adgang til controlleren eller applikationen efter linje 16.

Anbefalede artikler

Dette er en guide til Hvad er AngularJS version. Her diskuterer vi versionerne af AngularJS med direktiver, rækkevidde og hvordan fungerer AngularJS. Du kan også se på de følgende artikler for at lære mere -

1. AngularJS Architecture
2. Vinkelformet JS-program
3. AngularJS-enhedstest
4. Karriere i AngularJS
5. Hvad er Angular 2?