Usmerjanje AngularJS s parametri: primer aplikacije za eno stran

Preden začnemo z usmerjanjem, si oglejmo le kratek pregled aplikacij z eno stranjo.

Kaj so aplikacije na eni strani?

Enostranske aplikacije ali (SPA) so spletne aplikacije, ki naložijo eno samo stran HTML in dinamično posodobijo stran glede na interakcijo uporabnika s spletno aplikacijo.

Kaj je usmerjanje v AngularJS?

V AngularJS je usmerjanje tisto, kar vam omogoča ustvarjanje aplikacij z eno stranjo.

• Poti AngularJS vam omogočajo, da v svoji aplikaciji ustvarite različne URL-je za različne vsebine.
• Poti AngularJS omogočajo prikaz več vsebin, odvisno od izbrane poti.
• Pot je navedena v URL-ju za znakom #.

Vzemimo primer spletnega mesta, ki gostuje prek URL-ja http://example.com/index.html .

Na tej strani bi gostili glavno stran aplikacije. Recimo, če je aplikacija organizirala dogodek in je nekdo želel videti, kateri so različni razstavljeni dogodki, ali je hotel videti podrobnosti določenega dogodka ali izbrisati dogodek. Ko je usmerjanje omogočeno, je v aplikaciji z eno stranjo vsa ta funkcija na voljo prek naslednjih povezav

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

Simbol # bi bil uporabljen skupaj z različnimi potmi (ShowEvent, DisplayEvent in DeleteEvent).

• Če bi torej uporabnik želel videti vse dogodke, bi bil preusmerjen na povezavo ( http://example.com/index.html#ShowEvent ), sicer
• Če bi želeli samo videti določen dogodek, bi bili preusmerjeni na povezavo ( http://example.com/index.html#DisplayEvent ) ali
• Če bi želeli dogodek izbrisati, bi bili preusmerjeni na povezavo http://example.com/index.html#DeleteEvent .

Upoštevajte, da glavni URL ostane enak.

V tej vadnici boste izvedeli-

• Dodajanje kotne poti ($ routeProvider)
• Ustvarjanje privzete poti
• Dostop do parametrov s poti
• Uporaba storitve Angular $ route
• Omogočanje usmerjanja HTML5

Dodajanje kotne poti ($ routeProvider)

Kot smo že omenili, se poti v AngularJS uporabljajo za usmerjanje uporabnika v drugačen pogled vaše aplikacije. In to usmerjanje poteka na isti strani HTML, tako da ima uporabnik izkušnjo, da strani ni zapustil.

Za izvajanje usmerjanja je treba v vaši aplikaciji v katerem koli določenem vrstnem redu izvesti naslednje glavne korake.

1. Sklic na angular-route.js. To je datoteka JavaScript, ki jo je razvil Google in ima vse funkcije usmerjanja. To je treba namestiti v vašo aplikacijo, da se lahko sklicuje na vse glavne module, ki so potrebni za usmerjanje.

2. Naslednji pomemben korak je dodajanje odvisnosti modulu ngRoute znotraj vaše aplikacije. Ta odvisnost je potrebna, da se v aplikaciji lahko uporablja funkcionalnost usmerjanja. Če se ta odvisnost ne doda, potem usmerjenost znotraj aplikacije angular.JS ne bo mogla uporabiti.

   Spodaj je splošna sintaksa te izjave. To je le običajna izjava modula z vključitvijo ključne besede ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);

3. Naslednji korak bi bil konfiguriranje vašega $ routeProvider. To je potrebno za zagotavljanje različnih poti v vaši aplikaciji.

   Spodaj je splošna sintaksa te izjave, ki je zelo samoumevna. Navaja le, da ko je izbrana ustrezna pot, uporabite pot za prikaz danega pogleda uporabniku.

when(path, route)

4. Povezave do vaše poti znotraj vaše strani HTML. Na svojo stran HTML boste dodali referenčne povezave do različnih razpoložljivih poti v vaši aplikaciji.

 1. pot 

5. Končno bi bila vključitev direktive ng-view, ki bi bila običajno v oznaki div. S tem bi vbrizgali vsebino pogleda, ko je izbrana ustrezna pot.

Zdaj pa si oglejmo primer usmerjanja z zgoraj omenjenimi koraki.

V našem primeru

Uporabniku bomo predstavili 2 povezavi,

• Eno je prikazati teme za tečaj Angular JS , drugo pa za tečaj Node.js.
• Ko uporabnik klikne katero koli povezavo, se prikažejo teme tega tečaja.

Korak 1) Vključite datoteko kotne poti kot sklic na skript.

