Směrování v AngularJs s parametry

Než se podíváme na to, jak routing funguje v AngularJS, je užitečné pochopit, pro jaký typ routingu v aplikaci bylo vytvořeno. Následující část tento kontext uvádí a každá následující technika na něm staví.

Co jsou jednostránkové aplikace?

Jednostránkové aplikace neboli SPA jsou webové aplikace, které načítají jednu HTML stránku a poté ji dynamicky aktualizují, jakmile s ní uživatel interaguje. Místo vyžadování nového dokumentu ze serveru při každém kliknutí SPA zamění pouze tu část stránky, která se změnila.

Tento design vytváří jeden problém. Pokud prohlížeč nikdy nepřejde na nový dokument, adresní řádek se nikdy nezmění, takže uživatel nemůže uložit obrazovku do záložek, sdílet ji ani použít tlačítko Zpět. Směrování řeší přesně tento problém.

Co je směrování v AngularJS?

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

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

Tato stránka hostí hlavní obrazovku vaší aplikace. Předpokládejme, že aplikace organizuje událost a uživatel chce zobrazit seznam událostí, zobrazit si podrobný popis událostí nebo ji smazat. V jednostránkové aplikaci s povoleným směrováním je toto vše k dispozici prostřednictvím následujících odkazů.

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

• Pro zobrazení všech událostí je uživatel přesměrován na http://example.com/index.html#ShowEvent
• Aby viděli jednu konkrétní událost, jsou nasměrováni na http://example.com/index.html#DisplayEvent
• Pro smazání události jsou přesměrováni na http://example.com/index.html#DeleteEvent

Všimněte si, že hlavní URL zůstává stejný. Změní se pouze fragment za znakem # a tento fragment sleduje AngularJS. Po stanovení konceptu se v další části budeme zabývat částmi, které musíte propojit, než cokoli z toho bude fungovat.

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

Jak již bylo zmíněno, trasy v AngularJS se používají k přesměrování uživatele do jiného zobrazení vaší aplikace. Toto přesměrování se provádí na stejné HTML stránce, takže uživatel má pocit, že stránku neopustil.

Pro implementaci směrování je nutné ve vaší aplikaci implementovat následující hlavní kroky v libovolném pořadí.

1. Odkaz na angular-route.js. Toto JavaScénář soubor, vyvinutý Google, obsahuje všechny funkce směrování a musí být zahrnut, aby aplikace mohla odkazovat na potřeby směrování modulů.
2. Přidejte závislost k modulu ngRoute z vaší aplikace. Bez této závislosti nelze routing v aplikaci AngularJS vůbec použít.

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']);

3. Nakonfigurujte si $routeProvider. Ten poskytuje různé trasy ve vaší aplikaci a syntaxe jednoduše říká, že když je vybrána příslušná cesta, použije se trasa k zobrazení daného pohledu.

when(path, route)

4. 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/>

5. 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.

👍 Tip: Všech pět kroků je povinných. Chybějící reference angular-route.js je nejčastějším důvodem, proč trasa tiše nic nedělá, protože $routeProvider bez ní neexistuje. Následující část shrnuje všech pět kroků v jednom funkčním příkladu.

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

• Jeden odkaz slouží k zobrazení témat pro AngularJS 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 webových stránek AngularJS.

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í:

1. Zahrňte modul „ngRoute“. S tímto modulem Angular automaticky zvládá směrování a rozumí všem příkazům pro směrování.
2. $routeProvider je služba, která na pozadí naslouchá volaným trasám. Když uživatel klikne na odkaz, služba to detekuje a rozhodne, kterou trasu zvolí.
3. Vytvořte jednu trasu pro odkaz Angular: po kliknutí na něj vložte soubor Angular.html a pro obchodní logiku použijte 'AngularController'.
4. Vytvořte jednu trasu pro odkaz Node, která vloží Node.html a stejným způsobem použije 'NodeController'.

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

V každém kontroleru 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ý kontroler.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">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"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Použity opravy. Jedno <title> štítek seděl uvnitř <body>, chrset="UTF 8" byl chybně napsán, druhý odkaz ukazoval na #Node.html místo registrované trasy /Nodea cesty k šablonám nesly úvodní lomítko, které se řeší od kořene domény.

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.

1. Za použití direktiva ng-repeat projít si každý pár klíč-hodnota definovaný v proměnné tutoriálu.
2. Zobrazení názvu a popisu každého páru klíč–hodnota.

• Angular.html

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

• Uzel.html — identické s výše uvedeným výpisem, s nadpisem změněným na „Uzel“. Obě šablony mají stejný význam tutorial proměnná, kterou každý kontroler dodává ze svého vlastního rozsahu.

⚠️ Oprava: Nadpis v původním souboru Angular.html zněl „Anguler“. Pravopis je opraven výše.

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

Výstup:

