angularjs directive with our first angularjs example
AngularJS-direktivet med det første AngularJS-eksemplet:
Vi hadde en kort introduksjon til AngularJS i vår forrige opplæring. Denne opplæringen vil forklare deg viktige fakta du trenger å vite om AngularJS.
AngularJS er et open source-rammeverk for nettapplikasjoner basert på JavaScript.
Den vedlikeholdes av Google Corporation og et stort samfunn. AngularJS er et svar på de forskjellige ulempene som oppstår for å formulere ensides applikasjoner.
Les gjennom vår Hele AngularJS-serien for inngående kunnskap om AngularJS konsept.
last ned Mongodb for Windows 10 64 bit
AngularJS-applikasjonsrammeverket fungerer som en mal og kan redusere utfordringene som står overfor under utviklingen av webapper.
Hva du vil lære:
- Oversikt over AngularJS
- Hvorfor bruke AngularJS?
- Hvordan bruke AngularJS?
- AngularJS-direktiver
- AngularJS Eksempel
- Konklusjon
- Anbefalt lesing
Oversikt over AngularJS
AngularJS ble utgitt av Google den 20thOktober 2010, og i dag har det blitt et viktig rammeverk for ulike applikasjoner for enkeltsidegrensesnitt.
Det er grunnen til at AngularJS har holdt bakken til tross for teknologisk utvikling i et voldsomt tempo. Det plattformgrensesnittbaserte systemet gjør det også mer effektivt.
AngularJS utfyller og fordeler Apache Cordova, som er et rammeverk som brukes til mobilapps på tvers av plattformer. Den har en visjon om å forbedre opplevelsen og forenkle testing og utvikling av webapper og gir et robust rammeverk for utviklingen av AngularJS-applikasjonen.
Hvorfor bruke AngularJS?
Nedenfor er de forskjellige funksjonene og årsakene til at AngularJS skal brukes i utviklingen av webapplikasjoner.
- Databinding: Plattformen gir automatisk synkronisering av data mellom modellen og vis innholdet, og som et resultat sparer det både tid og krefter i stor grad.
- Kontroller: Dette er JavaScript som er bundet til et bestemt omfang.
- Tjenester: AngularJS har mange innebygde tjenester. F.eks $ https
- Filtre: Dette hjelper til med å velge et delsett av elementer fra en matrise og returnerer det til en ny matrise.
- Direktiver: De er markører på DOM-elementer som attributter, CSS-elementer osv. Disse kan brukes som egendefinerte koder for HTML.
- Rute: Hjelper med å lage applikasjoner på en side. Det er spesifisert i URL-en etter # -tegnet og lar deg lage forskjellige URL-er for forskjellig innhold i applikasjonen din.
- MVC: Står for modell, visning og kontroller. Det er et designmønster og brukes til inndeling av en app i forskjellige deler, dvs. modell, visning og kontroller.
- Dyp lenking: Denne funksjonen i app-rammeverket hjelper deg med å kode tilstanden til applikasjonen i URL-en for bokmerke. Senere kan appen også gjenopprettes fra URL-en i samme tilstand.
- Avhengighetsinjeksjon: AngularJS har også et innebygd subsystem for avhengighetsinjeksjon som kan være nyttig for utvikleren å gjøre prosessen med utvikling og testing enklere, sammenhengende og grei.
- Omfang: Dette er gjenstandene som fungerer som et lim mellom kontrolleren og utsikten.
Hvordan bruke AngularJS?
Personlig tror jeg at det knapt er noe bedre front-end webapp-utviklingsrammeverk som er tilgjengelig i markedet i dag enn AngularJS.
Opplæringen om hvordan du bruker AngularJS er ikke frustrerende kompleks, og jeg syntes de var ganske enkle å følge også. Du kan dra nytte av et toveis bindingssystem, malfasiliteter, modularisering, avhengighetsinjeksjonssystem, AJAX-håndteringsfunksjon og de andre funksjonene i dette rammeverket.
Før du starter koding, bør du vite om MVC-konseptet (Model, View og Controller), 'Hello World' -skriptet og de forskjellige funksjonene i AngularJS.
AngularJS-direktiver
AngularJS gir deg et stort antall direktiver som gjør at du kan knytte de forskjellige HTML-elementene til applikasjonsdata. De er de grunnleggende attributtene som starter med nøkkelordet ng- .
Det viktigste direktivet du må ta med på en hvilken som helst side mens du bruker AngularJS, er gitt nedenfor.
ng-app -
Det er utgangspunktet for AngularJS-applikasjonen og må legges til ethvert element som omslutter resten av siden, som kroppsdelens element. AngularJS ser etter dette aspektet når siden lastes inn og har en tendens til å evaluere alle de forskjellige direktivene i koden automatisk.
Direktivene til AngularJS inkluderer:
# 1) ng-app :Dette brukes til å starte AngularJS-applikasjonen. Når nettsiden som inneholder AngularJS-applikasjonen er lastet inn, starter den automatisk applikasjonen ved å definere rotelementet. Bare ett ng-app-direktiv skal brukes i HTML-koden din.
Imidlertid, hvis det finnes mer enn ett ng-app-direktiv i HTML-koden, vil det første utseendet bli brukt.
Syntaks:
{body of the HTML code}
# 2) av varme :Dette brukes til å initialisere applikasjonen.
Det gir et sett med verdier som må assosieres med variabler for initialiseringsformål. Dette direktivet brukes ikke ofte da initialisering av variabler vanligvis skjer gjennom spesifikke funksjoner i prosjektet.
Syntaks:
# 3) ng-kontroller: Den brukes når initialisering av variabler må gjøres basert på en funksjon; dvs. at hver av variablene må initialiseres basert på funksjonslogikk. AngularJS påkaller funksjonen spesifisert i ng-kontrollerdirektivet med et objekt.
Syntaks:
app.controller(‘name of your function’,function($object){ Body of the controller/function});
# 4) ng-modell :Dette brukes til å binde verdiene til AngularJS til kontrollene som tilbys av applikasjonen. For å være spesifikk, vil dataene hentet av inngangen gjennom kontrolleren og modellen være bundet til visningen (w.r.t. MVC-modell) som vil bli presentert for brukeren.
Syntaks:
Your Variable to be binded : var app = angular.module('myApp', ['ngAnimate']);
ng-show og ng-hide: Disse kommandoene skjuler og viser elementene, som oppnås ved å stille inn CSS-visningsstil.
AngularJS lar deg også definere tilpassede direktiver. De brukes til å utvide funksjonaliteten til HTML og defineres ved hjelp av 'direktiv' -funksjonen. De erstatter ganske enkelt elementet som de er aktivert for.
AngularJS Cheat Sheet var en livredder for meg. Det finnes en rekke andre retningslinjer som du kan sjekke på Cheat Sheet. Du kan til og med lære hvordan du lager tilpassede direktiver ved bruk av AngularJS. Jeg fant alle instruksjonene og instruksjonene fra AngularJS-plattformen på Cheat Sheet for å forenkle mange problemer.
AngularJS Eksempel
Et enkelt AngularJS-eksempel kan skrives som følger:
Du må opprette en HTML-fil, For eksempel , angularjsexample.html som vist under.
Welcome {{helloTo.title}} to the world of Tutorialspoint!
angular.module('myapp', []) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });
I eksemplet ovenfor representerer manuset AngularJS JavaScript.
Du vil bli overrasket over å vite hvor mange apper du bruker daglig har blitt utviklet på AngularJS-plattformen.
Her er noen få navn:
- Vergen
- PayPal
- jetBlue
- Lego
- Opparbeidet
- Netflix
- Frilanser
- iStock
Det fremgår av navnene ovenfor som hvilken høyde du kan nå ved å lære å bruke dette rammeverket. Disse nettstedene er på toppen av spillet sitt, og en stor del av suksessen går definitivt til effektiviteten til nettstedene bare fordi de er utviklet på AngularJS.
Konklusjon
Hvis du ønsker å bygge og utvikle apper på en side for mobile eller til og med nettsteder, som hvordan jeg var en gang - så se ikke lenger.
AngularJS er en one-stop shop for deg, siden dette nettstedet hjelper og gjør utviklingen av applikasjoner mye mer behagelig og sammenhengende. Det er ikke bare bra for nybegynnere, men når du dykker dypere inn i det, vil du ha en tendens til å lære med erfaring og utvikle flotte apper.
I mellomtiden, i tilfelle du oppgraderer til nyere versjoner, trenger du ikke å gjøre mye arbeid. Bare ved å lære noen nye kommandoer og forstå nye justeringer, kan du også begynne å utvikle applikasjoner i de nye versjonene.
Se vår kommende veiledning for å lære mer om utvikling av enkeltsideprogrammer som bruker AngularJS.
PREV Opplæring | NESTE veiledning
Anbefalt lesing
- Bygg applikasjon med én side ved hjelp av AngularJS (veiledning med eksempel)
- AngularJS opplæring for absolutt nybegynnere (med installasjonsveiledning)
- Forskjellen mellom vinkelversjoner: vinkel mot vinkelJS
- In-Depth Eclipse Tutorials For Beginners
- 48 Top AngularJS intervjuspørsmål og svar [2021 LISTE]
- Protractor Testing Tool for End-to-End-testing av AngularJS-applikasjoner
- AWS Elastic Beanstalk Tutorial for Deploying .NET Web Application
- Hvordan teste Application Messaging Queue: IBM WebSphere MQ Intro Tutorial