AngularJS kontrollerid koos ng-Controlleriga Näide

Mis on AngularJS-i kontroller?

A kontroller AngularJS-is võtab andmed vaatest, töötleb andmeid ja saadab need seejärel lõppkasutajale kuvatavasse vaatesse. Kontrolleril on teie põhiline äriloogika. Kontroller kasutab andmemudelit, teostab vajaliku töötlemise ja edastab seejärel väljundi vaatesse, mis omakorda kuvatakse lõppkasutajale.

Mida kontroller Angulari vaatenurgast teeb?

Järgmine on AngularJS-kontrolleri töö lihtne määratlus:

Vastutava töötleja esmane kohustus on kontrollida vaatesse edastatavaid andmeid. Ulatusel ja vaatel on kahepoolne suhtlus.
Vaate atribuudid võivad kutsuda ulatuse "funktsioone". Lisaks võivad vaates olevad sündmused nimetada ulatuse "meetodeid". Allpool olev koodilõik annab funktsiooni lihtsa näite.

. funktsioon ($scope) mis määratletakse kontrolleri ja sisemise funktsiooni määratlemisel, mida kasutatakse väärtuste $scope.firstName ja $scope.lastName konkatenatsiooni tagastamiseks.
In AngularJS, kui defineerite funktsiooni muutujana, nimetatakse seda meetodiks.

Andmed liiguvad sel viisil vastutavast töötlejast ulatusse ja seejärel edasi-tagasi ulatust vaatesse.
Ulatust kasutatakse mudeli kuvamiseks. Mudelit saab muuta ulatuses määratletud meetodite abil, mida saab käivitada vaate sündmuste kaudu. Saame määratleda kahesuunalise mudeli sidumise ulatusest mudelini.
DOM-i manipuleerimiseks ei tohiks ideaaljuhul kasutada kontrollereid. Seda tuleks teha direktiividega, mida me hiljem näeme.
Parim tava on, et kontroller põhineb funktsionaalsusel. Näiteks kui teil on sisestamiseks vorm ja vajate selleks kontrollerit, looge kontroller nimega "vormikontroller".

Kuidas luua AngularJS-is põhikontroller

Allpool on toodud juhised AngularJS-is kontrolleri loomiseks.

Samm 1) Looge tavaline HTML-leht

Enne kontrolleri loomisega alustamist peame esmalt paika panema oma põhilise HTML-lehe seadistuse.

Allolev koodilõik on lihtne HTML-leht, mille pealkiri on "Sündmuse registreerimine" ja mis sisaldab viiteid olulistele raamatukogudele, nagu Bootstrap, jquery ja Angular.

Lisame viited bootstrap CSS-i stiilitabelitele, mida kasutatakse koos alglaadimise teekidega.
Lisame viited angularjs'i teekidele. Nüüd viidatakse sellest teegist, mida iganes me angular.js-iga teeme.
Lisame viited bootstrap teegile, et muuta meie veebileht teatud juhtelementide jaoks paremini tundlikuks.
Oleme lisanud viited jquery teekidele, mida kasutatakse DOM-i manipuleerimiseks. Seda nõuab Angular, kuna osa Angulari funktsioone sõltub sellest teegist.

Vaikimisi on ülaltoodud koodilõik olemas kõigis meie näidetes, nii et saame järgmistes jaotistes näidata ainult konkreetset angularJS-koodi.

Samm 2) Kontrollige faile ja failistruktuuri

Teiseks vaatame oma faile ja failistruktuuri, millega alustame kogu kursuse jooksul.

Esmalt eraldame oma failid kahte kausta, nagu seda tehakse kõigi tavaliste veebirakendustega. Meil on kaust "CSS". See sisaldab kõiki meie kaskaadlaadilehe faile ja siis on meil kaust "lib", milles on kõik meie JavaScript faile.
Fail bootstrap.css paigutatakse CSS-i kausta ja seda kasutatakse meie veebisaidile hea välimuse ja tunnetuse lisamiseks.
Angular.js on meie peamine fail, mis laaditi alla saidilt angularJS ja mida hoiti meie lib kaustas.
Fail app.js sisaldab meie kontrollerite koodi.
Faili bootstrap.js kasutatakse faili bootstrap.cs täiendamiseks, et lisada meie veebirakendusele bootstrap-funktsioon.
Jquery-faili kasutatakse DOM-i manipuleerimise funktsioonide lisamiseks meie saidile.

Samm 3) Kasutage väljundi kuvamiseks AngularJS-koodi

Me tahame siin lihtsalt kuvada sõnad "AngularJS" nii tekstivormingus kui ka tekstikastis, kui lehte brauseris vaadatakse. Vaatame näidet selle kohta, kuidas selleks kasutada faili angular.js.

