Příklad směrování AngularJS s parametry

Než se dozvíme, jak funguje směrování v Angular, pojďme si udělat rychlý přehled o jednostránkových aplikacích.

Co jsou jednostránkové aplikace?

Jednostránkové aplikace neboli (SPA) jsou webové aplikace, které načítají jednu HTML stránku a dynamicky aktualizují stránku na základě interakce uživatele s webovou aplikací.

Co je směrování v AngularJS?

Směrování v AngularJS je metoda, která umožňuje vytvářet jednostránkové aplikace. Umožňuje vám vytvářet různé adresy URL pro různý obsah ve vašich webových aplikacích. Směrování AngularJS také pomáhá zobrazit více obsahu v závislosti na zvolené trase. Uvádí se v URL za znakem #.

Vezměme si příklad webu, který je hostován prostřednictvím adresy URL http://example.com/index.html.

Na této stránce byste hostili hlavní stránku vaší aplikace. Předpokládejme, že aplikace organizovala událost a někdo chtěl vidět, jaké jsou různé zobrazené události, nebo chtěl vidět podrobnosti konkrétní události nebo událost odstranit. V jednostránkové aplikaci, když je povoleno směrování, budou všechny tyto funkce dostupné prostřednictvím následujících odkazů

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

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

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

Symbol # by byl použit spolu s různými trasami (ShowEvent, DisplayEvent a DeleteEvent).

Pokud by tedy uživatel chtěl vidět všechny události, byl by přesměrován na odkaz (http://example.com/index.html#ShowEvent), jinak
Pokud by chtěli pouze vidět konkrétní událost, byli by přesměrováni na odkaz ( http://example.com/index.html#DisplayEvent), Nebo
Pokud by chtěli smazat událost, byli by přesměrováni na odkaz http://example.com/index.html#DeleteEvent.

Všimněte si, že hlavní adresa URL zůstává stejná.

Přidání AngularJS Route pomocí $routeProvider

Takže jak jsme mluvili dříve, trasy dovnitř AngularJS se používají k nasměrování uživatele na jiný pohled na vaši aplikaci. A toto směrování se provádí na stejné HTML stránce, aby měl uživatel zkušenost, že stránku neopustil.

Aby bylo možné implementovat směrování, musí být ve vaší aplikaci implementovány následující hlavní kroky v libovolném konkrétním pořadí.

Odkaz na angular-route.js. Toto je a JavaScénář soubor vyvinutý společností Google, který má všechny funkce směrování. Ten musí být umístěn ve vaší aplikaci, aby mohl odkazovat na všechny hlavní moduly, které jsou nutné pro směrování.
Dalším důležitým krokem je přidání závislosti do modulu ngRoute z vaší aplikace. Tato závislost je vyžadována, aby bylo možné v rámci aplikace použít funkci směrování. Pokud tato závislost není přidána, pak nebude možné použít směrování v aplikaci angular.JS.

Níže je obecná syntaxe tohoto příkazu. Toto je jen normální deklarace modulu se zahrnutím klíčového slova ngRoute.

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

Dalším krokem by byla konfigurace vašeho $routeProvider. To je nutné pro poskytování různých tras ve vaší aplikaci. Níže je obecná syntaxe tohoto příkazu, která je velmi samovysvětlující. Pouze uvádí, že když je zvolena příslušná cesta, použijte trasu k zobrazení daného pohledu uživateli.

when(path, route)

Odkazy na vaši trasu z vaší stránky HTML. Na stránku HTML přidáte referenční odkazy na různé dostupné trasy ve vaší aplikaci.

<a href="#/route1">Route 1</a><br/>

Konečně by bylo zahrnutí směrnice ng-view, který by normálně byl ve značce div. To by se použilo k vložení obsahu pohledu, když je vybrána příslušná trasa.

Příklad směrování AngularJS

Nyní se podívejme na příklad směrování pomocí výše uvedených kroků.

V našem příkladu směrování AngularJS s parametry

Uživateli představíme 2 odkazy,

Jedním z nich je zobrazení témat pro ANGULAR JS samozřejmě, a druhý je pro Node.js hřiště.
Když uživatel klikne na kterýkoli odkaz, zobrazí se témata daného kurzu.

Krok 1) Zahrňte soubor angular-route jako referenci skriptu.

Tento soubor trasy je nezbytný pro využití funkcí více tras a zobrazení. Tento soubor lze stáhnout z webu angular.JS.

Krok 2) Přidejte značky href, které budou představovat odkazy na „Angular JS Topics“ a „Node JS Topics“.

