Meny

AngularJS-direktivet med vårt första AngularJS-exempel

  • Huvud
  • Övrig
  • AngularJS-direktivet med vårt första AngularJS-exempel

angularjs directive with our first angularjs example

Prova Vårt Instrument För Att Eliminera Problem

AngularJS-direktivet med det första AngularJS-exemplet:

Vi hade en kort introduktion till AngularJS i vår tidigare handledning. Denna handledning kommer att förklara de viktiga fakta som du behöver veta om AngularJS.

AngularJS är ett open source-ramverk för webbapplikationer baserat på JavaScript.

Det underhålls av Google Corporation och ett stort samhälle. AngularJS är ett svar på de olika nackdelarna som uppstår för att formulera applikationer på en sida.

Läs igenom vår Hela AngularJS-serien för fördjupad kunskap om AngularJS-konceptet.

exempel på scenarier från slutet till slut

AngularJS-direktivet och exempel

AngularJS-applikationsramverk fungerar som en mall och kan minska de utmaningar som ställs inför utvecklingen av webbappar.

Vad du kommer att lära dig:

Översikt av AngularJS

AngularJS släpptes av Google den 20thOktober 2010, och idag har det blivit ett viktigt ramverk för olika applikationer på en sida.

Det är anledningen till att AngularJS har hållit sin mark trots teknisk utveckling i en rasande takt. Det plattformsgränssnittsbaserade systemet gör det också mer effektivt.

AngularJS kompletterar och gynnar Apache Cordova, vilket är ett ramverk som används för plattformsappar. Den har en vision att förbättra upplevelsen och förenkla testningen och utvecklingen av webbappar och ger en robust ram för deras AngularJS-applikationsutveckling.

Varför använda AngularJS?

Nedan listas de olika funktionerna och anledningarna till att AngularJS ska användas i webbapplikationsutvecklingen.

  1. Databindning: Plattformen ger automatisk synkronisering av data mellan modellen och visa innehållet och som ett resultat sparar den både tid och ansträngning till stor del.
  2. Kontroller: Dessa är JavaScript som är bundna till ett visst omfång.
  3. Tjänster: AngularJS har många inbyggda tjänster. T.ex $ https
  4. Filter: Detta hjälper till att välja en delmängd av objekt från en matris och returnerar den till en ny matris.
  5. Direktiv: De är markörer på DOM-element som attribut, CSS-element etc. Dessa kan användas som anpassade HTML-taggar.
  6. Rutt: Hjälper till att skapa applikationer på en sida. Det anges i webbadressen efter # -tecknet och låter dig skapa olika webbadresser för olika innehåll i din applikation.
  7. MVC: Står för modell, vy och styrenhet. Det är ett designmönster och används för uppdelning av en app i olika delar, dvs. modell, vy och styrenhet.
  8. Djuplänkning: Den här funktionen i appramverket hjälper dig att koda applikationens tillstånd i webbadressen för bokmärkning. Senare kan appen också återställas från URL i samma tillstånd.
  9. Beroende injektion: AngularJS har också ett inbyggt subsystem för beroendeinsprutning som kan vara till hjälp för utvecklaren att göra processen för utveckling och testning enklare, sammanhängande och okomplicerad.
  10. Omfattning: Det här är föremålen som fungerar som lim mellan styrenheten och utsikten.

Hur man använder AngularJS?

Personligen tror jag att det knappast finns någon bättre front-end webbapp som utvecklar ramverk som finns på marknaden idag än AngularJS.

Självstudierna om hur man använder AngularJS är inte frustrerande komplicerade, och jag tyckte att de också var ganska lätta att följa. Du kan dra nytta av ett tvåvägs bindningssystem, mallfaciliteter, modularisering, system för beroendeinsprutning, AJAX-hanteringsfunktion och de andra funktionerna i detta ramverk.

Innan kodning påbörjas bör du känna till MVC-konceptet (Model, View och Controller), 'Hello World' -skriptet och de olika funktionerna i AngularJS.

AngularJS-direktiv

AngularJS ger dig ett stort antal direktiv som gör att du kan associera de olika HTML-elementen med applikationsdata. De är de grundläggande attributen som börjar med nyckelordet ng- .

