Mikä on ohjain AngularJs: ssä?
AngularJs-ohjaimet ottavat tiedot näkymästä, käsittelevät tiedot ja lähettävät sitten tiedot näkymään, joka näytetään loppukäyttäjälle. Ohjaimella on ydinliiketoimintalogiikkasi.
Ohjain käyttää tietomallia, suorittaa vaaditun käsittelyn ja siirtää sitten lähdön näkymään, joka puolestaan näytetään loppukäyttäjälle.
Tässä opetusohjelmassa opit-
- Mitä ohjain tekee kulman näkökulmasta
- Kuinka rakentaa perusohjain
- Kuinka määritellä menetelmät ohjaimessa
- Ng-controllerin käyttö ulkoisissa tiedostoissa
- Rekisterinpitäjän ensisijainen vastuu on hallita näkymään siirrettäviä tietoja. Laajuudella ja näkymällä on kaksisuuntainen viestintä.
- Näkymän ominaisuudet voivat kutsua "toimintoja" laajuudessa. Lisäksi näkymän tapahtumat voivat kutsua "menetelmiä" laajuuteen. Alla oleva koodinpätkä antaa yksinkertaisen esimerkin toiminnosta.
- Toiminto ($ -alue), joka määritetään määritettäessä ohjainta, ja sisäinen toiminto, jota käytetään palauttamaan $ scope.firstName- ja $ scope.lastName -liitännät.
- Kun määrität toiminnon muuttujana AngularJS: ssä, se tunnetaan nimellä Method.
- Tällä tavalla data siirtyy ohjaimelta laajuuteen ja sitten data siirtyy edestakaisin laajennuksesta näkymään.
- Laajuutta käytetään paljastamaan malli näkymään. Mallia voidaan muokata laajuudessa määriteltyjen menetelmien avulla, jotka voidaan laukaista näkymän tapahtumien kautta. Voimme määritellä kaksisuuntaisen mallin sitomisen laajuudesta malliin.
- Ohjaimia ei pitäisi käyttää ihanteellisesti DOM: n manipulointiin. Tämä tulisi tehdä direktiiveillä, joita näemme myöhemmin.
- Paras käytäntö on, että ohjain perustuu toiminnallisuuteen. Jos sinulla on esimerkiksi lomake syötettä varten ja tarvitset ohjainta sitä varten, luo ohjain nimeltä "lomakeohjain".
- Lisäämme viitteitä bootstrap CSS -tyylitaulukoihin, joita käytetään yhdessä bootstrap-kirjastojen kanssa.
- Lisäämme viitteitä angularjs-kirjastoihin. Joten nyt mitä teemme angular.js: n kanssa jatkossa, viitataan tähän kirjastoon.
- Lisäämme viitteitä bootstrap-kirjastoon, jotta verkkosivumme reagoisi paremmin tiettyihin ohjausobjekteihin.
- Olemme lisänneet viitteitä jquery-kirjastoihin, joita käytetään DOM-manipulointiin. Angular vaatii tätä, koska osa Angularin toiminnoista riippuu tästä kirjastosta.
- Ensin erotetaan tiedostomme kahteen kansioon, kuten tehdään minkä tahansa perinteisen verkkosovelluksen kanssa. Meillä on "CSS" -kansio. Se sisältää kaikki CSS-tyylitiedostot, ja sitten meillä on "lib" -kansio, jossa on kaikki JavaScript-tiedostomme.
- Bootstrap.css-tiedosto sijoitetaan CSS-kansioon ja sitä käytettiin lisäämään verkkosivustollemme hyvää ulkoasua.
- Angular.js on päätiedostomme, joka ladattiin angularJS-sivustolta ja pidettiin lib-kansiossamme.
- App.js-tiedosto sisältää koodin ohjaimille.
- Bootstrap.js-tiedostoa käytetään täydentämään bootstrap.cs-tiedostoa lisäämään bootstrap-toiminnot verkkosovellukseemme.
- Jquery-tiedostoa käytetään lisäämään DOM-manipulointitoimintoja sivustollemme.
Mitä ohjain tekee Angularin näkökulmasta
Seuraava on yksinkertainen määritelmä kulmaisen JS-ohjaimen toiminnasta.
Kuinka rakentaa perusohjain
Ennen kuin aloitamme ohjaimen luomisen, meidän on ensin asetettava HTML-sivun perusasetukset.
Alla oleva koodinpätkä on yksinkertainen HTML-sivu, jonka otsikko on "Tapahtumarekisteröinti" ja jossa on viittauksia tärkeisiin kirjastoihin, kuten Bootstrap, jquery ja Angular.
Oletuksena yllä oleva koodinpätkä on läsnä kaikissa esimerkeissämme, jotta voimme näyttää vain tietyn kulmaisen JS-koodin seuraavissa osioissa.
Toiseksi tarkastellaan tiedostojamme ja tiedostorakennettamme, joista aiomme aloittaa koko kurssimme ajan.
Katsotaanpa esimerkki angular.js: n käytöstä,
Haluamme tässä vain näyttää sanat "AngularJS" sekä tekstimuodossa että tekstiruudussa, kun sivua tarkastellaan selaimessa.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Koodin selitys:
- Ng-sovellus avainsanaa käytetään ilmaisemaan, että sovellus olisi pidettävä kulmikkaan sovelluksen. Kaikki, jotka alkavat etuliitteellä 'ng', tunnetaan direktiivinä. "DemoApp" on Angular.JS-sovelluksellemme annettu nimi.
- Olemme luoneet div-tunnisteen ja tähän tunnisteeseen olemme lisänneet ng-controller-käskyn ohjaimen "DemoController" nimen kanssa. Tämä tekee div-tagistamme periaatteessa mahdollisuuden käyttää esittelyohjaimen sisältöä. Sinun on mainittava ohjaimen nimi direktiivin mukaisesti, jotta voit käyttää ohjaimessa määriteltyjä toimintoja.
- Luomme mallisidonnan ng-mallidirektiivin avulla. Tämä tarkoittaa, että se sitoo opetusohjelman nimen tekstiruudun sidottavaksi jäsenmuuttujaan "tutorialName".
- Luomme jäsenmuuttujan nimeltä "tutorialName", jota käytetään näyttämään tiedot, jotka käyttäjä kirjoittaa opetusohjelman nimen tekstiruutuun.
- Olemme luomassa moduulin, joka liitetään DemoApp-sovellukseemme. Joten tästä moduulista tulee nyt osa sovellustamme.
- Moduulissa määritellään funktio, joka määrittää "AngularJS" -arvon oletusarvoksi tutorialName-muuttujalle.
Jos komento suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodisi selaimessa.
Tuotos:
Koska olemme antaneet muuttujalle tutorialName arvon "Angular JS", se näkyy tekstikentässä ja pelkkällä tekstirivillä.
Kuinka määritellä menetelmät ohjaimessa
Normaalisti haluaisi määritellä ohjaimessa useita menetelmiä liiketoimintalogiikan erottamiseksi.
Oletetaan esimerkiksi, että jos haluat ohjaimesi tekemään 2 perustoimintoa,
- Lisää 2 numeroa
- Suorita 2 numeron vähennys
Luo sitten ihanteellisesti 2 menetelmää ohjaimen sisälle, yksi lisäyksen suorittamiseksi ja toinen vähennyksen suorittamiseksi.
Katsotaanpa yksinkertainen esimerkki siitä, kuinka voit määrittää mukautetut menetelmät Angular.JS-ohjaimessa. Ohjain palauttaa yksinkertaisesti merkkijonon.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Koodin selitys:
- Tässä määritetään vain funktio, joka palauttaa merkkijonon "AngularJS". Funktio on liitetty laajuusobjektiin jäsenmuuttujan nimeltä tutorialName kautta.
- Jos komento suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodisi selaimessa.
Tuotos:
Ng-controllerin käyttö ulkoisissa tiedostoissa
Katsotaanpa esimerkkiä "HelloWorld", jossa kaikki toiminnot sijoitettiin yhteen tiedostoon. Nyt on aika sijoittaa ohjaimen koodi erillisiin tiedostoihin.
Noudatetaan seuraavia ohjeita.
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ääritä moduuli nimeltä "sovellus", joka pitää ohjainta yhdessä ohjaimen toimintojen kanssa.
- Luo ohjain nimeltä "HelloWorldCtrl". Tätä ohjainta käytetään toimintoon "Hello World" -viestin näyttämiseen.
- Laajuusobjektia käytetään siirtämään tietoja ohjaimelta näkymään. Joten meidän tapauksessamme laajuusobjektia käytetään "viesti" -nimisen muuttujan pitämiseen.
- Määritämme muuttujasanoman ja annamme sille arvon "Hello World".
Vaihe 2) Lisää nyt Sample.html-tiedostoon div-luokka, joka sisältää ng-controller-käskyn, ja lisää sitten viite jäsenmuuttujaan "message"
Älä myöskään unohda lisätä viittausta komentotiedostoon app.js, jolla on ohjaimesi lähdekoodi.
Event Registration Guru99 Global Event
{{message}}
Jos yllä oleva koodi syötetään oikein, seuraava tulos näkyy, kun suoritat koodin selaimessa.
Tuotos:
Yhteenveto
- Ohjaimen ensisijainen vastuu on luoda laajuusobjekti, joka puolestaan siirtyy näkymään
- Kuinka rakentaa yksinkertainen ohjain ng-app-, ng-controller- ja ng-malli-direktiiveillä
- Kuinka lisätä mukautettuja menetelmiä ohjaimeen, jota voidaan käyttää erilaisten toimintojen erottamiseen angularjs-moduulissa.
- Ohjaimet voidaan määritellä ulkoisissa tiedostoissa tämän tason erottamiseksi Näytä-tasosta. Tämä on yleensä paras käytäntö verkkosovellusten luomisessa.