Esimerkki AngularJS-ohjaimet ng-Controllerilla

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS:n ohjain sisältää näytön liiketoimintalogiikan. Se vastaanottaa dataa scope-objektin kautta, käsittelee sen ja näyttää tuloksen takaisin näkymälle.ping esitystavan merkintä ilman sovelluslogiikkaa.

  • 🎯 Ydinvastuu: Ohjain täyttää scope-objektin ja paljastaa metodit näkymään; se ei manipuloi DOM:ia.
  • 🔗 Kytkentä: ng-controller-direktiivi sitoo nimetyn ohjaimen elementtiin, antaen kyseiselle elementille ja sen lapsille pääsyn ohjaimen laajuusalueeseen.
  • 🔁 Kaksisuuntainen sidonta: ng-model linkittää lomakekentän scope-ominaisuuteen, joten näkymässä tehdyt muokkaukset päivittävät ohjaimen ja päinvastoin.
  • 🧩 Menetelmät: Vaikutusalueeseen liitetyt funktiot erottavat erilliset logiikkaosat ja niitä voidaan kutsua suoraan näkymälausekkeista.
  • 🏷️ controllerAs-syntaksi: Ohjaimen aliasointi ja sitominen this poistaa epäselvyyksiä, kun ohjaimet ovat sisäkkäin.
  • 📁 etäisyys: Ohjainten siirtäminen erilliseen app.js-tiedostoon pitää katselukerroksen riippumattomana logiikkakerroksesta.
Lue lisää

AngularJS-ohjaimet ng-controllerilla

Mikä on ohjain AngularJS:ssä?

A ohjain AngularJS ottaa datan näkymästä, käsittelee datan ja lähettää sen sitten näkymään, joka näytetään loppukäyttäjälle. Controller sisältää ydinliiketoimintalogiikkasi. Se käyttää datamallia, suorittaa tarvittavan käsittelyn ja välittää sitten tulosteen näkymään.

⚠️ Versiohuomautus: AngularJS (1.x-haara) saavutti elinkaarensa lopun 31. joulukuuta 2021, eikä sille ole enää saatavilla tietoturvapäivityksiä. Alla olevat käsitteet pätevät edelleen vanhoihin sovelluksiin; nykyaikaisessa Angularissa sama rooli on komponenttiluokalla eikä ohjaimella.

Ohjaimen tietäminen jättää yhden kysymyksen avoimeksi: miten se itse asiassa kommunikoi näkymän kanssa. Seuraava osio vastaa siihen.

Mitä Controller tekee Angularin näkökulmasta

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

AngularJS-ohjaimen toiminta
AngularJS-ohjaimen toiminta
  • Rekisterinpitäjän ensisijainen vastuu on hallita näkymään siirtyviä tietoja. Laajuudella ja näkemyksellä on kaksisuuntainen viestintä.
  • Näkymän ominaisuudet ja tapahtumat voivat kutsua funktioita laajuusalueella. Alla oleva koodinpätkä näyttää toiminto ($scope) ohjaimen ja sisäisen funktion palauttaessa $scope.firstName ja $scope.lastName liittyi. Sisään angularjs, muuttujana määritelty funktio on metodi.

AngularJS-ohjaimen toiminta

  • Data siirtyy ohjaimesta oskilloskooppiin ja sitten edestakaisin oskilloskoopin ja näkymän välillä.
  • Näkymä paljastaa mallin näkymälle. Mallia voidaan muokata näkymän tapahtumista laukaisevien metodien avulla, jotka on määritelty näkymässä.
  • Ohjaimia ei tule käyttää DOM:n manipulointiin. Se on niiden tehtävä. direktiivien.
  • Paras käytäntö on perustaa ohjaimet toiminnallisuuteen. Jos sinulla on syöttölomake, joka tarvitsee ohjaimen, luo sellainen nimeltä "lomakeohjain".

Kun mekanismi on ymmärretty, seuraavassa osiossa rakennetaan ohjain tyhjältä sivulta.

