Vad är AngularJS? - Lär dig versionerna av AngularJS med direktiv

• Översikt av AngularJS

Översikt av AngularJS

På Brat Tech LLC 2009 utvecklade utvecklarna Misko Hevery och Adam Abrons ett AngularJS-ramverk, varefter en revolution skedde i frontend-utvecklingen och byggde applikationer på en sida. AngularJS är ett javascript-ramverk, som binder Html-element med javascript-objekt. Databindning och beroende injektion är några av de ledande funktionerna i AngularJs som sparar tid på att skriva långa koder som gör utvecklare och webbläsare att arbeta lättare. Hur det uppnås kommer att förklaras djupt ytterligare men för närvarande kommer du bara ihåg dessa terminologier. I det här ämnet kommer vi att lära oss om AngularJS version.

Versioner av AngularJS

AngularJS är Angular 1.x-versionerna och därefter utvecklas Angular 2 som skiljer sig från Angular 1.x. Arbetar.

Varför AngularJS-version och hur fungerar det?

AngularJS hjälper oss att utveckla interaktiva applikationer på en sida. Med applikationer på en sida menar jag att den enskilda sidan som du besökte laddar allt annat innehåll med javascript. Denna funktion hjälper applikationen att vara snabb och effektiv.

När vi använder javascript och html för att bygga applikationer måste du binda vyn till modell genom att använda JS-funktioner och objekt. Men om du tror att dessa tvåvägsdata som binder i en praktisk industriell tillämpning blir samma tillvägagångssätt tråkigt med långa koder. Det är ett av de viktigaste skälen till att det fanns ett behov av att lära sig och utveckla AngularJS.

Dags att lära sig några grundläggande koncept innan du börjar utveckla applikationer där AngularJS bygger på:

• Modell: Modellen innehåller data, objekt och logik.
• Visa: Det är den visuella presentationen av applikationen som också kallas ett användargränssnitt.
• Visa till modell tvåvägsbindning: Javascript-objektet, dvs objektet du vill binda till en Html DOM för t.ex. en textbox, inmatning eller eventuella Html-taggar och vice versa kan göras enkelt genom att använda vissa fördefinierade AngularJS-bibliotek.
• Controllers: Controllers är javascriptfunktioner som förbinder modellen och vyn.
• Tjänster: AngularJS-tjänster är javascriptfunktioner som utför specifika uppgifter eller funktioner som underhålls och testas med javascript. Några av exemplet på tjänster är $ scope, $ http, $ rootScope.
• Uttryck: Uttryck används för att binda data med Html. Den här funktionen kallas också interpolering. Uttryck skrivs med ((expression)) lockiga hängslen. Uttryck utvärderas och kan skrivas utan HTML-taggar.
• Moduler: Moduler fungerar som en behållare som innehåller olika delar av vinkelapplikationen, t.ex. styrenhet, tjänster, direktiv etc.

Direktiv och tillämpningsområde

Låt oss fokusera på några av de fördefinierade direktiven och hur de faktiskt fungerar. Det mesta av detta direktiv börjar med 'ng' från Angular

1. Räckvidd

• Räckvidden definierar javascript-objektet med vilket data kan vara tillgängliga från modell till HTML. Scope fungerar som ett kontaktdon mellan de två.
• Vissa omfattningstjänster är $ scope, $ rootScope. '$' definierar att dessa tjänster är fördefinierade och inte kan ändras. Kom ihåg att HTML är skiftlägeskänsligt men AngularJS är skiftlägeskänsligt, så $ Scope kommer att kasta ett fel som odefinierat.
• Det är nödvändigt att deklarera dessa i vår regulatorfunktion och vinkel kommer att injicera den automatiskt.

2. ng-controller

• Detta direktiv används för att skapa en instans / objekt för kontrollenheten genom vilken HTML DOM kommer att kommunicera med den faktiska logiken.
• HTML säger att varje tagg med en '-' kommer att ignoreras när du skapar Html DOM.
• När DOM skapats vinklar tolkar hittar ett ng-controller-direktiv och skapar en instans av den specifika styrenheten som också tillhandahåller en $ scope-tjänst.
• Det kan finnas många ng-controller på en enda HTML-sida.