Krok 3) Přidejte značku div s direktivou ng-view, která bude reprezentovat pohled.

To umožní vložit odpovídající pohled, kdykoli uživatel klikne buď na „Angular JS Topics“ nebo „Node JS Topics“.

Krok 4) Do značky skriptu pro AngularJS přidejte „modul ngRoute“ a službu „$routeProvider“.

Code Vysvětlení:

Prvním krokem je zajistit zahrnutí „modulu ngRoute“. S tímto na místě bude Angular automaticky zpracovávat směrování ve vaší aplikaci. Modul ngRoute vyvinutý společností Google má všechny funkce, které umožňují směrování. Přidáním tohoto modulu bude aplikace automaticky rozumět všem směrovacím příkazům.
$routeprovider je služba, kterou angular používá k naslouchání na pozadí tras, které jsou volány. Když tedy uživatel klikne na odkaz, poskytovatel trasy v AngularJS to zjistí a poté se rozhodne, kterou cestou se vydat.
Vytvořte jednu cestu pro Angular link – Tento blok znamená, že po kliknutí na Angular link vložíte soubor Angular.html a také použijete Controller 'AngularController' ke zpracování jakékoliv obchodní logiky.
Vytvořte jednu cestu pro odkaz Node – Tento blok znamená, že po kliknutí na odkaz Node vložíte soubor Node.html a také použijete Controller 'NodeController' ke zpracování jakékoli obchodní logiky.

Krok 5) Dále je třeba přidat řadiče pro zpracování obchodní logiky pro AngularController i NodeController.

V každém ovladači vytváříme pole párů klíč-hodnota pro uložení názvů a popisů témat pro každý kurz. Proměnná pole 'tutorial' je přidána do objektu scope pro každý ovladač.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

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

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

Krok 6) Vytvořte stránky s názvem Angular.html a Node.html. Pro každou stránku provádíme níže uvedené kroky.

Tyto kroky zajistí, že se na každé stránce zobrazí všechny páry klíč–hodnota pole.

Pomocí direktivy ng-repeat projdete každý pár klíč–hodnota definovaný v proměnné kurzu.
Zobrazení názvu a popisu každého páru klíč–hodnota.

Angular.html

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Uzel.html

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Pokud kliknete na odkaz AngularJS Topics, zobrazí se níže uvedený výstup.

Výstup jasně ukazuje,

Po kliknutí na odkaz „Angular JS Topics“ se routeProvider, kterého jsme deklarovali v našem kódu, rozhodne, že by měl být vložen kód Angular.html.
Tento kód bude vložen do tagu „div“, který obsahuje direktivu ng-view. Také obsah popisu kurzu pochází z „proměnné tutoriálu“, která byla součástí objektu rozsahu definovaného v AngularController.
Když člověk klikne na Node.js Témata, dojde ke stejnému výsledku a projeví se pohled na témata Node.js.
Všimněte si také, že adresa URL stránky zůstává stejná, mění se pouze trasa za značkou #. A to je koncept jednostránkových aplikací. Značka #hash v adrese URL je oddělovač, který odděluje trasu (což je v našem případě 'Angular', jak je znázorněno na obrázku výše) a hlavní stránku HTML (Sample.html)

Vytvoření výchozí trasy v AngularJS

Směrování v AngularJS také poskytuje možnost mít výchozí trasu. Toto je trasa, která se vybere, pokud neexistuje žádná shoda se stávající trasou.

Výchozí trasa se vytvoří přidáním následující podmínky při definování služby $routeProvider.

Níže uvedená syntaxe jednoduše znamená přesměrování na jinou stránku, pokud některá z existujících tras neodpovídá.

otherwise ({
    redirectTo: 'page'
});

Použijme stejný příklad výše a přidejte výchozí trasu do naší služby $routeProvider.

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

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

Code Vysvětlení:

Zde používáme stejný kód jako výše, pouze s tím rozdílem, že používáme příkaz jinak a možnost „redirectTo“ k určení, které zobrazení se má načíst, pokud není zadána žádná trasa. V našem případě chceme, aby byl zobrazen pohled '/Angular'.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu,

Jasně vidíte, že výchozí zobrazení je úhlové zobrazení JS.
Je to proto, že když se stránka načte, přejde na volbu 'jinak' ve funkci $routeProvider a načte zobrazení '/Angular'.