Perusohjaimen rakentaminen AngularJS:ssä

Alla on vaiheet ohjaimen luomiseksi AngularJS:ssä.

Vaihe 1) Luo perus-HTML-sivu

Ennen ohjaimen luomista HTML-perussivun on oltava valmiina. Alla oleva koodinpätkä on yksinkertainen sivu nimeltä ”Tapahtuman rekisteröinti”, joka viittaa Bootstrap ja AngularJS.

Rakenna perusohjain AngularJS:ssä

  1. Viittauksia Bootstrap CSS-tyylitiedosto, jota käytetään yhdessä Bootstrap kirjasto.
  2. Viittaus AngularJS-kirjastoon. Kaikki tästä eteenpäin AngularJS:llä tehtävä ratkaistaan ​​tämän tiedoston perusteella.
  3. Viittaus asiaan Bootstrap kirjasto, mikä tekee tietyistä ohjausobjekteista responsiivisia.

⚠️ korjaus: alkuperäisen jQueryn ja totesi, että AngularJS on siitä riippuvainen. Se ei ole. AngularJS toimitetaan jqLiten kanssa, joka on jQuery API:n sisäänrakennettu osajoukko, ja päivittyy täyteen jQueryyn vain, jos jQuery latautuu ennen Viite on poistettu.

Vaihe 2) Tarkista tiedostot ja tiedostorakenne

Rakenna perusohjain AngularJS:ssä

  1. Tiedostot jaetaan kahteen kansioon kuten missä tahansa perinteisessä verkkosovelluksessa: ”css” tyylitiedostoille ja ”lib” JavaKäsikirjoitus tiedostoja.
  2. bootstrap.css sijaitsee css-kansiossa ja antaa sivustolle sen ulkoasun ja käyttötuntuman.
  3. angular.js on pääkirjasto, joka ladataan AngularJS-sivustolta ja säilytetään lib-hakemistossa.
  4. app.js sisältää ohjainten koodin.

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

Tavoitteena on näyttää sanat ”AngularJS” sekä pelkkänä tekstinä että tekstilaatikossa, kun sivu avataan selaimessa.

Rakenna perusohjain AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Selitys:

  1. ng-app merkitsee tämän elementin AngularJS-sovelluksen juureksi. Attribuutit, joiden etuliitteenä on ng- ovat sisäänrakennettuja direktiivejä. Sovellukselle annettu nimi on ”DemoApp”.
  2. Div-yksikkö kantaa ng-ohjain nimellä ”DemoController”, joka antaa kyseiselle elementille ja kaikelle sen sisällä olevalle pääsyn ohjaimen laajuusalueeseen.
  3. ng-malli luo mallin sidonnan, joka sitoo Tutorial Name -tekstiruudun scope-ominaisuuteen tutorialName.
  4. Moduuli DemoApp luodaan, ja ohjain määrittää oletusarvoksi ”AngularJS” tutorialName.

⚠️ Korjaukset tehty. Alkuperäinen listaus ilmoitettiin chrset="UTF 8", joka ei ole kelvollinen attribuutti eikä kelvollinen koodausnimi, ja latasi AngularJS:n kahdesti — kerran CDN:stä ja kerran lib/angular.jsKirjaston lataaminen kahdesti rekisteröi moduulijärjestelmän uudelleen ja aiheuttaa arvaamatonta toimintaa. Riippuvuustaulukon annotaatio ['$scope', function($scope){…}] lisättiin myös, ilman jota ohjain rikkoutuu heti, kun tiedostoa pienennetään.

lähtö:

Rakenna perusohjain AngularJS:ssä

Koska tutorialName lle annettiin arvo ”AngularJS”, kyseinen arvo näkyy tekstikentässä ja pelkkätekstirivillä. Yksi ominaisuus riittää demonstraatioon; oikeat ohjaimet yleensä esittelevät myös käyttäytymistä, jota käsitellään seuraavassa osiossa.

Älä Miss:

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