Pokud kliknete na odkaz Témata AngularJS, 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 stránka URL zůstává stejná. Mění se pouze trasa za tagem # a to je koncept jednostránkových aplikací. Tag #hash v URL je oddělovač mezi trasou (v našem případě „Angular“) a hlavní HTML stránkou (Sample.html).

Příklad funguje pouze tehdy, když uživatel klikne na odkaz, který odpovídá registrované trase. Následující část se zabývá tím, co by se mělo stát, když se nic neshoduje.

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 se některá z existujících tras neshoduje.

otherwise({
  redirectTo: 'page'
});

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

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

Code Vysvětlení:

1. Zde používáme stejný kód jako výše, s jediným rozdílem, že používáme příkaz otherwise a volbu „redirectTo“ k určení, který pohled se má načíst, pokud není zadána žádná trasa. V našem případě chceme zobrazit pohled '/Angular'.

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

Výstup:

Z výstupu,

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

Výchozí trasa určuje, které zobrazení se načte. Následující část se zabývá tím, jak může jedna trasa obsluhovat mnoho záznamů tím, že v nich přenáší hodnotu. URL.

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

Angular také poskytuje funkci pro předávání parametrů během směrování. Parametry se přidávají na konec trasy v URL, Například, http://guru99/index.html#/Angular/1. V tomto příkladu úhlového směrování

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

Obecná syntaxe je HTMLPage#/route/parameter, takže dřívější témata se stanou Sample.html#/Angular/1, #/Angular/2 a #/Angular/3, kde číslice představuje ID tématu.

Pojďme se podrobně podívat na to, jak můžeme implementovat Angular trasu s parametrem.

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

1. Přidejte tabulku, která uživateli zobrazí všechna témata kurzu Angular JS.
2. Přidejte řádek tabulky pro zobrazení tématu „Controllers“. Pro tento řádek nastavte href na „#!/Angular/1“, aby kliknutí na téma předalo parametr 1 v URL spolu s trasou.
3. Přidejte řádek pro téma „Modely“ s href nastaveným na „#!/Angular/2“, aby se parametr 2 pohyboval v URL.
4. Přidejte řádek pro téma „Direktivy“ s href nastaveným na „#!/Angular/3“, aby se parametr 3 pohyboval v URL.

Krok 2) Přidejte ID tématu do servisní funkce routeProvider
Do servisní funkce routeProvider přidejte :topicId zástupný symbol pro označení, že jakýkoli parametr předaný v URL poté, co by trasa měla být přiřazena proměnné topicId.

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

1. Při definování funkce controlleru nezapomeňte nejprve přidat parametr „$routeParams“. Tento parametr bude mít přístup ke všem parametrům trasy předávaným v URL.
2. „$routeParams“ obsahuje ID tématu (topicId) předané v trase. $routeParams.topicId do rozsahu jako $scope.tutorialid zpřístupňuje jej zobrazení jako tutorialid.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

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

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

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Použity opravy. Originál použil písmeno l místo číslice 1 in href="#Angular/l", vynechal ng-view kontejner, takže šablona neměla kam vykreslit, a načetl angular-route.js před angular.min.js, což vyvolá chybu modulu.

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

<h2>Angular</h2>

<br><br>{{tutorialid}}

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

Výstup:

Na výstupní obrazovce

• Pokud kliknete na odkaz Podrobnosti o tématu u prvního tématu, číslo 1 se připojí k němu. URL.
• Toto číslo je bráno jako argument „routeParams“ a je přístupné v kontroleru.

Čtení parametru je jednoduché. Načtení záznamu, který parametr identifikuje, před zobrazením zobrazení je úkolem vlastnosti, o které se budeme bavit dále.

Jak přednačíst data pomocí vlastnosti resolve

Kontroler v předchozí části přečte ID tématu a okamžitě ho zobrazí. Skutečné aplikace musí nejprve načíst záznam ze serveru a pokud se zobrazení vykreslí před vrácením tohoto požadavku, uživatel uvidí prázdnou šablonu, která se o chvíli později vyplní. resolve vlastnost odstraňuje záblesk prázdného obsahu.

Každý klíč uvnitř resolve Objekt je závislost, kterou AngularJS připraví před aktivací trasy. Pokud je hodnota promise, router čeká na její vyřešení. Teprve po vyřešení každého promisu AngularJS vytvoří instanci kontroleru a vykreslí šablonu a vyřešené hodnoty se vloží do kontroleru podle názvu, stejně jako u jakékoli jiné služby.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Důležité jsou zde dvě chování. Zamítnutý slib zruší změnu trasy a ponechá prohlížeč na aktuálním zobrazení, takže neúspěšný požadavek nikdy nevytvoří poškozenou stránku. Protože se však router blokuje, dokud je slib vyřízen, pomalý koncový bod způsobí, že se aplikace jeví jako zamrzlá. Párování resolve s ukazatelem pokroku řízeným $routeChangeStart a $routeChangeSuccess Události.

⚠️ Varování: Nikdy neumisťujte ověřovací kontroly pouze dovnitř resolveOdmítnutí trasy skryje zobrazení, ale nechrání data za ním a koncový bod API musí stále vynucovat přístup na serveru.