Jak získat přístup k parametrům z AngularJS Route

Angular také poskytuje funkce pro poskytování parametrů během směrování. Parametry jsou přidány na konec trasy v URL, např. http://guru99/index.html#/Angular/1. V tomto příkladu úhlového směrování

, http://guru99/index.html je naše hlavní adresa URL aplikace
Symbol # je oddělovač mezi hlavní adresou URL aplikace a trasou.
Angular je naše cesta
A konečně '1' je parametr, který je přidán do naší trasy

Syntaxe toho, jak parametry vypadají v adrese URL, je uvedena níže:

HTMLPage#/route/parameter

Zde si všimnete, že parametr je předán po trase v URL.

Takže v našem příkladu tras AngularJS výše pro témata Angular JS můžeme předat parametry, jak je uvedeno níže

Sample.html#/Angular/1

Sample.html#/Angular/2

Sample.html#/Angular/3

Zde parametry 1, 2 a 3 mohou ve skutečnosti představovat topicid.

Podívejme se podrobně na to, jak můžeme implementovat Angular route s parametrem:

Krok 1) Přidejte do zobrazení následující kód

Přidejte tabulku, která uživateli zobrazí všechna témata kurzu Angular JS
Přidejte řádek tabulky pro zobrazení tématu „Ovladače“. Pro tento řádek změňte značku href na „Angular/1“, což znamená, že když uživatel klikne na toto téma, parametr 1 bude předán v URL spolu s trasou.
Přidejte řádek tabulky pro zobrazení tématu „Modely“. Pro tento řádek změňte značku href na „Angular/2“, což znamená, že když uživatel klikne na toto téma, parametr 2 bude předán v URL spolu s trasou.
Přidejte řádek tabulky pro zobrazení tématu „Směrnice“. Pro tento řádek změňte značku href na „Angular/3“, což znamená, že když uživatel klikne na toto téma, parametr 3 bude předán v URL spolu s trasou.

Krok 2) Přidejte ID tématu do funkce služby Routeprovider
Ve funkci služby routeprovider přidejte parametr:topicId, který označuje, že jakýkoli parametr předaný v adrese URL po trase by měl být přiřazen k proměnné topicId.

Krok 3) Přidejte potřebný kód do ovladače

Při definování funkce ovladače se ujistěte, že jste nejprve přidali „$routeParams“ jako parametr. Tento parametr bude mít přístup ke všem parametrům trasy předávaným v URL.
Parametr „routeParams“ má odkaz na objekt topicId, který je předán jako parametr route. Zde připojujeme proměnnou '$routeParams.topicId' k našemu objektu scope jako proměnnou '$scope.tutotialid'. Dělá se to proto, aby na něj bylo možné v našem pohledu odkazovat prostřednictvím proměnné tutorialid.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

Krok 4) Přidejte výraz do proměnné zobrazení
Přidejte výraz pro zobrazení proměnné výukového programu na stránce Angular.html.

<h2>Anguler</h2>

<br><br>{{tutorialid}}

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Na výstupní obrazovce

Pokud kliknete na odkaz Podrobnosti tématu u prvního tématu, k adrese URL se připojí číslo 1.
Toto číslo pak bude službou Angular.JS routeprovider bráno jako argument „routeparam“ a potom k němu může přistupovat náš kontrolér.

Jak používat službu Angular $route

Služba $route umožňuje přístup k vlastnostem trasy. Služba $route je k dispozici jako parametr, když je funkce definována v regulátoru. Obecná syntaxe toho, jak je parametr $route dostupný z ovladače, je uvedena níže;

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

myApp je modul angular.JS definovaný pro vaše aplikace
MyController je název ovladače definovaného pro vaši aplikaci
Stejně jako je pro vaši aplikaci zpřístupněna proměnná $scope, která se používá k předávání informací z ovladače do pohledu. Parametr $route se používá pro přístup k vlastnostem trasy.

Pojďme se podívat, jak můžeme využít službu $route.

V tomto příkladu

Vytvoříme jednoduchou vlastní proměnnou nazvanou „mytext“, která bude obsahovat řetězec „Toto je hranaté“.
Tuto proměnnou připojíme k naší trase. A později k tomuto řetězci přistoupíme z našeho řadiče pomocí služby $route a následně použijeme objekt scope k jeho zobrazení v našem pohledu.

