Čo je radič v AngularJs?
A Controllers in AngularJs takes the data from the View, processing the data, and then send that data across to the view which is displayed to the end user. Kontrolór bude mať vašu hlavnú obchodnú logiku.
Kontrolór použije dátový model, vykoná požadované spracovanie a potom odovzdá výstup do zobrazenia, ktoré sa zase zobrazí koncovému používateľovi.
V tomto návode sa naučíte
- Čo robí Controller z pohľadu Angular
- Ako zostaviť základný radič
- Ako definovať metódy v ovládači
- Používanie ng-controller v externých súboroch
- Hlavnou zodpovednosťou správcu je kontrola údajov, ktoré sa dostanú do zobrazenia. Rozsah a pohľad majú obojsmernú komunikáciu.
- Vlastnosti zobrazenia môžu v rozsahu nazývať „funkcie“. Okrem toho udalosti v zobrazení môžu nazývať „metódy“ rozsahu. Fragment kódu nižšie poskytuje jednoduchý príklad funkcie.
- Funkcia ($ scope), ktorá je definovaná pri definovaní radiča, a interná funkcia, ktorá sa používa na vrátenie zreťazenia $ scope.firstName a $ scope.lastName.
- Keď v AngularJS definujete funkciu ako premennú, je známa ako metóda.
- Údaje týmto spôsobom prechádzajú z radiča do rozsahu a potom údaje prechádzajú z rozsahu do pohľadu a späť.
- Rozsah sa používa na vystavenie modelu pohľadu. Model je možné modifikovať pomocou metód definovaných v rozsahu, ktoré je možné spustiť prostredníctvom udalostí z pohľadu. Môžeme definovať obojsmerné viazanie modelu z rozsahu na model.
- Ovládače by sa nemali ideálne používať na manipuláciu s DOM. Toto by mali robiť smernice, ktoré uvidíme neskôr.
- Osvedčeným postupom je mať radič založený na funkčnosti. Napríklad, ak máte formulár na vstup a potrebujete na to kontrolór, vytvorte kontrolór s názvom „kontrolór formulára“.
- Pridávame odkazy na šablóny štýlov CSS bootstrap, ktoré sa použijú v spojení s knižnicami bootstrap.
- Pridávame odkazy na knižnice angularjs. Takže teraz, čo robíme s angular.js, bude sa z tejto knižnice odkazovať.
- Pridávame odkazy na bootstrap knižnicu, aby naša webová stránka lepšie reagovala na určité ovládacie prvky.
- Pridali sme odkazy na knižnice jquery, ktoré sa použijú na manipuláciu s DOM. Toto vyžaduje Angular, pretože niektoré funkcie v Angular závisia od tejto knižnice.
- Najskôr súbory rozdelíme do 2 priečinkov, ako je to v prípade akejkoľvek bežnej webovej aplikácie. Máme priečinok „CSS“. Bude obsahovať všetky naše súbory kaskádových štýlov a potom budeme mať priečinok „lib“, ktorý bude obsahovať všetky naše súbory JavaScriptu.
- Súbor bootstrap.css je umiestnený v priečinku CSS a slúži na pridanie dobrého vzhľadu a štýlu našej webovej stránky.
- Angular.js je náš hlavný súbor, ktorý bol stiahnutý z lokality angularJS a uložený v našom priečinku lib.
- Súbor app.js bude obsahovať náš kód pre kontroléry.
- Súbor bootstrap.js sa používa na doplnenie súboru bootstrap.cs o pridanie funkčnosti bootstrap do našej webovej aplikácie.
- Súbor jquery sa použije na pridanie funkčnosti manipulácie s DOM na našu stránku.
Čo robí Controller z pohľadu Angular
Nasleduje jednoduchá definícia práce Angular JS Controller.
Ako zostaviť základný radič
Predtým, ako začneme s vytváraním ovládača, musíme mať najskôr pripravené základné nastavenie stránky HTML.
Fragment kódu uvedený nižšie je jednoduchá stránka HTML, ktorá má názov „Registrácia udalosti“ a obsahuje odkazy na dôležité knižnice, ako sú Bootstrap, jquery a Angular.
Vyššie uvedený úryvok kódu bude predvolene prítomný vo všetkých našich príkladoch, aby sme mohli v nasledujúcich častiach zobraziť iba konkrétny kód angularJS.
Po druhé, pozrime sa na naše súbory a štruktúru súborov, s ktorými začneme po celú dobu nášho kurzu.
Pozrime sa na príklad, ako používať angular.js,
To, čo tu chceme urobiť, je iba zobraziť slová „AngularJS“ v textovom formáte aj v textovom poli pri prezeraní stránky v prehliadači.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Vysvetlenie kódu:
- Ng-app kľúčové slovo sa používa na označenie, že táto aplikácia je potrebné považovať za uhlovú aplikáciu. Všetko, čo sa začína predponou „ng“, sa nazýva smernica. „DemoApp“ je názov pre našu aplikáciu Angular.JS.
- Vytvorili sme značku div a do tejto značky sme pridali smernicu ng-controller spolu s názvom nášho radiča „DemoController“. Toto v podstate umožňuje našej značke div prístup k obsahu demo ovládača. Musíte uviesť názov kontrolóra podľa smernice, aby ste mali prístup k funkciám definovaným v kontroléri.
- Vytvárame väzbu modelu pomocou smernice ng-model. Čo to urobí, je to, že sa tým naviaže textové pole pre názov výučby na viazanie na členskú premennú „tutorialName“.
- Vytvárame členskú premennú nazvanú „tutorialName“, ktorá sa použije na zobrazenie informácií, ktoré používateľ napíše do textového poľa pre názov výučby.
- Vytvárame modul, ktorý sa bude pripájať k našej aplikácii DemoApp. Takže tento modul sa teraz stáva súčasťou našej aplikácie.
- V module definujeme funkciu, ktorá našej premennej tutorialName priradí predvolenú hodnotu „AngularJS“.
Ak je príkaz vykonaný úspešne, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Pretože sme premennej tutorialName priradili hodnotu „Angular JS“, táto sa zobrazí v textovom poli a v obyčajnom textovom riadku.
Ako definovať metódy v ovládači
Za normálnych okolností by človek chcel v radiči definovať viac metód na oddelenie obchodnej logiky.
Predpokladajme napríklad, že ak chcete, aby váš ovládač urobil dve základné veci,
- Vykonajte sčítanie 2 čísel
- Vykonajte odčítanie 2 čísel
Potom by ste v ideálnom prípade vytvorili vo svojom ovládači 2 metódy, jednu na vykonanie sčítania a druhú na vykonanie odčítania.
Pozrime sa na jednoduchý príklad toho, ako môžete definovať vlastné metódy v radiči Angular.JS. Ovládač jednoducho vráti reťazec.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Vysvetlenie kódu:
- Tu práve definujeme funkciu, ktorá vráti reťazec „AngularJS“. Funkcia je pripojená k objektu rozsahu prostredníctvom členskej premennej s názvom tutorialName.
- Ak je príkaz vykonaný úspešne, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Používanie ng-controller v externých súboroch
Pozrime sa na príklad „HelloWorld“, kde boli všetky funkcie umiestnené v jednom súbore. Teraz je čas umiestniť kód radiča do samostatných súborov.
Postupujeme podľa pokynov uvedených nižšie.
Krok 1) V súbore app.js pridajte nasledujúci kód pre váš radič
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Vyššie uvedený kód umožňuje nasledujúce činnosti,
- Definujte modul s názvom „aplikácia“, ktorý udrží ovládač spolu s funkciami ovládača.
- Vytvorte radič s názvom „HelloWorldCtrl“. Tento radič bude mať funkciu zobrazenia správy „Hello World“.
- Objekt rozsahu sa používa na prenos informácií z radiča do pohľadu. V našom prípade sa teda objekt rozsahu použije na uchovanie premennej s názvom „správa“.
- Definujeme premennú správu a priraďujeme jej hodnotu „Hello World“.
Krok 2) Teraz do svojho súboru Sample.html pridajte triedu div, ktorá bude obsahovať smernicu ng-controller, a potom pridajte odkaz na členskú premennú „message“
Nezabudnite tiež pridať odkaz na skriptový súbor app.js, ktorý obsahuje zdrojový kód vášho ovládača.
Event Registration Guru99 Global Event
{{message}}
Ak je vyššie uvedený kód zadaný správne, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.
Výkon:
Zhrnutie
- Hlavnou zodpovednosťou kontrolóra je vytvoriť objekt rozsahu, ktorý sa zase odovzdá do zobrazenia
- Ako vytvoriť jednoduchý radič pomocou smerníc ng-app, ng-controller a ng-model
- Ako pridať vlastné metódy do radiča, ktorým sa dajú oddeliť rôzne funkcie v rámci modulu angularjs.
- Na oddelenie tejto vrstvy od vrstvy Zobraziť je možné definovať radiče v externých súboroch. Toto je zvyčajne najlepší postup pri vytváraní webových aplikácií.