Menu

AngularJS-direktivet med vores første AngularJS-eksempel

  • Vigtigste
  • Andet
  • AngularJS-direktivet med vores første AngularJS-eksempel

angularjs directive with our first angularjs example

AngularJS-direktivet med det første AngularJS-eksempel:

Vi havde en kort introduktion til AngularJS i vores tidligere tutorial. Denne tutorial forklarer dig de vigtige fakta, du har brug for at vide om AngularJS.

AngularJS er en open source-webapplikationsramme baseret på JavaScript.

Det vedligeholdes af Google Corporation og et stort samfund. AngularJS er et svar på de forskellige ulemper, der opstår for at formulere applikationer med en side.

Læs vores Hele AngularJS-serien til dybdegående viden om AngularJS koncept.

AngularJS-direktiv og eksempel

AngularJS-applikationsrammen fungerer som en skabelon og kan reducere de udfordringer, der står over for under udviklingen af ​​webapps.

Hvad du lærer:

Oversigt over AngularJS

AngularJS blev frigivet af Google den 20thOktober 2010, og i dag er det blevet en væsentlig ramme for forskellige applikationer med en enkelt grænseflade.

Det er grunden til, at AngularJS har holdt fast på trods af teknologisk udvikling i et voldsomt tempo. Det platformbaserede interface-baserede system gør det også mere effektivt.

AngularJS supplerer og fordeler Apache Cordova, som er en ramme, der bruges til mobilapps på tværs af platforme. Det har en vision om at forbedre oplevelsen og forenkle test og udvikling af webapps og giver en robust ramme for deres AngularJS applikationsudvikling.

Hvorfor bruge AngularJS?

Nedenfor er de forskellige funktioner og grunde til, at AngularJS skal bruges til udvikling af webapplikationer.

  1. Databinding: Platformen giver automatisk synkronisering af data mellem modellen og vis indholdet, og som et resultat sparer det både tid og kræfter i høj grad.
  2. Styring: Dette er JavaScript, der er bundet til et bestemt omfang.
  3. Tjenester: AngularJS har mange indbyggede tjenester. For eksempel $ https
  4. Filtre: Dette hjælper med at vælge et undersæt af emner fra en matrix og returnerer det til et nyt array.
  5. Direktiver: De er markører på DOM-elementer som attributter, CSS-elementer osv. Disse kan bruges som brugerdefinerede tags af HTML.
  6. Routing: Hjælper med at oprette applikationer til en enkelt side. Det er angivet i URL'en efter # -tegnet og giver dig mulighed for at oprette forskellige URL'er til andet indhold i din applikation.
  7. MVC: Står til model, visning og controller. Det er et designmønster og bruges til opdeling af en app i forskellige dele, dvs. model, visning og controller.
  8. Dyb sammenkædning: Denne funktion i app-rammen hjælper dig med at kode applikationens tilstand i URL'en til bogmærkning. Senere kan appen også gendannes fra URL'en i samme tilstand.
  9. Afhængighedsinjektion: AngularJS har også et indbygget subsystem til afhængighedsinjektion, som kan være nyttigt for udvikleren at gøre processen med udvikling og test nemmere, sammenhængende og ligetil.
  10. Anvendelsesområde: Dette er de objekter, der fungerer som et lim mellem controlleren og udsigten.

Sådan bruges AngularJS?

Personligt tror jeg, at der næppe findes nogen bedre front-end webapp, der udvikler rammer, der er tilgængelige på markedet i dag end AngularJS.

Selvstudierne om, hvordan man bruger AngularJS, er ikke frustrerende komplekse, og jeg fandt dem også ret lette at følge. Du kan drage fordel af et tovejs bindingssystem, skabelonfaciliteter, modularisering, afhængighedsindsprøjtningssystem, AJAX-håndteringsfunktion og de andre funktioner i denne ramme.

Inden kodning påbegyndes, skal du vide om MVC-konceptet (Model, View og Controller), scriptet 'Hello World' og de forskellige funktioner i AngularJS.

AngularJS-direktiver

AngularJS giver dig et stort antal direktiver der gør det muligt for dig at knytte de forskellige HTML-elementer til applikationsdata. De er de grundlæggende attributter, der starter med nøgleordet ng- .