Ta datoteka poti je potrebna, da se izkoristijo funkcije več poti in pogledov. To datoteko lahko prenesete s spletnega mesta angular.JS.

Korak 2) Dodajte oznake href, ki bodo predstavljale povezave do "Angular JS Topics" in "Node JS Topics".

Korak 3) Dodajte oznako div z direktivo ng-view, ki bo predstavljala pogled.

To bo omogočilo vbrizganje ustreznega pogleda vsakič, ko uporabnik klikne bodisi na »Angular JS Topics« ali »Node JS Topics«.

Korak 4) V oznako skripta za AngularJS dodajte modul "ngRoute" in storitev "$ routeProvider".

Razlaga kode:

1. Prvi korak je zagotoviti vključitev modula ngRoute. S tem bo Angular samodejno obdelal usmerjanje v vaši aplikaciji. Modul ngRoute, ki ga je razvil Google, ima vse funkcije, ki omogočajo usmerjanje. Z dodajanjem tega modula bo aplikacija samodejno razumela vse ukaze za usmerjanje.
2. $ Routeprovider je storitev, ki jo angular uporablja v ozadju za poslušanje poklicanih poti. Ko uporabnik klikne povezavo, bo ponudnik poti to zaznal in se nato odločil, po kateri poti bo šel.
3. Ustvari eno pot za kotno povezavo - ta blok pomeni, da ob kliku na kotno povezavo vbrizgate datoteko Angular.html in uporabite tudi krmilnik 'AngularController' za obdelavo katere koli poslovne logike.
4. Ustvari eno pot za povezavo Node - ta blok pomeni, da ob kliku povezave Node vbrizgate datoteko Node.html in uporabite tudi krmilnik 'NodeController' za obdelavo katere koli poslovne logike.

Korak 5) Naslednje je dodajanje krmilnikov za obdelavo poslovne logike tako za AngularController kot za NodeController.

V vsakem krmilniku ustvarjamo vrsto parov ključ / vrednost za shranjevanje imen in opisov tem za vsak tečaj. Spremenljivka polja 'tutorial' je dodana predmetu obsega za vsak krmilnik.

Guru99 Global Event


Angular JS Topics
Node JS Topics

6. korak) Ustvarite strani z imenom Angular.html in Node.html. Za vsako stran izvajamo spodnje korake.

Ti koraki bodo zagotovili, da bodo na vsaki strani prikazani vsi pari ključ / vrednost matrike.

1. Uporaba direktive ng-repeat za prehod skozi vsak par ključ-vrednost, definiran v spremenljivki vadnice.
2. Prikaz imena in opisa vsakega para ključ-vrednost.

• Angular.html

Anguler

Course : {{ptutor.Name}} - {{ptutor.Description}}

• Node.html

Node

Course : {{ptutor.Name}} - {{ptutor.Description}}

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Če kliknete povezavo Teme AngularJS, bo prikazan spodnji izhod.

Rezultat jasno kaže, da

• Ko kliknete povezavo »Angular JS Topics«, ponudnik routeProvider, ki smo ga navedli v naši kodi, odloči, da je treba vstaviti kodo Angular.html.
• Ta koda bo vstavljena v oznako "div", ki vsebuje direktivo ng-view. Vsebina opisa tečaja prihaja tudi iz "spremenljivke vadnice", ki je bila del predmeta obsega, definiranega v AngularController.
• Ko kliknete Teme Node.js, se prikaže enak rezultat in prikaže se pogled za teme Node.js.
• Upoštevajte tudi, da URL strani ostane enak, spremeni se le pot za oznako #. In to je koncept aplikacij na eni strani. Oznaka #hash v URL-ju je ločilo, ki ločuje pot (ki je v našem primeru 'kotna', kot je prikazano na zgornji sliki) in glavno stran HTML (Sample.html)

Ustvarjanje privzete poti

Usmerjanje v AngularJS omogoča tudi privzeto pot. To je pot, ki se izbere, če se obstoječa pot ne ujema.

Privzeta pot se ustvari z dodajanjem naslednjega pogoja pri definiranju storitve $ routeProvider.

