Vad är Controller in AngularJs?
En styrenhet i AngularJs tar data från vyn, bearbetar data och skickar sedan data till den vy som visas för slutanvändaren. Controllern kommer att ha din kärnverksamhetslogik.
Styrenheten kommer att använda datamodellen, utföra den nödvändiga behandlingen och sedan skicka utdata till den vy som i sin tur visas för slutanvändaren.
I den här handledningen lär du dig-
- Vad gör Controller ur Angular perspektiv
- Hur man bygger en grundläggande styrenhet
- Hur man definierar metoder i Controller
- Använda ng-controller i externa filer
- Den registeransvariges huvudansvar är att kontrollera de data som skickas till vyn. Omfattningen och utsikten har tvåvägs kommunikation.
- Egenskaperna för vyn kan anropa "funktioner" i omfånget. Dessutom kan händelser i vyn anropa "metoder" på omfattningen. Nedanstående kodavsnitt ger ett enkelt exempel på en funktion.
- Funktionen ($ scope) som definieras när man definierar styrenheten och en intern funktion som används för att returnera sammankopplingen av $ scope.firstName och $ scope.lastName.
- I AngularJS när du definierar en funktion som en variabel är den känd som en metod.
- Data på detta sätt passerar från styrenheten till omfattningen och sedan passerar data fram och tillbaka från omfattningen till vyn.
- Omfattningen används för att exponera modellen för vyn. Modellen kan modifieras via metoder som definieras i omfånget som kan utlösas via händelser från vyn. Vi kan definiera tvåvägsmodellbindning från omfattningen till modellen.
- Styrenheter bör inte helst användas för att manipulera DOM. Detta bör göras genom de direktiv som vi kommer att se senare.
- Bästa praxis är att ha kontroller baserade på funktionalitet. Till exempel, om du har ett formulär för inmatning och du behöver en styrenhet för det, skapa en styrenhet som heter "formulärstyrenhet".
- Vi lägger till referenser till bootstrap CSS-formatmallar, som kommer att användas tillsammans med bootstrap-biblioteken.
- Vi lägger till referenser till angularjs-biblioteken. Så nu hänvisas till vad vi än gör med angular.js framöver från detta bibliotek.
- Vi lägger till referenser till bootstrap-biblioteket för att göra vår webbsida mer lyhörd för vissa kontroller.
- Vi har lagt till referenser till jquery-bibliotek som kommer att användas för DOM-manipulation. Detta krävs av Angular eftersom en del av funktionerna i Angular är beroende av detta bibliotek.
- Först separerar vi våra filer i två mappar som görs med alla konventionella webbapplikationer. Vi har mappen "CSS". Den innehåller alla våra kaskad stilarkfiler, och sedan kommer vi att ha vår "lib" -mapp som innehåller alla våra JavaScript-filer.
- Bootstrap.css-filen placeras i CSS-mappen och används för att lägga till en bra look och känsla för vår webbplats.
- Angular.js är vår huvudfil som laddades ner från angularJS-webbplatsen och förvarades i vår lib-mapp.
- App.js-filen innehåller vår kod för styrenheterna.
- Bootstrap.js-filen används för att komplettera filen bootstrap.cs för att lägga till bootstrap-funktionalitet i vår webbapplikation.
- Jquery-filen kommer att användas för att lägga till DOM-manipulationsfunktioner på vår webbplats.
Vad Controller gör ur Angular perspektiv
Nedan följer en enkel definition av bearbetning av Angular JS Controller.
Hur man bygger en grundläggande styrenhet
Innan vi börjar med att skapa en styrenhet måste vi först ha vår grundläggande HTML-sidkonfiguration på plats.
Kodavsnittet nedan är en enkel HTML-sida som har titeln "Event Registration" och har referenser till viktiga bibliotek som Bootstrap, jquery och Angular.
Som standard kommer ovanstående kodavsnitt att finnas i alla våra exempel, så att vi bara kan visa den specifika angularJS-koden i de efterföljande avsnitten.
För det andra ska vi titta på våra filer och filstrukturen som vi ska börja med under hela vår kurs.
Låt oss se ett exempel på hur man använder angular.js,
Vad vi vill göra här är att bara visa orden "AngularJS" i både textformat och i en textruta när sidan visas i webbläsaren.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kodförklaring:
- Den ng-app nyckelord används för att beteckna att denna ansökan bör betraktas som en vinkel tillämpning. Allt som börjar med prefixet 'ng' kallas ett direktiv. "DemoApp" är namnet på vår Angular.JS-applikation.
- Vi har skapat en div-tagg och i den här taggen har vi lagt till ett ng-controller-direktiv tillsammans med namnet på vår Controller "DemoController". Detta gör i princip vår div-tagg möjligheten att komma åt innehållet i Demo Controller. Du måste nämna styrenhetens namn enligt direktivet för att säkerställa att du har tillgång till den funktionalitet som definierats inom styrenheten.
- Vi skapar en modellbindning med hjälp av ng-modelldirektivet. Vad detta gör är att det binder textrutan för att självstudienamnet ska bindas till medlemsvariabeln "tutorialName".
- Vi skapar en medlemsvariabel som heter "tutorialName" som kommer att användas för att visa informationen som användaren skriver i textrutan för Tutorial Name.
- Vi skapar en modul som ska bifogas till vår DemoApp-applikation. Så den här modulen blir nu en del av vår applikation.
- I modulen definierar vi en funktion som tilldelar vårt standardvärde "AngularJS" till vår tutorialName-variabel.
Om kommandot utförs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Eftersom vi tilldelade variabeln tutorialName värdet "Angular JS" visas detta i textrutan och i den vanliga textraden.
Hur man definierar metoder i Controller
Normalt skulle man vilja definiera flera metoder i styrenheten för att separera affärslogiken.
Antag till exempel att om du ville låta din handkontroll göra två grundläggande saker,
- Utför tillägget av två nummer
- Utför subtraktion av två nummer
Du skulle då helst skapa två metoder inuti din kontroller, en för att utföra tillägget och den andra för att utföra subtraktionen.
Låt oss se ett enkelt exempel på hur du kan definiera anpassade metoder inom en Angular.JS-kontroller. Styrenheten returnerar helt enkelt en sträng.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kodförklaring:
- Här definierar vi bara en funktion som returnerar en sträng av "AngularJS". Funktionen är kopplad till scope-objektet via en medlemsvariabel som heter tutorialName.
- Om kommandot utförs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Använda ng-controller i externa filer
Låt oss titta på ett exempel på "HelloWorld" där all funktionalitet placerades i en enda fil. Nu är det dags att placera koden för styrenheten i separata filer.
Låt oss följa stegen nedan för att göra detta.
Steg 1) Lägg till följande kod i din app.js-fil för din controller
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Ovanstående kod gör följande saker,
- Definiera en modul som heter "app" som kommer att hålla styrenheten tillsammans med styrfunktionen.
- Skapa en styrenhet med namnet "HelloWorldCtrl". Denna kontroller kommer att användas för att kunna visa ett "Hello World" -meddelande.
- Scope-objektet används för att skicka information från styrenheten till vyn. Så i vårt fall kommer scope-objektet att användas för att hålla en variabel som kallas "meddelande".
- Vi definierar det variabla meddelandet och tilldelar det värdet "Hello World".
Steg 2) Lägg nu till en div-klass i din Sample.html-fil som innehåller ng-controller-direktivet och lägg sedan till en referens till medlemsvariabeln "meddelande"
Glöm inte att lägga till en referens till skriptfilen app.js som har källkoden för din controller.
Event Registration Guru99 Global Event
{{message}}
Om koden ovan anges korrekt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Sammanfattning
- Styrenhetens huvudansvar är att skapa ett scope-objekt som i sin tur skickas till vyn
- Hur man bygger en enkel styrenhet med direktiven ng-app, ng-controller och ng-modell
- Hur man lägger till anpassade metoder till en styrenhet som kan användas för att separera olika funktioner i en angularjs-modul.
- Styrenheter kan definieras i externa filer för att separera detta lager från View-lagret. Detta är normalt en bästa praxis när du skapar webbapplikationer.