<!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>

Koodi selgitus:

. ng-rakendus märksõna kasutatakse tähistamaks, et seda rakendust tuleks käsitleda nurgarakendusena. Kõik, mis algab eesliitega "ng" on tuntud kui Direktiivi. „DemoApp” on meie rakendusele Angular.JS antud nimi.
Oleme loonud div sildi ja sellesse sildisse oleme lisanud ng-kontrolleri direktiivi koos meie kontrolleri nimega "DemoController". Põhimõtteliselt võimaldab see meie div-sildil juurdepääsu demokontrolleri sisule. Peate mainima direktiivi alusel vastutava töötleja nime, et tagada juurdepääs kontrolleris määratletud funktsioonidele.
Loome ng-mudeli direktiivi abil siduva mudeli. See seob õpetuse nime tekstikasti liikmemuutujaga tutorialName.
Loome liikmemuutuja nimega "tutorialName", mida kasutatakse teabe kuvamiseks, mille kasutaja sisestab õpetuse nimetuse tekstikasti.
Loome moodulit, mis lisatakse meie DemoApp rakendusele. Seega saab sellest moodulist nüüd osa meie rakendusest.
Moodulis defineerime funktsiooni, mis määrab meie tutorialName muutujale vaikeväärtuse AngularJS.

Kui käsk on edukalt täidetud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Kuna määrasime muutujale tutorialName väärtuse Angular JS, kuvatakse see tekstikastis ja lihtteksti real.

Kuidas defineerida meetodeid AngularJS-kontrollerites

Tavaliselt soovitakse äriloogika eraldamiseks kontrolleris määratleda mitu meetodit.

Oletame näiteks, et kui soovite, et teie kontroller teeks kahte põhitoimingut,

Tehke 2 numbri liitmine
Tehke 2 arvu lahutamine

Seejärel loote ideaaljuhul oma kontrolleris kaks meetodit, millest üks lisab ja teine lahutab.

Vaatame lihtsat näidet selle kohta, kuidas saate Angular.JS-kontrolleris kohandatud meetodeid määratleda. Kontroller tagastab lihtsalt stringi.

<!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>

Koodi selgitus:

Siin määratleme lihtsalt funktsiooni, mis tagastab stringi "AngularJS". Funktsioon on lisatud ulatuse objektile liikmemuutuja kaudu nimega tutorialName.
Kui käsk on edukalt täidetud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

AngularJS kontroller koos ng-Controlleriga Näide

Vaatame "HelloWorldi" näidet, kus kõik funktsioonid on paigutatud ühte faili. Nüüd on aeg paigutada kontrolleri kood eraldi failidesse.

Selleks järgime alltoodud samme.

Step 1) Lisage faili app.js oma kontrolleri jaoks järgmine kood

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

Ülaltoodud kood teeb järgmist.

Määrake moodul nimega "rakendus", mis hoiab kontrollerit koos kontrolleri funktsioonidega.
Looge kontroller nimega "HelloWorldCtrl". Seda kontrollerit kasutatakse funktsiooni „Tere maailm” kuvamiseks.
Ulatusobjekti kasutatakse teabe edastamiseks kontrollerist vaatesse. Nii et meie puhul kasutatakse ulatuseobjekti muutuja nimega "message" hoidmiseks.
Defineerime muutuja sõnumi ja omistame sellele väärtuse "Tere maailm".

Step 2) Nüüd lisage oma Sample.html faili klass div, mis sisaldab käskkirja ng-controller ja seejärel lisage viide liikme muutujale "message".

Ärge unustage lisada ka viidet skriptifailile app.js, millel on teie kontrolleri lähtekood.

<!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>

Kui ülaltoodud kood on õigesti sisestatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

kokkuvõte

Kontrolleri esmane kohustus on luua ulatusobjekt, mis omakorda edastatakse vaatele
Kuidas luua lihtsat kontrollerit, kasutades ng-app, ng-controller ja ng-modell direktiive
Kuidas lisada kontrollerile kohandatud meetodeid, mida saab kasutada angularjs-mooduli erinevate funktsioonide eraldamiseks.
Kontrollereid saab määrata välistes failides, et eraldada see kiht vaatekihist. Tavaliselt on see veebirakenduste loomisel parim tava.

Mis on AngularJS-i kontroller?

Mida kontroller Angulari vaatenurgast teeb?

Kuidas luua AngularJS-is põhikontroller

SEOTUD ARTIKLID

Kuidas defineerida meetodeid AngularJS-kontrollerites

AngularJS kontroller koos ng-Controlleriga Näide

kokkuvõte

Tellige uudiskiri