3. ng-app

• Detta direktiv fungerar som en behållare som innehåller styrenheter, direktiv, filter, uttryck osv. Det registrerar eller startar applikationen eller modulen.
• Det finns bara en ng-app i din HTML. Under en ng-app kan det finnas många ng-controller.

Detta aktiverar ett applikationsobjekt med $ rootScope-tjänst.

• Således är $ rootScope-variabler / -funktioner tillgängliga i en komplett applikation.

4. ng-modell

• ng-modell används för att binda data från html till modellobjekt. Det ger tvåvägsbindning.

5. ng-if

• För att köra villkorliga uttalanden på Html-taggar används ng-if. Om villkoret blir felaktigt inkluderar inte DOM den div på DOM.

6. ng-bind

• I stället för att använda (()) för interpolering kan ng-bindning också användas.

7. ng-inaktiverad

• Baserat på ett villkor kan ett element i vyn inaktiveras.

8. ng-show

• Om det givna villkoret för ng-show är sant visas det specifika elementet på DOM.

9. ng-dölja

• Om det givna villkoret för ng-hide är sant förblir det specifika elementet dold i DOM.

10. ng-repetera

• Det kommer att upprepa det specifika div eller spänningen på Html med längden på arrayen eller listan.

11. ng-klicka

• Vid klickhändelse på html-elementet utför den den medföljande funktionaliteten eller uppgiften.

Tips: Det bästa sättet att lära sig alla språk är att koda det. Så låt oss se vår första kod.

Exempel på AngularJS-version

Här är några av de exempel som ges nedan




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:

Förnamn: Joseph
Efternamn: Alex
Ditt namn är: Joseph Alex

Det finns några punkter att fokusera från kodningstycket ovan:

• På rad 3 läggs en angular.min.js-fil till på sidan som laddar alla bibliotek som krävs för att köra AngularJS-applikationen.
• AngularJS har huvudsakligen 2 bibliotek angular.js och en komprimerad version av denna fil som angular.min.js.
• På rad 5 kan du se direktivet som ng-app som ignoreras av Html medan du skapar Html DOM och tas upp av AngularJS som ett av dess direktiv för att starta applikationen.
• På rad 6, 7 används ng-modell som binder texten du kommer in i textrutan till variablerna fname och lname. Kom ihåg att dessa variabler är skiftlägeskänsliga.
• På rad 8 ser du uttrycket ((fname + ”“ + lname)) vilket vinkel kommer att utvärdera och visa data som du anger i textrutor. Detta kallas interpolering.

Låt oss utforska med ytterligare ett exempel:



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



Förnamn:

Efternamn:

Kundnamnet är ((customerName)) och åldern är ((customerAge))

I det här exemplet skapas på rad 5 en app med namnet CustomerApp som kommer att innehålla alla delar av applikationen. På nästa rad skapas en kontroller och får namnet som firstController. $ scope förklaras som en funktionsparameter. AngularJS kommer att injicera det automatiskt i applikationen för direkt användning, utvecklaren behöver inte skapa det uttryckligen.

Denna funktion kallas beroendeinjektion. På liknande sätt används ng-controller för samma styrenhet under ng-app-taggen. Kom ihåg att appens eller kontrollerns räckvidd kommer att vara där uppdelningen slutar eller något du definierar en app eller controller i. I det här fallet kan du inte komma åt styrenheten eller applikationen efter rad 16.

Rekommenderade artiklar

Detta är en guide till What is AngularJS version. Här diskuterar vi versionerna av AngularJS med direktiv, omfattning och hur fungerar AngularJS. Du kan också titta på följande artiklar för att lära dig mer -

1. AngularJS Architecture
2. Angular JS-applikation
3. AngularJS-enhetstestning
4. Karriär i AngularJS
5. Vad är Angular 2?