Normaalisti ohjaimessa määritettäisiin useita metodeja liiketoimintalogiikan erottamiseksi. Jos ohjaimen pitäisi lisätä kaksi numeroa ja niiden alalukujatrackaksi lukua, loisit yhden metodin kutakin operaatiota varten.

Alla oleva esimerkki määrittelee AngularJS-ohjaimen sisällä olevan mukautetun metodin, joka palauttaa merkkijonon.

Määritä menetelmät AngularJS-ohjaimissa

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Selitys:

  1. Funktio on liitetty laajuusobjektiin jäsenenä tNameSe palauttaa funktion nykyisen arvon. tutorialName.
  2. Näkymä kutsuu metodia, jossa on {{tName()}}Sulkeilla on merkitystä: ilman niitä lauseke tulostaa itse funktion eikä sen tulosta.

⚠️ korjaus: alkuperäinen menetelmä luettu $scope.tName = function() { return $scope.tName; };Funktio palauttaa itsensä, ei tutoriaalin nimeä, joten sivu renderöi funktion rungon tekstin sijaan. Se palauttaa nyt $scope.tutorialName.

lähtö:

Määritä menetelmät AngularJS-ohjaimissa

Tähän asti kaikki on ollut yhdessä tiedostossa. Tuotantosovellukset pitävät ohjaimet erillään, kuten seuraavassa osiossa osoitetaan.

Esimerkki AngularJS-ohjaimesta ng-Controllerilla

Yllä olevassa ”HelloWorld”-esimerkissä kaikki toiminnallisuudet sijoitettiin yhteen tiedostoon. Nyt on aika siirtää ohjaimen koodi omaan tiedostoonsa.

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

AngularJS-ohjain ng-Controllerilla

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

Yllä oleva koodi tekee seuraavaa:

  1. Määrittelee moduulin nimeltä ”app”, joka sisältää ohjaimen.
  2. Luo ohjaimen nimeltä ”HelloWorldCtrl”, joka näyttää ”Hello World” -viestin.
  3. Käyttää scope-objektia tiedon välittämiseen ohjaimelta näkymään, tässä tapauksessa muuttujan nimeltä message.

Vaihe 2) Lisää Sample.html-tiedostoon div-elementti, joka sisältää ng-controller-direktiivin ja viittauksen jäsenmuuttujaan. messageMuista viitata tiedostoon app.js, joka sisältää ohjaimen lähdekoodin.

AngularJS-ohjain ng-Controllerilla

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="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="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ korjaus: app.js on ladattava jälkeen angular.js, koska se kutsuu angular.moduleAlkuperäinen myös latasi kirjaston kahdesti ja kantoi mukanaan samaa chrset kirjoitusvirhe.

lähtö:

AngularJS-ohjain ng-Controllerilla

Jokainen esimerkki tähän mennessä on lukenut ja kirjoittanut ominaisuuksia suoraan $scopeAlla oleva osio käsittelee vaihtoehtoa, jota AngularJS-tiimi suosittelee.

Kuinka käyttää controllerAs-syntaksia AngularJS:ssä

Suoraan sidonta $scope toimii, mutta siitä tulee monitulkintainen heti, kun ohjaimet ovat sisäkkäisiä. Näkymälauseke, kuten {{name}} ei anna vihjettä, mikä ohjain omistaa name, ja koska lapsi-alueille tehdään prototyyppisiä periytymiä vanhemman alueilta, sisäkkäinen ohjain, joka kirjoittaa perittyyn primitiiviin, luo hiljaa oman varjokopionsa. controllerAs syntaksi poistaa molemmat ongelmat antamalla jokaiselle ohjaimelle aliaksen.

Vaihe 1) Näkymän ohjaimen alias, joka käyttää as avainsana ja lisää sitten jokaisen sidonnan etuliitteeksi kyseinen alias.