Pojďme se tedy podívat na kroky, které musíme provést, abychom toho dosáhli.

Krok 1) Přidejte do trasy vlastní pár klíč–hodnota. Zde přidáváme klíč nazvaný 'mytext' a přiřazujeme mu hodnotu "Toto je hranaté."

Krok 2) Přidejte příslušný kód do ovladače

Přidejte parametr $route do funkce regulátoru. Parametr $route je klíčový parametr definovaný v angular, který umožňuje přístup k vlastnostem trasy.
Proměnná „mytext“, která byla definována v trase, je přístupná přes odkaz $route.current. Ten je pak přiřazen k proměnné 'text' objektu scope. K textové proměnné pak lze přistupovat odpovídajícím způsobem z pohledu.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

    });
</script>
</body>
</html>

Krok 3) Přidejte odkaz na textovou proměnnou z objektu oboru jako výraz. Toto bude přidáno na naši stránku Angular.html, jak je znázorněno níže.

To způsobí, že se do pohledu vloží text „Toto je hranaté“. Výraz {{tutorialid}} je stejný jako v předchozím tématu a zobrazí se číslo '1'.

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu,

Vidíme, že text „Toto je hranatý“ se také zobrazí, když klikneme na některý z odkazů v tabulce. Současně s textem se zobrazí také ID tématu.

Povolení směrování HTML5

Směrování HTML5 se používá v podstatě k vytvoření čisté adresy URL. Znamená to odstranění hashtagu z adresy URL. Při použití směrování HTML5 by tedy směrovací adresy URL vypadaly tak, jak je uvedeno níže

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Tento koncept je běžně známý jako zobrazení pěkné adresy URL uživateli.

Pro směrování HTML2 je třeba provést 5 hlavní kroky.

Konfigurace $locationProvider
Nastavení naší základny pro relativní odkazy

Podívejme se podrobně na to, jak provést výše uvedené kroky v našem příkladu výše

Krok 1) Přidejte příslušný kód do úhlového modulu

Přidejte do aplikace konstantu baseURL – je vyžadována pro směrování HTML5, aby aplikace věděla, jaké je základní umístění aplikace.
Přidejte služby $locationProvider. Tato služba vám umožňuje definovat html5Mode.
Nastavte html5Mode služby $locationProvider na hodnotu true.

Krok 2) Odstraňte všechny #tagy pro odkazy ('Angular/1', 'Angular/2', 'Angular/3'), abyste vytvořili snadno čitelné URL.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

    });
</script>
</body>
</html>

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu,

Při přístupu k aplikaci můžete vidět, že značka # tam není.

Shrnutí

Směrování se používá k prezentaci různých pohledů uživateli na stejné webové stránce. Toto je v podstatě koncept používaný v jednostránkových aplikacích, které jsou implementovány pro téměř všechny moderní webové aplikace
Pro směrování angular.JS lze nastavit výchozí trasu. Používá se k určení, jaké bude výchozí zobrazení, které se zobrazí uživateli
Parametry lze předat trase přes URL jako parametry trasy. Tyto parametry jsou následně přístupné pomocí parametru $routeParams v kontroleru
Službu $route lze použít k definování vlastních párů klíč–hodnota v trase, ke kterým lze následně přistupovat z pohledu
Směrování HTML5 se používá k odstranění #tagu ze směrování adresy URL v úhlovém tvaru, aby se vytvořila pěkná adresa URL

Příklad směrování AngularJS s parametry

Co jsou jednostránkové aplikace?

Co je směrování v AngularJS?

Přidání AngularJS Route pomocí $routeProvider

Příklad směrování AngularJS

Vytvoření výchozí trasy v AngularJS

Jak získat přístup k parametrům z AngularJS Route

Jak používat službu Angular $route

Povolení směrování HTML5

Shrnutí

Shrňte tento příspěvek takto:

Přihlaste se k odběru newsletteru

Co jsou jednostránkové aplikace?

Co je směrování v AngularJS?

Přidání AngularJS Route pomocí $routeProvider

SOUVISEJÍCÍ ČLÁNKY

Příklad směrování AngularJS

Vytvoření výchozí trasy v AngularJS

Jak získat přístup k parametrům z AngularJS Route

Jak používat službu Angular $route

Povolení směrování HTML5

Shrnutí

Shrňte tento příspěvek takto:

Přihlaste se k odběru newsletteru