AngularJS Controllers med ng-Controller Exempel
James Hartman
Vad är Controller i AngularJS?
A Regulator i AngularJS tar data från vyn, bearbetar data och skickar sedan dessa data till vyn som visas för slutanvändaren. Controllern kommer att ha din kärnverksamhetslogik. Kontrollören kommer att använda datamodellen, utföra den nödvändiga behandlingen och sedan skicka utdata till vyn som i sin tur visas för slutanvändaren.
Vad gör Controller från Angulars perspektiv?
Följande är en enkel definition av hur AngularJS Controller fungerar:
- Den registeransvariges primära ansvar är att kontrollera de uppgifter som skickas till vyn. Omfattningen och utsikten har tvåvägskommunikation.
- Vyns egenskaper kan kalla "funktioner" på skopet. Dessutom kan händelser på vyn kalla "metoder" på omfattningen. Nedanstående kodavsnitt ger ett enkelt exempel på en funktion.
- Smakämnen function($scope) som definieras när styrenheten definieras och en intern funktion som används för att returnera sammankopplingen av $scope.firstName och $scope.lastName.
- In AngularJS, när du definierar en funktion som en variabel är den känd som en metod.
- Data passerar på detta sätt från den registeransvarige till scopet, och sedan passerar data fram och tillbaka från scopet till vyn.
- Omfattningen används för att exponera modellen för vyn. Modellen kan modifieras via metoder definierade i scopet som skulle kunna triggas via händelser från vyn. Vi kan definiera tvåvägsmodellbindning från omfattningen till modellen.
- Styrenheter bör helst inte användas för att manipulera DOM. Detta bör ske 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 kontrollenhet för det, skapa en kontrollenhet som heter "formulärkontrollant".
Hur man bygger en grundläggande styrenhet i AngularJS
Nedan följer stegen för att skapa en kontroller i AngularJS:
Steg 1) Skapa en grundläggande HTML-sida
Innan vi börjar med skapandet av en kontroller måste vi först ha vår grundläggande HTML-sidinställning på plats.
Nedanstående kodavsnitt är en enkel HTML-sida som har titeln "Event Registration" och har referenser till viktiga bibliotek som t.ex. Bootstrap, jquery och Angular.
- Vi lägger till referenser till bootstrap CSS-stilmallarna, som kommer att användas tillsammans med bootstrap-biblioteken.
- Vi lägger till referenser till angularjs-biblioteken. Så nu kommer vad vi än gör med angular.js framöver att refereras från det här biblioteket.
- Vi lägger till referenser till bootstrap-biblioteket för att göra vår webbsida mer responsiv 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 funktionaliteten i Angular är beroende av detta bibliotek.
Som standard kommer kodavsnittet ovan att finnas i alla våra exempel, så att vi bara kan visa den specifika angularJS-koden i de efterföljande avsnitten.
Steg 2) Kontrollera filerna och filstrukturen
För det andra, låt oss titta på våra filer och filstruktur som vi kommer att börja med under hela vår kurs.
- Först segregerar vi våra filer i 2 mappar som görs med alla vanliga webbapplikationer. Vi har mappen "CSS". Den kommer att innehålla alla våra överlappande stilmallsfiler, och sedan kommer vi att ha vår "lib"-mapp som kommer att ha alla våra JavaScript filer.
- Bootstrap.css-filen placeras i CSS-mappen och används för att lägga till ett bra utseende 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 kommer att innehålla vår kod för kontrollerna.
- Bootstrap.js-filen används för att komplettera bootstrap.cs-filen för att lägga till bootstrap-funktionalitet till vår webbapplikation.
- Jquery-filen kommer att användas för att lägga till DOM-manipulationsfunktioner på vår webbplats.
Steg 3) Använd AngularJS-kod för att visa utdata
Det vi vill göra här är bara att visa orden "AngularJS" i både textformat och i en textruta när sidan visas i webbläsaren. Låt oss se ett exempel på hur man använder angular.js för att göra detta:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoController', function($scope){
$scope.tutorialName = "Angular JS";
});
</script>
</body>
</html>
Kodförklaring:
- Smakämnen ng-app nyckelord används för att ange att denna applikation ska betraktas som en vinkelapplikation. Allt som börjar med prefixet 'ng' är känd som en Direktiven. "DemoApp" är namnet på vår Angular.JS-applikation.
- Vi har skapat en div-tagg och i denna tagg har vi lagt till ett ng-controller-direktiv tillsammans med namnet på vår Controller "DemoController". Detta gör i princip att vår div-tagg får tillgång till innehållet i Demo Controller. Du måste ange namnet på regulatorn enligt direktivet för att säkerställa att du kan komma åt den funktionalitet som definieras i regulatorn.
- Vi skapar en modellbindning med hjälp av ng-modelldirektivet. Vad detta gör är att det binder textrutan för Tutorial Name för att vara bunden 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 kommer att bifogas 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 ett standardvärde på "AngularJS" till vår tutorialName-variabel.
Om kommandot exekveras framgångsrikt kommer följande utdata att visas 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 ren textrad.
Hur man definierar metoder i AngularJS-kontroller
Normalt skulle man vilja definiera flera metoder i styrenheten för att separera affärslogiken.
Anta till exempel att om du vill ha din kontroller att göra två grundläggande saker,
- Lägg till 2 siffror
- Utför subtraktionen av 2 tal
Du skulle då helst skapa 2 metoder inuti din kontroller, en för att utföra additionen 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name :<input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
$scope.tutorialName = "Angular JS";
$scope.tName = function() {
return $scope.tName;
};
});
</script>
</body>
</html>
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 exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
AngularJS Controller med ng-Controller Exempel
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 regulatorn i separata filer.
Låt oss följa stegen nedan för att göra detta:
Steg 1) Lägg till följande kod för din handkontroll i filen app.js
angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
$scope.message = "Hello World"
});
Ovanstående kod gör följande:
- Definiera en modul som kallas "app" som kommer att hålla styrenheten tillsammans med styrenhetens funktionalitet.
- Skapa en kontroller med namnet "HelloWorldCtrl". Denna styrenhet kommer att användas för att ha en funktion för att visa ett "Hello World"-meddelande.
- Omfattningsobjektet används för att skicka information från regulatorn 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 variabelmeddelandet och tilldelar värdet "Hello World" till det.
Steg 2) Lägg nu till en div-klass i din Sample.html-fil som innehåller direktivet ng-controller och lägg sedan till en referens till medlemsvariabeln "meddelande"
Glöm inte heller att lägga till en referens till skriptfilen app.js som har källkoden för din kontroller.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Om ovanstående kod är korrekt inmatad kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Sammanfattning
- Regulatorns primära ansvar är att skapa ett scope-objekt som i sin tur skickas vidare till vyn
- Hur man bygger en enkel styrenhet med hjälp av direktiven ng-app, ng-controller och ng-modell
- Hur man lägger till anpassade metoder till en kontroller som kan användas för att separera olika funktioner inom en angularjs-modul.
- Kontroller kan definieras i externa filer för att separera detta lager från vylagret. Detta är normalt en bästa praxis när du skapar webbapplikationer.