Spodnja sintaksa preprosto pomeni preusmeritev na drugo stran, če se katera od obstoječih poti ne ujema.

otherwise ({redirectTo: 'page'});

Uporabimo isti primer zgoraj in dodamo privzeto pot naši storitvi $ routeProvider.

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

Razlaga kode:

1. Tu uporabljamo isto kodo kot zgoraj z edino razliko, da s stavkom sicer in možnostjo "redirectTo" določimo, kateri pogled naj se naloži, če pot ni določena. V našem primeru želimo, da se prikaže pogled '/ Angular'.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

• Jasno lahko vidite, da je privzeti prikazan kotni pogled JS.
• To se zgodi, ker ko se stran naloži, preide na možnost 'sicer' v funkciji $ routeProvider in naloži pogled '/ Angular'.

Dostop do parametrov s poti

Angular ponuja tudi funkcionalnost za zagotavljanje parametrov med usmerjanjem. Parametri so dodani na konec poti v URL-ju, na primer http: //guru99/index.html#/Angular/1 . V tem primeru

1. , http: //guru99/index.html je naš glavni URL aplikacije
2. Simbol # je ločilo med glavnim URL-jem aplikacije in potjo.
3. Kotna je naša pot
4. In na koncu je '1' parameter, ki je dodan naši poti

Sintaksa izgleda parametrov v URL-ju je prikazana spodaj:

HTMLPage # / route / parameter

Tu boste opazili, da se parameter prenese po poti v URL-ju.

Tako lahko v našem primeru zgoraj za teme Angular JS posredujemo parametre, kot je prikazano spodaj

Sample.html # / Kotna / 1

Sample.html # / Kotna / 2

Sample.html # / Kotna / 3

Tu lahko parametri 1, 2 in 3 dejansko predstavljajo topicid.

Poglejmo podrobno, kako lahko to izvedemo.

Korak 1) V svoj pogled dodajte naslednjo kodo

1. Dodajte tabelo, da bodo uporabniku prikazane vse teme tečaja Angular JS

2. Dodajte vrstico tabele za prikaz teme »Krmilniki«. V tej vrstici spremenite oznako href na "Angular / 1", kar pomeni, da bo, ko uporabnik klikne to temo, parameter 1 v URL poslan skupaj z potjo.

3. Dodajte vrstico tabele za prikaz teme "Modeli". Za to vrstico spremenite oznako href na "Angular / 2", kar pomeni, da bo, ko uporabnik klikne to temo, parameter 2 posredovan v URL skupaj z potjo.

4. Dodajte vrstico tabele za prikaz teme "Direktive". V tej vrstici spremenite oznako href na "Angular / 3", kar pomeni, da bo, ko uporabnik klikne to temo, parameter 3 v URL-ju poslan skupaj s potjo.

Korak 2) V storitveno funkcijo ponudnika poti dodajte: topicId, da označite, da je treba kateri koli parameter, ki je bil poslan po URL-ju po poti, spremenljivki topicId.

Korak 3) V krmilnik dodajte potrebno kodo

1. Najprej dodajte "$ routeParams" kot parameter pri definiranju funkcije krmilnika. Ta parameter bo imel dostop do vseh parametrov poti, podanih v URL-ju.
2. Parameter "routeParams" vsebuje sklic na objekt topicId, ki se posreduje kot parameter poti. Tukaj pripenjamo spremenljivko '$ routeParams.topicId' našemu predmetu obsega kot spremenljivko '$ scope.tutotialid'. To se naredi tako, da se lahko po našem mnenju nanj sklicuje prek spremenljivke tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Korak 4) Dodajte izraz za prikaz spremenljivke tutorialid na strani Angular.html.

Anguler


{{tutorialid}}

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Na izhodnem zaslonu

• Če za prvo temo kliknete povezavo Podrobnosti teme, se URL-ju doda številka 1.
• Ta številka bo nato storitev Angular.JS routeprovider sprejela kot argument "routeparam", nato pa bo do nje lahko dostopal naš krmilnik.

Uporaba storitve Angular $ route

Storitev $ route vam omogoča dostop do lastnosti poti. Storitev $ route je na voljo kot parameter, ko je funkcija definirana v krmilniku. Splošna sintaksa o tem, kako je parameter $ route na voljo v krmilniku, je prikazana spodaj;