Vaihe 2) Liitä ohjaimen sisällä ominaisuudet kohteeseen this pikemminkin kuin $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Kolme hyötyä seuraa. Sidonnat muuttuvat itseään dokumentoiviksi, koska demo.tutorialName nimeää omistajansa. Sisäkkäiset ohjaimet lakkaavat törmäämästä, koska pääohjaimella on alias. outer ja lapsi salanimellä inner voivat molemmat paljastaa nameArvot sitovat myös objektin kautta pelkän primitiivisen sivuaskeleen sijaan.ping ansa, jossa lapsen muokkaus ei koskaan tavoita vanhempaa.

💡 Vinkki: kaapata this muuttujaan, kuten vm ohjaimen yläosassa. Takaisinkutsun sisällä this viittaa johonkin kokonaan muuhun, ja kaapattu viittaus pitää sidonnan oikein.

Sidontatyylin valitseminen on yksi päätös. Sen päättäminen, mikä ylipäätään kuuluu ohjaimeen, on toinen, ja alla oleva vertailu vetää tämän rajan.

Ohjain vs. palvelu AngularJS:ssä

Aloittelijat usein ylikuormittavat ohjaimen työllä, joka kuuluu palveluun. Ero on käyttöiässä ja uudelleenkäytössä: ohjain on olemassa vain niin kauan kuin sen näkymä on näytöllä, kun taas palvelu on yksittäinen ohjain, joka elää koko sovelluksen elinkaaren ajan.

Aspect ohjain Palvelu
Elinikäinen Luotu ja tuhottu näköalalla Yksittäinen instanssi koko sovellukselle
Tarkoitus Valmistele tiedot yhtä näkymää varten Jaettu logiikka, tila- ja palvelinkutsut
Uudelleen käytettävä Ei, sidottu sen näkemykseen Kyllä, injektoitava mihin tahansa
Säilyttää tilan näkymien välillä Ei, osavaltiota ei näytetä navigoinnissa Kyllä, valtio pysyy pystyssä
Tyypillistä sisältöä Vaikutusalueen ominaisuudet ja näkymämenetelmät HTTP-kutsujen, välimuistin, liiketoimintasääntöjen

Pidä ohjaimet ohuina. Jos kaksi ohjainta tarvitsee saman logiikan tai jos arvon on selvittävä navigoinnista näkymien välillä, siirrä se palveluun ja lisää kyseinen palvelu sinne, missä sitä tarvitaan. Käytännön testi on kysyä, olisiko koodi edelleen järkevää nykyisen näytön ollessa suljettuna. Jos vastaus on kyllä, se kuuluu palveluun.

UKK

Kyllä. AngularJS luo erillisen instanssin ja erillisen scope-kentän jokaiselle direktiiviä sisältävälle elementille. Instanssit eivät jaa tilaa, joten muutos toisessa ei näy toisessa.

Määrittele se reitillä, kun ohjain kuuluu kokonaisnäkymään, jonka lataa reititysKäytä ng-controlleria komponentille, joka näkyy sivulla riippumatta nykyisestä reitistä. Älä koskaan määritä molempia, tai ohjain suoritetaan kahdesti.

Käytä taulukkomerkintää ja listaa riippuvuuksien nimet merkkijonoina ennen funktiota. Pienentäjät nimeävät funktion argumentteja uudelleen, mutta eivät koskaan merkkijonoliteraaleja, joten injektori ratkaisee edelleen $scope-muuttujaa ja mahdollisia palveluita oikein.

Kyllä. AI Assistantit luovat moduuli-, ohjain- ja osiosidokset näytön yksinkertaisesta kuvauksesta. Tarkista aina riippuvuusmerkintä, koska se usein puuttuu luodusta koodista.

Tekoälytyökalut kirjoittavat laajuusmääritykset uudelleen siepatun virtuaalikonemuuttujan ominaisuuksiksi ja lisäävät jokaisen vastaavan näkymäsidonnan etuliitteeksi aliaksen. RevKatso $watch-kutsuja ja tapahtumakuuntelijoita käsin, koska ne vaativat edelleen scope-objektin.

Tiivistä tämä viesti seuraavasti: