Esimerkki AngularJS-ohjaimet ng-Controllerilla

Mikä on ohjain AngularJS:ssä?

A ohjain AngularJS ottaa tiedot näkymästä, käsittelee tiedot ja lähettää sitten tiedot loppukäyttäjälle näytettävään näkymään. Controllerilla on ydinliiketoimintalogiikkasi. Ohjain käyttää tietomallia, suorittaa vaaditun käsittelyn ja välittää lähdön sitten näkymään, joka puolestaan näkyy loppukäyttäjälle.

Mitä ohjain tekee Angularin näkökulmasta?

Seuraava on yksinkertainen määritelmä AngularJS-ohjaimen toiminnasta:

Rekisterinpitäjän ensisijainen vastuu on hallita näkymään siirtyviä tietoja. Laajuudella ja näkemyksellä on kaksisuuntainen viestintä.
Näkymän ominaisuudet voivat kutsua laajuuden "funktioita". Lisäksi näkymän tapahtumat voivat kutsua laajuuden "menetelmiä". Alla oleva koodinpätkä antaa yksinkertaisen esimerkin funktiosta.

- toiminto ($scope) joka määritetään määritettäessä säädintä ja sisäistä funktiota, jota käytetään palauttamaan $scope.firstName ja $scope.lastName ketjutus.
In angularjs, kun määrität funktion muuttujaksi, sitä kutsutaan menetelmäksi.

Data siirtyy tällä tavalla rekisterinpitäjältä laajuuteen, ja sitten tiedot siirtyvät edestakaisin laajuudesta näkymään.
Tarkkailualuetta käytetään mallin paljastamiseen näkymään. Mallia voidaan muokata laajuudessa määritellyillä menetelmillä, jotka voidaan laukaista näkymän tapahtumien kautta. Voimme määritellä kaksisuuntaisen mallin sidoksen laajuudesta malliin.
Ohjaimia ei tulisi ihanteellisesti käyttää DOM:n käsittelyyn. Tämä pitäisi tehdä direktiiveillä, joita näemme myöhemmin.
Paras käytäntö on, että ohjaimet perustuvat toimivuuteen. Jos sinulla on esimerkiksi lomake syötettä varten ja tarvitset sitä varten ohjaimen, luo ohjain nimeltä "lomakeohjain".

Perusohjaimen rakentaminen AngularJS:ssä

Alla on vaiheet ohjaimen luomiseksi AngularJS:ssä:

Vaihe 1) Luo perus-HTML-sivu

Ennen kuin aloitamme ohjaimen luomisen, meidän on ensin oltava HTML-perussivun asetukset kunnossa.

Alla oleva koodinpätkä on yksinkertainen HTML-sivu, jonka otsikko on "Tapahtumien rekisteröinti" ja jossa on viittauksia tärkeisiin kirjastoihin, kuten Bootstrap, jquery ja Angular.

Lisäämme viittauksia bootstrap CSS -tyylisivuihin, joita käytetään bootstrap-kirjastojen yhteydessä.
Lisäämme viittauksia angularjs-kirjastoihin. Joten nyt kaikki, mitä teemme angular.js:n kanssa jatkossa, viitataan tästä kirjastosta.
Lisäämme viittauksia bootstrap-kirjastoon, jotta verkkosivumme reagoisi paremmin tietyille säätimille.
Olemme lisänneet viittauksia jquery-kirjastoihin, joita käytetään DOM-käsittelyyn. Angular vaatii tätä, koska osa Angularin toiminnoista on riippuvaisia tästä kirjastosta.

Oletuksena yllä oleva koodinpätkä on läsnä kaikissa esimerkeissämme, jotta voimme näyttää vain tietyn angularJS-koodin seuraavissa osissa.

Vaihe 2) Tarkista tiedostot ja tiedostorakenne

Toiseksi tarkastellaan tiedostojamme ja tiedostorakennetta, joista aiomme aloittaa kurssimme ajan.

Ensin erottelemme tiedostomme kahteen kansioon, kuten tehdään minkä tahansa tavanomaisen verkkosovelluksen kanssa. Meillä on "CSS"-kansio. Se sisältää kaikki peräkkäiset tyylisivutiedostomme, ja sitten meillä on "lib"-kansiomme, jossa on kaikki JavaKäsikirjoitus tiedostoja.
Bootstrap.css-tiedosto sijoitetaan CSS-kansioon ja sitä käytetään lisäämään sivustollemme hyvän ulkoasun ja tuntuman.
Angular.js on päätiedostomme, joka ladattiin angularJS-sivustolta ja säilytettiin lib-kansiossamme.
App.js-tiedosto sisältää koodimme ohjaimille.
Bootstrap.js-tiedostoa käytetään täydentämään bootstrap.cs-tiedostoa bootstrap-toiminnon lisäämiseksi verkkosovellukseemme.
Jquery-tiedostoa käytetään lisäämään DOM-käsittelytoimintoja sivustollemme.

Vaihe 3) Käytä AngularJS-koodia tulosteen näyttämiseen

Haluamme tässä vain näyttää sanat "AngularJS" sekä tekstimuodossa että tekstiruudussa, kun sivua tarkastellaan selaimessa. Katsotaanpa esimerkkiä angular.js:n käyttämisestä tähän:

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