Det viktigaste direktivet som du måste inkludera på vilken sida som helst när du använder AngularJS ges nedan.

ng-app -

Det är startpunkten för AngularJS-applikationen och måste läggas till i alla element som omsluter resten av sidan, liksom kroppsdelelementet. AngularJS letar efter denna aspekt när sidan laddas och tenderar att utvärdera alla olika direktiv i koden automatiskt.

Direktiven från AngularJS inkluderar:

# 1) ng-app :Detta används för att starta AngularJS-applikationen. När webbsidan som innehåller AngularJS-applikationen laddas startas den automatiskt upp av applikationen genom att definiera rotelementet. Endast ett ng-app-direktiv bör användas i din HTML-kod.

Men om mer än ett direktiv om ng-app finns i HTML-koden, kommer det första utseendet att användas.

Syntax:

{body of the HTML code}

# 2) av värme :Detta används för att initialisera applikationen.

Det ger en uppsättning värden som måste associeras med variabler för initialiseringsändamål. Detta direktiv används inte ofta eftersom initialisering av variabler vanligtvis sker genom specifika funktioner inom projektet.

Syntax:

# 3) ng-controller: Den används när initialisering av variabler måste göras baserat på en funktion; dvs. var och en av variablerna måste initieras baserat på funktionslogik. AngularJS åberopar den funktion som anges i ng-controller-direktivet med ett objekt.

Syntax:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) ng-modell :Detta används för att binda värdena för AngularJS till de kontroller som tillhandahålls av applikationen. För att vara specifik kommer den data som hämtas av ingången via styrenheten och modellen att vara bunden till den vy (w.r.t. MVC-modell) som kommer att presenteras för användaren.

Syntax:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show och ng-hide: Dessa kommandon döljer och visar elementen, vilket uppnås genom att ställa in CSS-visningsstil.

Med AngularJS kan du också definiera anpassade direktiv. De används för att utöka HTML-funktionaliteten och definieras med funktionen ”direktiv”. De ersätter helt enkelt det element som de aktiveras för.

AngularJS Cheat Sheet var en livräddare för mig. Det finns ett antal andra riktlinjer som du kan kontrollera på fuskarket. Du kan även lära dig att bygga anpassade direktiv med hjälp av AngularJS. Jag hittade alla instruktioner och riktlinjer från AngularJS-plattformen på Cheat Sheet för att förenkla många problem.

AngularJS Exempel

Ett enkelt AngularJS-exempel kan skrivas enligt följande:

Du måste skapa en HTML-fil, Till exempel , angularjsexample.html enligt nedanstående.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

I exemplet ovan representerar manuset AngularJS JavaScript.

Du skulle bli förvånad över att veta hur många appar som du använder dagligen har utvecklats på AngularJS-plattformen.

Här är några namn:

  • Väktaren
  • PayPal
  • jetBlue
  • Lego
  • Upwork
  • Netflix
  • Frilansare
  • iStock

Av namnen ovan framgår det vilken höjd du kan nå genom att lära dig att använda denna ram. Dessa webbplatser är högst upp i sitt spel, och en stor del av deras framgång går definitivt till webbplatsernas effektivitet bara för att de har utvecklats på AngularJS.

Slutsats

Om du vill bygga och utveckla en-sida-appar för mobila eller till och med webbplatser, som jag var en gång - leta inte längre.

AngularJS är en one-stop shop för dig, eftersom den här webbplatsen hjälper och gör utvecklingen av applikationer mycket bekvämare och sammanhängande. Det är inte bara bra för nybörjare, men när du gräver djupare i det kommer du att tendera att lära med erfarenhet och utveckla fantastiska appar.

Om du uppgraderar till nyare versioner behöver du inte göra mycket ansträngningar. Bara genom att lära dig några nya kommandon och förstå nya tweaks kan du också börja utveckla applikationer i de nya versionerna.

Se vår kommande handledning för att lära dig mer om att utveckla webbsidor med en sida med AngularJS.

PREV-handledning | NÄSTA självstudie

Rekommenderad läsning

^