Det vigtigste direktiv, som du skal medtage på enhver side, mens du bruger AngularJS, er angivet nedenfor.

ng-app -

Det er udgangspunktet for AngularJS-applikationen og skal føjes til ethvert element, der omslutter resten af ​​siden, ligesom elementet i kropsdelen. AngularJS ser efter dette aspekt, når siden indlæses og har tendens til automatisk at evaluere alle de forskellige direktiver i koden.

Direktiverne fra AngularJS inkluderer:

# 1) ng-app :Dette bruges til at starte AngularJS-applikationen. Når den webside, der indeholder AngularJS-applikationen, indlæses, bootstarter den automatisk applikationen ved at definere rodelementet. Der skal kun bruges et ng-app-direktiv i din HTML-kode.

Men hvis der findes mere end et ng-app-direktiv i HTML-koden, vil det første udseende blive brugt.

Syntaks:

{body of the HTML code}

# 2) af varme :Dette bruges til at initialisere applikationen.

Det giver et sæt værdier, der skal tilknyttes variabler til initialiseringsformål. Dette direktiv bruges ikke ofte, da initialisering af variabler normalt sker gennem specifikke funktioner i projektet.

Syntaks:

# 3) ng-controller: Det bruges, når initialisering af variabler skal foretages baseret på en funktion; dvs. at hver af variablerne skal initialiseres baseret på funktionslogik. AngularJS påberåber den funktion, der er angivet i ng-controller-direktivet med et objekt.

Syntaks:

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

# 4) ng-model :Dette bruges til at binde værdierne af AngularJS til de kontroller, der leveres af applikationen. For at være specifik vil de data, der hentes af input via controlleren og modellen, være bundet til den visning (w.r.t. MVC-model), der vil blive præsenteret for brugeren.

Syntaks:

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

ng-show og ng-hide: Disse kommandoer skjuler og viser elementerne, hvilket opnås ved at indstille CSS-skærmstil.

AngularJS giver dig også mulighed for at definere brugerdefinerede direktiver. De bruges til at udvide funktionaliteten af ​​HTML og defineres ved hjælp af 'direktivet' -funktionen. De erstatter simpelthen det element, som de er aktiveret for.

AngularJS Cheat Sheet var en livredder for mig. Der er en række andre retningslinjer, som du kan kontrollere på Cheat Sheet. Du kan endda lære at oprette brugerdefinerede direktiver ved hjælp af AngularJS. Jeg fandt alle instruktioner og direktiver fra AngularJS-platformen på Cheat Sheet for at forenkle mange problemer.

AngularJS Eksempel

Et simpelt AngularJS-eksempel kan skrives som følger:

Du skal oprette en HTML-fil, For eksempel , angularjsexample.html som vist nedenfor.

swf-filen åbnes ikke i krom

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

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

I ovenstående eksempel repræsenterer scriptet AngularJS JavaScript.

Du ville blive overrasket over at vide, hvor mange apps, du bruger dagligt, er blevet udviklet på AngularJS-platformen.

Her er et par navne:

  • The Guardian
  • PayPal
  • jetBlå
  • Lego
  • Upwork
  • Netflix
  • Freelancer
  • iStock

Det fremgår af ovenstående navne, hvilken højde du kan nå ved at lære at udnytte denne ramme. Disse sider er øverst i deres spil, og en stor del af deres succes går bestemt til effektiviteten af ​​siderne bare fordi de er blevet udviklet på AngularJS.

Konklusion

Hvis du ønsker at opbygge og udvikle apps til en side til mobile eller endda websteder, som hvordan jeg var en gang - så se ikke længere.

AngularJS er en one-stop-shop for dig, da dette websted hjælper og gør udviklingen af ​​applikationer meget mere behagelig og sammenhængende. Det er ikke kun godt for begyndere, men når du dyber dybere ned i det, vil du have tendens til at lære med erfaring og udvikle fantastiske apps.

I mellemtiden, hvis du opgraderer til nyere versioner, behøver du ikke gøre en stor indsats. Bare ved at lære et par nye kommandoer og forstå nye tweaks, kan du også begynde at udvikle applikationer i de nye versioner.

Se vores kommende tutorial for at vide mere om udvikling af enkeltsides webapplikationer ved hjælp af AngularJS.

PREV-vejledning | NÆSTE vejledning

Anbefalet læsning

^