myApp.controller('MyController',function($scope,$route)

1. myApp je angular.JS modul, določen za vaše aplikacije
2. MyController je ime krmilnika, določeno za vašo aplikacijo
3. Tako kot je za vašo aplikacijo na voljo spremenljivka $ scope, ki se uporablja za posredovanje informacij iz krmilnika v pogled. Parameter $ route se uporablja za dostop do lastnosti poti.

Oglejmo si, kako lahko uporabimo storitev $ route.

V tem primeru

• Ustvarili bomo preprosto spremenljivko po meri, imenovano "mytext", ki bo vsebovala niz "This is angular."
• To spremenljivko bomo pritrdili na našo pot. Kasneje bomo do tega niza dostopali iz našega krmilnika s pomočjo storitve $ route in nato uporabili objekt obsega, da to prikažemo v našem pogledu.

Poglejmo torej korake, ki jih moramo izvesti, da to dosežemo.

Korak 1) Na pot dodajte par ključ-vrednost po meri. Tu dodajamo ključ, imenovan 'mytext', in mu dodeljujemo vrednost "This is angular."

Korak 2) V krmilnik dodajte ustrezno kodo

1. Parameter $ route dodajte v funkcijo krmilnika. Parameter $ route je ključni parameter, definiran v angular, ki omogoča dostop do lastnosti poti.
2. Do spremenljivke "mytext", ki je bila definirana na poti, lahko dostopate prek reference $ route.current. To se nato dodeli spremenljivki 'text' predmeta obsega. Nato lahko iz pogleda dostopate do besedilne spremenljivke.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

3. korak) Dodajte izraz na besedilno spremenljivko iz predmeta obseg kot izraz. To bo dodano na našo stran Angular.html, kot je prikazano spodaj.

Zaradi tega bo v pogled vstavljeno besedilo "This is angular". Izraz {{tutorialid}} je enak tistemu iz prejšnje teme in na njem bo prikazana številka '1'.

Anguler


{{text}}

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

• Vidimo lahko, da se besedilo "This is angular" prikaže tudi, ko kliknemo katero koli povezavo v tabeli. ID teme se prikaže hkrati z besedilom.

Omogočanje usmerjanja HTML5

Usmerjanje HTML5 se v osnovi uporablja za ustvarjanje čistega URL-ja. Pomeni odstranitev hashtaga iz URL-ja. Tako se bodo URL-ji usmerjanja, ko se uporablja usmerjanje HTML5, prikazali, kot je prikazano spodaj

Sample.html / kotna / 1

Sample.html / Angular / 2

Vzorec.html / kotni / 3

Ta koncept je običajno znan kot predstavitev lepega URL-ja uporabniku.

Za usmerjanje HTML5 je treba izvesti dva glavna koraka.

1. Konfiguriranje $ locationProvider
2. Nastavitev naše osnove za relativne povezave

Poglejmo podrobnosti, kako izvesti zgoraj omenjene korake v zgornjem primeru

Korak 1) V kotni modul dodajte ustrezno kodo

1. V aplikacijo dodajte konstanto baseURL - to je potrebno za usmerjanje HTML5, da aplikacija ve, kakšna je osnovna lokacija aplikacije.
2. Dodajte storitve $ locationProvider. Ta storitev vam omogoča, da določite html5Mode.
3. Nastavite html5Mode storitve $ locationProvider na true.

Korak 2) Odstranite vse #tag za povezave ('Angular / 1', 'Angular / 2', 'Angular / 3'), da ustvarite URL, ki ga je mogoče enostavno prebrati.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

• Ko dostopate do aplikacije, oznake # ni.

Povzetek

• Usmerjanje se uporablja za predstavitev različnih pogledov uporabniku na isti spletni strani. To je v bistvu koncept, ki se uporablja v enostranskih aplikacijah, ki se uporabljajo za skoraj vse sodobne spletne aplikacije
• Za angular.JS usmerjanje je mogoče nastaviti privzeto pot. Uporablja se za določanje privzetega prikaza, ki bo prikazan uporabniku
• Parametre lahko posredujete na pot prek URL-ja kot parametre poti. Do teh parametrov se nato dostopa s pomočjo parametra $ routeParams v krmilniku
• Storitev $ route lahko uporabimo za določanje parov ključ-vrednost po meri na poti, do katerih je nato mogoče dostopati iz pogleda
• Usmerjanje HTML5 se uporablja za odstranjevanje #tag iz URL-ja za usmerjanje v oglatu, da tvori lep URL