Hva er Controller in AngularJs?
En kontroller i AngularJs tar dataene fra visningen, behandler dataene og sender deretter dataene til visningen som vises til sluttbrukeren. Kontrolleren vil ha kjernevirksomhetslogikken din.
Kontrolleren vil bruke datamodellen, utføre den nødvendige behandlingen og deretter sende utdataene til visningen som igjen vises til sluttbrukeren.
I denne veiledningen vil du lære-
- Hva Controller gjør fra Angular perspektiv
- Hvordan bygge en grunnleggende kontroller
- Hvordan definere metoder i kontrolleren
- Bruke ng-controller i eksterne filer
- Kontrollerens hovedansvar er å kontrollere dataene som blir sendt til visningen. Omfanget og utsikten har toveiskommunikasjon.
- Egenskapene til visningen kan kalle "funksjoner" på omfanget. Videre kan hendelser på utsikten kalle "metoder" på omfanget. Kodebiten nedenfor gir et enkelt eksempel på en funksjon.
- Funksjonen ($ scope) som er definert når du definerer kontrolleren og en intern funksjon som brukes til å returnere sammenkoblingen av $ scope.firstName og $ scope.lastName.
- I AngularJS når du definerer en funksjon som en variabel, er den kjent som en metode.
- Data på denne måten overføres fra kontrolleren til omfanget, og deretter går dataene frem og tilbake fra omfanget til visningen.
- Omfanget brukes til å eksponere modellen for visningen. Modellen kan modifiseres via metoder definert i omfanget som kan utløses via hendelser fra visningen. Vi kan definere toveis modellbinding fra omfanget til modellen.
- Kontrollere bør ikke ideelt sett brukes til å manipulere DOM. Dette bør gjøres av direktivene som vi vil se senere.
- Beste praksis er å ha kontroller basert på funksjonalitet. For eksempel, hvis du har et skjema for inndata, og du trenger en kontroller for det, lager du en kontroller kalt "skjemakontroller".
- Vi legger til referanser til bootstrap CSS-stilark, som vil bli brukt i forbindelse med bootstrap-bibliotekene.
- Vi legger til referanser til angularjs-bibliotekene. Så nå, uansett hva vi gjør med angular.js fremover, blir det referert fra dette biblioteket.
- Vi legger til referanser til bootstrap-biblioteket for å gjøre nettsiden vår mer responsiv for visse kontroller.
- Vi har lagt til referanser til jquery-biblioteker som vil bli brukt til DOM-manipulering. Dette kreves av Angular fordi noe av funksjonaliteten i Angular er avhengig av dette biblioteket.
- Først adskiller vi filene våre i to mapper, slik det gjøres med alle vanlige webapplikasjoner. Vi har "CSS" -mappen. Den vil inneholde alle våre cascading stilarkfiler, og så vil vi ha "lib" -mappen som vil ha alle våre JavaScript-filer.
- Bootstrap.css-filen plasseres i CSS-mappen og brukes til å gi et godt utseende for nettstedet vårt.
- Angular.js er hovedfilen vår som ble lastet ned fra angularJS-nettstedet og oppbevart i lib-mappen vår.
- App.js-filen inneholder koden vår for kontrollerne.
- Bootstrap.js-filen brukes til å supplere bootstrap.cs-filen for å legge til bootstrap-funksjonalitet i webapplikasjonen.
- Jquery-filen vil bli brukt til å legge til DOM-manipulasjonsfunksjonalitet på nettstedet vårt.
Hva Controller gjør fra Angular perspektiv
Følgende er en enkel definisjon av bearbeiding av Angular JS Controller.
Hvordan bygge en grunnleggende kontroller
Før vi begynner med opprettelsen av en kontroller, må vi først ha vår grunnleggende HTML-sideoppsett på plass.
Kodebiten nedenfor er en enkel HTML-side som har tittelen "Event Registration" og har referanser til viktige biblioteker som Bootstrap, jquery og Angular.
Som standard vil kodebiten ovenfor være til stede i alle eksemplene våre, slik at vi bare kan vise den spesifikke angularJS-koden i de påfølgende delene.
For det andre, la oss se på filene og filstrukturen som vi skal begynne med så lenge kurset varer.
La oss se et eksempel på hvordan du bruker angular.js,
Det vi ønsker å gjøre her er bare å vise ordene "AngularJS" i både tekstformat og i en tekstboks når siden vises i nettleseren.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kode Forklaring:
- Den ng-appen ordet brukes for å betegne at denne søknad bør betraktes som en vinkel søknad. Alt som begynner med prefikset 'ng' er kjent som et direktiv. "DemoApp" er navnet på Angular.JS-applikasjonen.
- Vi har opprettet en div-tag, og i denne taggen har vi lagt til et ng-controller-direktiv sammen med navnet på Controller "DemoController". Dette gjør i utgangspunktet vår div tag mulighet til å få tilgang til innholdet i Demo Controller. Du må nevne kontrolleren under direktivet for å sikre at du har tilgang til funksjonaliteten som er definert i kontrolleren.
- Vi lager en modellbinding ved hjelp av ng-modelldirektivet. Hva dette gjør er at den binder tekstboksen for at opplæringsnavn skal være bundet til medlemsvariabelen "tutorialName".
- Vi lager en medlemsvariabel kalt "tutorialName" som vil bli brukt til å vise informasjonen som brukeren skriver i tekstboksen for opplæringsnavn.
- Vi lager en modul som skal festes til DemoApp-applikasjonen. Så denne modulen blir nå en del av applikasjonen vår.
- I modulen definerer vi en funksjon som tildeler standardverdien "AngularJS" til vår tutorialName-variabel.
Hvis kommandoen er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Siden vi tildelte variabelen tutorialName en verdi av "Angular JS", vises dette i tekstboksen og i tekstlinjen.
Hvordan definere metoder i kontrolleren
Normalt vil man definere flere metoder i kontrolleren for å skille forretningslogikken.
Anta for eksempel at hvis du ville ha kontrolleren din til å gjøre to grunnleggende ting,
- Utfør tillegget av to tall
- Gjør subtraksjonen av to tall
Du vil da ideelt sett lage to metoder inne i kontrolleren din, en for å utføre tillegg og den andre for å utføre subtraksjonen.
La oss se et enkelt eksempel på hvordan du kan definere egendefinerte metoder i en Angular.JS-kontroller. Kontrolleren vil ganske enkelt returnere en streng.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kode Forklaring:
- Her definerer vi bare en funksjon som returnerer en streng med "AngularJS". Funksjonen er knyttet til omfangsobjektet via en medlemsvariabel kalt tutorialName.
- Hvis kommandoen er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Bruke ng-controller i eksterne filer
La oss se på et eksempel på "HelloWorld" der all funksjonaliteten ble plassert i en enkelt fil. Nå er det på tide å plassere koden for kontrolleren i separate filer.
La oss følge trinnene nedenfor for å gjøre dette.
Trinn 1) I app.js-filen legger du til følgende kode for kontrolleren din
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Ovennevnte kode gjør følgende ting,
- Definer en modul kalt "app" som vil holde kontrolleren sammen med kontrollerfunksjonaliteten.
- Lag en kontroller med navnet "HelloWorldCtrl". Denne kontrolleren vil bli brukt til å ha en funksjonalitet for å vise en "Hello World" -melding.
- Scope-objektet brukes til å overføre informasjon fra kontrolleren til visningen. Så i vårt tilfelle vil omfangsobjektet brukes til å holde en variabel kalt "melding".
- Vi definerer den variable meldingen og tilordner verdien "Hello World" til den.
Trinn 2) Nå, i filen Sample.html, legg til en div-klasse som inneholder ng-controller-direktivet, og legg deretter til en referanse til medlemsvariabelen "melding"
Ikke glem å legge til en referanse til skriptfilen app.js som har kildekoden for kontrolleren din.
Event Registration Guru99 Global Event
{{message}}
Hvis koden ovenfor er angitt riktig, vil følgende utdata vises når du kjører koden din i nettleseren.
Produksjon:
Sammendrag
- Kontrollerens hovedansvar er å lage et omfangsobjekt som igjen blir overført til visningen
- Hvordan bygge en enkel kontroller ved hjelp av ng-app-, ng-controller- og ng-modelldirektivet
- Hvordan legge til egendefinerte metoder til en kontroller som kan brukes til å skille forskjellige funksjoner i en angularjs-modul.
- Kontrollere kan defineres i eksterne filer for å skille dette laget fra Vis-laget. Dette er vanligvis en god praksis når du lager webapplikasjoner.