AngularJS kontroliera apmācība ar piemēru

Satura rādītājs:

Anonim

Kas ir kontrolieris AngularJs?

Vadītāji, kas atrodas AngularJs, ņem datus no skata, apstrādā tos un pēc tam nosūta šos datus skatam, kas tiek parādīts galalietotājam. Kontrolierim būs jūsu pamatdarbības loģika.

Kontrolieris izmantos datu modeli, veiks nepieciešamo apstrādi un pēc tam izvadi nodos skatam, kas savukārt tiek parādīts galalietotājam.

Šajā apmācībā jūs uzzināsiet

  • Ko kontrolieris dara no leņķa viedokļa
  • Kā izveidot pamata kontrolieri
  • Kā definēt metodes kontrolierī
  • Izmantojot ng-controller ārējos failos

    • Ko kontrolieris dara no leņķa viedokļa

    Tālāk ir vienkārša Angular JS kontroliera darbības definīcija.

    • Kontroliera galvenā atbildība ir kontrolēt datus, kas tiek nodoti skatam. Darbības sfērai un skatam ir divvirzienu komunikācija.
    • Skata īpašības var izsaukt darbības jomā funkcijas. Turklāt skata notikumi var izsaukt "metodes" darbības jomā. Zemāk esošajā koda fragmentā ir sniegts vienkāršs funkcijas piemērs.
      • Funkcija ($ sfēra), kas tiek definēta, definējot kontrolieri, un iekšējā funkcija, kas tiek izmantota, lai atgrieztu $ sfēra.firstName un $ sfēra.lastName savienojumu.
      • Programmā AngularJS, definējot funkciju kā mainīgo, to sauc par metodi.
    • Šādi dati no kontroliera pāriet uz darbības jomu, un pēc tam dati pāriet uz priekšu un atpakaļ no darbības jomas uz skatu.
    • Darbības joma tiek izmantota modeļa pakļaušanai skatam. Modeli var modificēt, izmantojot metodes, kas noteiktas darbības jomā, kuras var aktivizēt, izmantojot notikumus no skata. Mēs varam definēt divvirzienu modeļa saistīšanu no darbības jomas līdz modelim.
    • Ideālā gadījumā kontrolierus nevajadzētu izmantot manipulācijām ar DOM. Tas būtu jādara ar direktīvām, kuras mēs redzēsim vēlāk.
    • Labākā prakse ir tāda, ka kontrolieris ir balstīts uz funkcionalitāti. Piemēram, ja jums ir veidlapa ievadei un jums ir nepieciešams kontrolieris, izveidojiet kontrolieri ar nosaukumu "formas kontrolieris".

    Kā izveidot pamata kontrolieri

    Pirms sākam kontroliera izveidi, vispirms ir jāievieto HTML lapas pamata iestatīšana.

    Tālāk redzamais koda fragments ir vienkārša HTML lapa, kuras nosaukums ir “Notikumu reģistrācija” un kurā ir atsauces uz svarīgām bibliotēkām, piemēram, Bootstrap, jquery un Angular.

    1. Mēs pievienojam atsauces uz bootstrap CSS stilu lapām, kuras tiks izmantotas kopā ar bootstrap bibliotēkām.
    2. Mēs pievienojam atsauces uz angularjs bibliotēkām. Tātad tagad viss, ko mēs darīsim ar angular.js, tiks virzīts uz šo bibliotēku.
    3. Mēs pievienojam atsauces uz sāknēšanas joslas bibliotēku, lai padarītu mūsu tīmekļa lapu atsaucīgāku noteiktām vadīklām.
    4. Mēs esam pievienojuši atsauces uz jquery bibliotēkām, kuras tiks izmantotas DOM manipulācijām. To prasa Angular, jo daļa funkcionalitātes Angular ir atkarīga no šīs bibliotēkas.

    Pēc noklusējuma iepriekšējais koda fragments būs pieejams visos mūsu piemēros, lai nākamajās sadaļās mēs varētu parādīt tikai konkrēto leņķisko JS kodu.

    Otrkārt, apskatīsim mūsu failus un failu struktūru, ar kuru mēs sāksim visa mūsu kursa laikā.

    1. Vispirms mēs nošķiram failus 2 mapēs, kā tas tiek darīts ar jebkuru parasto tīmekļa lietojumprogrammu. Mums ir mape "CSS". Tajā būs visi mūsu kaskādes stila lapas faili, un tad mums būs mūsu mape "lib", kurā būs visi mūsu JavaScript faili.
    2. Bootstrap.css fails tiek ievietots CSS mapē, un to izmantoja, lai mūsu vietnei pievienotu labu izskatu.
    3. Angular.js ir mūsu galvenais fails, kas tika lejupielādēts no angularJS vietnes un saglabāts mūsu lib mapē.
    4. App.js failā būs mūsu kods kontrolieriem.
    5. Bootstrap.js fails tiek izmantots, lai papildinātu failu bootstrap.cs, lai pievienotu sāknēšanas funkcionalitāti mūsu tīmekļa lietojumprogrammai.
    6. Jquery fails tiks izmantots, lai mūsu vietnei pievienotu DOM manipulācijas funkcionalitāti.

    Apskatīsim piemēru, kā izmantot angular.js,

    Mēs šeit vēlamies tikai parādīt vārdus "AngularJS" gan teksta formātā, gan tekstlodziņā, kad lapa tiek skatīta pārlūkprogrammā.

    


    Guru99 Global Event
    

    Tutorial Name : 
    This tutorial is {{tutorialName}}

    Koda skaidrojums:

    1. Ng-app atslēgvārds tiek izmantots, lai norādītu, ka šis pieteikums ir uzskatāms par leņķa pieteikumu. Viss, kas sākas ar prefiksu “ng”, ir pazīstams kā direktīva. "DemoApp" ir nosaukums, kas piešķirts mūsu Angular.JS lietojumprogrammai.
    2. Mēs esam izveidojuši div tagu, un šajā tagā mēs esam pievienojuši ng-controller direktīvu kopā ar mūsu kontroliera nosaukumu "DemoController". Tas būtībā padara mūsu div tag iespēju piekļūt demonstrācijas kontroliera saturam. Saskaņā ar direktīvu jums jāpiemin kontroliera nosaukums, lai nodrošinātu piekļuvi kontrolierī definētajai funkcionalitātei.
    3. Mēs veidojam saistošu paraugu, izmantojot ng-model direktīvu. Tas tiek darīts ar to, ka tas iesaista apmācības nosaukuma tekstlodziņu ar dalībnieka mainīgo "tutorialName".
    4. Mēs izveidojam dalībnieka mainīgo ar nosaukumu "tutorialName", kas tiks izmantots, lai parādītu informāciju, kuru lietotājs ievada apmācības nosaukuma tekstlodziņā.
    5. Mēs veidojam moduli, kas tiks pievienots mūsu DemoApp lietojumprogrammai. Tātad šis modulis tagad kļūst par daļu no mūsu lietojumprogrammas.
    6. Modulī mēs definējam funkciju, kas piešķir mainīgajam “tutorialName” noklusējuma vērtību “AngularJS”.

    Ja komanda tiek veiksmīgi izpildīta, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

    Izeja:

    Tā kā mainīgajam tutorialName piešķirām vērtību "Angular JS", tas tiek parādīts tekstlodziņā un vienkāršā teksta rindiņā.

    Kā definēt metodes kontrolierī

    Parasti kontrolierī būtu jādefinē vairākas metodes, lai nodalītu biznesa loģiku.

    Piemēram, pieņemsim, ka, ja vēlaties, lai jūsu kontrolieris veic 2 pamatdarbības,

    1. Veiciet 2 skaitļu pievienošanu
    2. Veiciet 2 skaitļu atņemšanu

    Pēc tam ideālā gadījumā jūs savā kontrolierī izveidotu 2 metodes, vienu, lai veiktu saskaitīšanu, un otru, lai veiktu atņemšanu.

    Apskatīsim vienkāršu piemēru, kā jūs varat definēt pielāgotas metodes Angular.JS kontrolierī. Kontrolieris vienkārši atgriezīs virkni.

    Event Registration


    Guru99 Global Event
    

    Tutorial Name :

    This tutorial is {{tutorialName}}

    Koda skaidrojums:

    1. Šeit mēs tikai definējam funkciju, kas atgriež virkni "AngularJS". Funkcija ir pievienota tvēruma objektam, izmantojot dalībnieka mainīgo, ko sauc par tutorialName.
    2. Ja komanda tiek veiksmīgi izpildīta, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

    Izeja:

    Izmantojot ng-controller ārējos failos

    Apskatīsim "HelloWorld" piemēru, kurā visa funkcionalitāte tika ievietota vienā failā. Tagad ir pienācis laiks ievietot kontroliera kodu atsevišķos failos.

    Lai to izdarītu, izpildīsim tālāk norādītās darbības.

    1. solis . Failā app.js pievienojiet šo kodu savam kontrolierim

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

    Iepriekš minētais kods veic šādas darbības:

    1. Definējiet moduli ar nosaukumu “lietotne”, kas saturēs kontrolieri kopā ar kontrollera funkcionalitāti.
    2. Izveidojiet kontrolieri ar nosaukumu "HelloWorldCtrl". Šis kontrolieris tiks izmantots, lai parādītu "Hello World" ziņojumu.
    3. Darbības objekts tiek izmantots informācijas pārsūtīšanai no kontrollera uz skatu. Tātad mūsu gadījumā darbības objekts tiks izmantots, lai turētu mainīgo, ko sauc par "ziņojumu".
    4. Mēs definējam mainīgo ziņojumu un piešķiram tam vērtību “Hello World”.

    2. solis. Tagad failā Sample.html pievienojiet div klasi, kurā būs direktīva ng-controller, un pēc tam pievienojiet atsauci uz locekļa mainīgo "message"

    Neaizmirstiet arī pievienot atsauci uz skripta failu app.js, kurā ir jūsu kontrollera avota kods.

    Event Registration


    Guru99 Global Event
    

    {{message}}

    Ja iepriekš ievadītais kods ir ievadīts pareizi, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

    Izeja:

    Kopsavilkums

    • Kontroliera galvenā atbildība ir izveidot darbības jomas objektu, kas savukārt tiek nodots skatam
    • Kā izveidot vienkāršu kontrolieri, izmantojot direktīvas ng-app, ng-controller un ng-model
    • Kā kontrolierim pievienot pielāgotas metodes, kuras var izmantot dažādu funkciju atdalīšanai angularjs modulī.
    • Kontrolierus var definēt ārējos failos, lai atdalītu šo slāni no slāņa View. Parasti tā ir labākā prakse, veidojot tīmekļa lietojumprogrammas.