Koodin selitys:

- ng-app avainsanaa käytetään osoittamaan, että tätä sovellusta tulisi pitää kulmasovelluksena. Kaikki, mikä alkaa etuliitteellä 'ng' tunnetaan nimellä Direktiivi. "DemoApp" on Angular.JS-sovelluksellemme annettu nimi.
Olemme luoneet div-tunnisteen ja tähän tagiin olemme lisänneet ng-controller-direktiivin sekä ohjaimemme nimen "DemoController". Pohjimmiltaan tämä tekee div-tagistamme mahdollisuuden käyttää Demo-ohjaimen sisältöä. Sinun on mainittava direktiivin mukainen ohjaimen nimi varmistaaksesi, että pääset käyttämään ohjaimessa määritettyjä toimintoja.
Luomme mallisidontaa käyttämällä ng-model-direktiiviä. Tämä tarkoittaa, että se sitoo opetusohjelman nimen tekstiruudun jäsenmuuttujaan "tutorialName".
Luomme jäsenmuuttujan nimeltä "tutorialName", jota käytetään näyttämään tiedot, jotka käyttäjä kirjoittaa Tutorial Name -tekstiruutuun.
Olemme luomassa moduulia, joka liitetään DemoApp-sovellukseemme. Joten tästä moduulista tulee nyt osa sovellustamme.
Moduulissa määritämme funktion, joka määrittää oletusarvon "AngularJS" tutorialName-muuttujallemme.

Jos komento suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Koska annoimme muuttujalle tutorialName arvon "Angular JS", tämä näkyy tekstikentässä ja pelkällä tekstirivillä.

Kuinka määrittää menetelmät AngularJS-ohjaimissa

Normaalisti ohjaimessa halutaan määrittää useita menetelmiä liiketoimintalogiikan erottamiseksi.

Oletetaan esimerkiksi, että jos haluat, että ohjain tekee kaksi perusasiaa,

Lisää 2 numeroa
Suorita 2 luvun vähennyslasku

Tämän jälkeen luot ihanteellisesti ohjaimen sisään kaksi menetelmää, joista toinen suorittaa yhteenlaskua ja toinen vähennyslaskua varten.

Katsotaanpa yksinkertainen esimerkki siitä, kuinka voit määrittää mukautettuja menetelmiä Angular.JS-ohjaimessa. Ohjain yksinkertaisesti palauttaa merkkijonon.

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

Koodin selitys:

Tässä määrittelemme vain funktion, joka palauttaa "AngularJS"-merkkijonon. Funktio liitetään laajuusobjektiin tutorialName-nimisen jäsenmuuttujan kautta.
Jos komento suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Esimerkki AngularJS-ohjaimesta ng-Controllerilla

Katsotaanpa esimerkkiä "HelloWorldistä", jossa kaikki toiminnot on sijoitettu yhteen tiedostoon. Nyt on aika sijoittaa ohjaimen koodi erillisiin tiedostoihin.

Tee tämä seuraavasti:

Vaihe 1) Lisää app.js-tiedostoon seuraava koodi ohjaimellesi

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

Yllä oleva koodi tekee seuraavat asiat:

Määrittele "sovellus"-niminen moduuli, joka pitää ohjaimen ja ohjaimen toiminnot.
Luo ohjain, jonka nimi on "HelloWorldCtrl". Tätä ohjainta käytetään "Hello World" -viestin näyttämiseen.
Kohdeobjektia käytetään tiedon siirtämiseen ohjaimesta näkymään. Joten meidän tapauksessamme laajuusobjektia käytetään "message"-nimisen muuttujan säilyttämiseen.
Määrittelemme muuttujaviestiä ja annamme sille arvon "Hello World".

Vaihe 2) Lisää nyt Sample.html-tiedostoosi div-luokka, joka sisältää käskyn ng-controller, ja lisää sitten viittaus jäsenmuuttujaan "message".

Älä myöskään unohda lisätä viittausta komentosarjatiedostoon app.js, jossa on ohjaimesi lähdekoodi.

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

Jos yllä oleva koodi on syötetty oikein, seuraava tulos näytetään, kun suoritat koodisi selaimessa.

lähtö:

Yhteenveto

Ohjaimen ensisijainen vastuu on luoda laajuusobjekti, joka vuorostaan välitetään näkymään
Kuinka rakentaa yksinkertainen ohjain ng-app-, ng-controller- ja ng-model-direktiiveillä
Kuinka lisätä mukautettuja menetelmiä ohjaimeen, jota voidaan käyttää erilaisten toimintojen erottamiseen angularjs-moduulissa.
Ohjaimet voidaan määrittää ulkoisiin tiedostoihin erottamaan tämä kerros View-tasosta. Tämä on yleensä paras käytäntö verkkosovelluksia luotaessa.

Saatat tykätä:

Mikä on ohjain AngularJS:ssä?

Mitä ohjain tekee Angularin näkökulmasta?

Perusohjaimen rakentaminen AngularJS:ssä

AIHEESEEN LIITTYVÄT ARTIKKELIT

Kuinka määrittää menetelmät AngularJS-ohjaimissa

Esimerkki AngularJS-ohjaimesta ng-Controllerilla

Yhteenveto