Kromě předběžného načítání dat může trasa také nést statické konfigurační hodnoty. Dále je popsána služba, jak je kontrolér čte.

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, pokud je funkce definována v kontroleru. Obecná syntaxe, jak je parametr $route zpřístupněn z kontroleru, je uvedena níže.

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

1. myApp je modul AngularJS definovaný pro vaši aplikaci.
2. MyController je název kontroleru definovaného pro vaši aplikaci.
3. Stejně jako $scope předává informace z kontroleru do zobrazení, $route zpřístupňuje vlastnosti aktuální trasy.

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

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. Later K tomuto řetězci budeme přistupovat z našeho kontroleru pomocí služby $route a poté jej zobrazíme v našem pohledu pomocí objektu scope.

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 řadiče.

1. Přidejte parametr $route do funkce controlleru. Parametr $route je klíčový parametr definovaný v Angularu, který umožňuje přístup k vlastnostem trasy.
2. 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.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

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>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

Pokud je kód úspěšně spuštěn, zobrazí se při spuštění kódu v prohlížeči 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.

Každý URL dosud zobrazené stále obsahuje symbol #. Poslední krok konfigurace jej odstraní.

Povolení směrování HTML5

Směrování HTML5 se používá k vytvoření čistého URLs. Znamená to odstranění hashtagu z URLTakže směrování URLs, pokud se použije směrování HTML5, by vypadalo, jak je znázorněno níže.

Sample.html/Angular/1

Sample.html/Angular/2

Sample.html/Angular/3

Tento koncept je obvykle známý jako prezentace docela URL uživateli.

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

1. Konfigurace $locationProvider
2. 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.

Krok 1) Přidejte příslušný kód do modulu Angular.

1. Přidat <base> do hlavičky dokumentu. To je vyžadováno pro směrování HTML5, aby aplikace věděla, kde se nachází její základní umístění.
2. Přidejte službu $locationProvider. Tato služba umožňuje definovat html5Mode.
3. 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ý obsah. URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ Oprava: originál prohlásil za baseUrl konstanta ukazující na lokální cestu IDE, což nemá žádný vliv na html5Mode. AngularJS čte základní umístění z <base href> tag. Originál také vstříkl $locationProvider aniž by kdy zavolal html5Mode(true), takže hash nebyl nikdy odstraněn.

Pokud je kód úspěšně spuštěn, zobrazí se při spuštění kódu v prohlížeči 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í.

Vše výše uvedené používá ngRoute, router dodaný týmem AngularJS. Není to jediná možnost a níže uvedené srovnání vysvětluje, kdy je alternativa vhodnější.

ngRoute vs. ui-router: Který router si vybrat

ngRoute je spravován týmem AngularJS a odpovídá URL přímo do jedné šablony a kontroleru. ui-router je komunitní projekt vytvořený s cílem odstranit hlavní omezení ngRoute: porovnává se s aplikací stát spíše než na URL samostatně, což umožňuje, aby jedna obrazovka obsahovala několik nezávisle směrovaných oblastí.

Zvolte ngRoute, když každý URL mapuje se na jedno celostránkové zobrazení, protože nepotřebuje žádné další závislosti a celé API se vejde na jednu stránku. Zvolte ui-router, pokud má obrazovka panely, které se navigují nezávisle, nebo pokud podřízené zobrazení musí znovu používat data načtená rodičem. Pozdější migrace je možná, ale není triviální, protože názvy stavů nahrazují URL vzory v celých šablonách.

Běžné chyby směrování v AngularJS a jak je opravit

Většina chyb směrování způsobí prázdný ng-view spíše než chybu konzole, což ztěžuje jejich diagnostiku, než by měla být. Každý níže uvedený příznak uvádí svou příčinu a řešení.

• Neznámý poskytovatel: $routeProvider: Soubor angular-route.js nebyl nikdy načten, nebo byl načten před souborem angular.min.js. Nejprve se podívejte na základní knihovnu.
• Zobrazení zůstává prázdné bez chyby: žádný element nenese direktivu ng-view, takže šablona se nemá kam vykreslit.
• Při první návštěvě se nic nenačte: Žádná trasa neodpovídá prázdné cestě. Přidejte blok otherwise s hodnotou redirectTo.
• Proměnná $routeParams je prázdná: Vzoru chybí zástupný symbol dvojtečky. Musí číst '/Angular/:topicId'.
• Šablony 404 po html5Mode: Nakonfigurujte server tak, aby přepisoval neshodné cesty k základní stránce, a ověřte přítomnost základní značky href.
• Regulátor se nikdy znovu nespustí: změnil se pouze parametr, takže AngularJS znovu použil instanci kontroleru, místo aby ji znovu sestavil. Počkávejte na událost $routeUpdate, místo abyste se spoléhali na to, že se funkce kontroleru znovu spustí.

Nejčastější dotazy