Trasowanie AngularJs z parametrami

Zanim przyjrzymy się, jak działa routing w AngularJS, warto zrozumieć, dla jakiego rodzaju routing aplikacji został stworzony. Poniższa sekcja przedstawia ten kontekst, a każda kolejna technika jest jego rozwinięciem.

Co to są aplikacje jednostronicowe?

Aplikacje jednostronicowe (Single Page Applications, SPA) to aplikacje internetowe, które ładują pojedynczą stronę HTML, a następnie dynamicznie ją aktualizują w miarę interakcji użytkownika z nią. Zamiast żądać nowego dokumentu z serwera przy każdym kliknięciu, SPA podmienia tylko zmienioną część strony.

Taka konstrukcja stwarza jeden problem. Jeśli przeglądarka nigdy nie przejdzie do nowego dokumentu, pasek adresu nigdy się nie zmieni, więc użytkownik nie będzie mógł dodać ekranu do zakładek, udostępnić go ani użyć przycisku Wstecz. Routing rozwiązuje właśnie ten problem.

Co to jest routing w AngularJS?

Routing w AngularJS to metoda, która pozwala na tworzenie aplikacji jednostronicowych. Umożliwia ona tworzenie różnych URLs dla różnych treści w aplikacjach internetowych. Routing AngularJS pomaga również wyświetlać wiele treści w zależności od wybranej trasy. Jest on określony w URL po znaku #.

Weźmy przykład witryny hostowanej za pośrednictwem URL http://example.com/index.html.

Ta strona zawiera ekran główny Twojej aplikacji. Załóżmy, że aplikacja organizuje wydarzenie, a użytkownik chce wyświetlić listę zdarzeń, wyświetlić je szczegółowo lub usunąć. W aplikacji jednostronicowej z włączonym routingiem wszystkie te funkcje są dostępne za pośrednictwem poniższych linków.

Symbol # będzie używany wraz z różnymi trasami (ShowEvent, DisplayEvent i DeleteEvent).

• Aby zobaczyć wszystkie wydarzenia, użytkownik jest kierowany do http://example.com/index.html#ShowEvent
• Aby zobaczyć jedno konkretne wydarzenie, należy je skierować do http://example.com/index.html#DisplayEvent
• Aby usunąć wydarzenie, należy je skierować do http://example.com/index.html#DeleteEvent

Należy pamiętać, że główny URL Pozostaje bez zmian. Zmienia się tylko fragment po znaku #, a AngularJS monitoruje ten fragment. Po ustaleniu koncepcji, w następnej sekcji omówimy elementy, które należy połączyć, aby cokolwiek zadziałało.

Dodawanie trasy AngularJS przy użyciu $routeProvider

Jak już wcześniej wspomniano, trasy w angularjs Służą do kierowania użytkownika do innego widoku aplikacji. Kierowanie to odbywa się na tej samej stronie HTML, dzięki czemu użytkownik ma wrażenie, że nie opuścił strony.

Aby zaimplementować routing, należy wykonać w aplikacji podane niżej główne kroki w określonej kolejności.

1. Odwołanie do angular-route.js. To JAVASCRIPT plik, opracowany przez Google, zawiera wszystkie funkcje routingu i musi zostać uwzględniony, aby aplikacja mogła odwoływać się do potrzeb modułu w zakresie routingu.
2. Dodaj zależność do modułu ngRoute z poziomu swojej aplikacji. Bez tej zależności routing w aplikacji AngularJS w ogóle nie będzie mógł być używany.

Poniżej znajduje się ogólna składnia tego stwierdzenia. To zwykła deklaracja modułu z dodatkiem słowa kluczowego ngRoute.

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

3. Skonfiguruj swój $routeProvider. Zapewnia on różne trasy w Twojej aplikacji, a składnia po prostu mówi, że po wybraniu odpowiedniej ścieżki należy użyć jej do wyświetlenia danego widoku.

when(path, route)

4. Linki do Twojej trasy na Twojej stronie HTML. Na swojej stronie HTML dodasz linki referencyjne do różnych dostępnych tras w aplikacji.

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

5. Wreszcie byłoby włączenie dyrektywa ng-view, który zwykle znajduje się w znaczniku div. Służyłoby to do wstrzyknięcia zawartości widoku po wybraniu odpowiedniej trasy.

💡 Wskazówka: Wszystkie pięć kroków jest obowiązkowych. Brak referencji angular-route.js to najczęstszy powód, dla którego trasa nic nie robi, ponieważ $routeProvider bez niej nie istnieje. W następnej sekcji połączymy wszystkie pięć kroków w działającym przykładzie.

Przykład routingu AngularJS

Przyjrzyjmy się teraz przykładowi routingu przy użyciu powyższych kroków.

W naszym przykładzie routingu AngularJS z parametrami,

• Jednym z linków jest wyświetlanie tematów dla angularjs oczywiście, a drugi jest dla node.js kurs.
• Po kliknięciu dowolnego linku zostaną wyświetlone tematy danego kursu.

Krok 1) Dołącz plik angular-route jako odniesienie do skryptu.

Ten plik trasy jest niezbędny do korzystania z funkcjonalności wielu tras i widoków. Plik ten można pobrać ze strony internetowej AngularJS.

Krok 2) Dodaj tagi href, które będą reprezentować linki do „Tematów Angular JS” i „Tematy Node JS”.

Krok 3) Dodaj znacznik div z dyrektywą ng-view, która będzie reprezentować widok.

Umożliwi to wstrzyknięcie odpowiedniego widoku za każdym razem, gdy użytkownik kliknie „Tematy Angular JS” lub „Tematy Node JS”.

Krok 4) W tagu skryptu dla AngularJS dodaj „moduł ngRoute” i usługę „$routeProvider”.

Code Wyjaśnienie:

1. Dodaj „moduł ngRoute”. Dzięki temu Angular automatycznie zajmie się routingiem i zrozumie wszystkie polecenia routingu.
2. $routeProvider to usługa, która nasłuchuje w tle wywoływanych tras. Gdy użytkownik kliknie link, usługa wykrywa to i decyduje, którą trasę wybrać.
3. Utwórz jedną trasę dla łącza Angular: po kliknięciu wstrzyknij Angular.html i użyj „AngularController” do logiki biznesowej.
4. Utwórz jedną trasę dla łącza węzła, która wstrzykuje Node.html i używa „NodeController” w ten sam sposób.

Krok 5) Następnym krokiem jest dodanie kontrolerów do przetwarzania logiki biznesowej zarówno dla AngularController, jak i NodeController.

W każdym kontrolerze tworzymy tablicę par klucz-wartość do przechowywania nazw i opisów tematów dla każdego kursu. Zmienna tablicowa „tutorial” jest dodawana do obiektu zakresu dla każdego kontrolera.

<!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>

⚠️ Poprawki zostały zastosowane. <title> etykieta siedziała w środku <body>, chrset="UTF 8" było źle napisane, drugi link wskazywał na #Node.html zamiast zarejestrowanej trasy /Node, a ścieżki szablonów mają ukośnik rozpoczynający się od katalogu głównego domeny.

Krok 6) Utwórz strony o nazwach Angular.html i Node.html. Dla każdej strony wykonujemy poniższe kroki.

Te kroki zapewnią wyświetlenie wszystkich par klucz-wartość tablicy na każdej stronie.

1. Korzystanie z dyrektywa ng-repeat aby przejść przez każdą parę klucz-wartość zdefiniowaną w zmiennej samouczka.
2. Wyświetlanie nazwy i opisu każdej pary klucz-wartość.

• Angular.html

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

• Węzeł.html — identyczny z powyższym zestawieniem, z nagłówkiem zmienionym na „Węzeł”. Oba szablony mają tę samą wartość tutorial zmienna, którą każdy kontroler dostarcza ze swojego własnego zakresu.

⚠️ korekta: Nagłówek w oryginalnym pliku Angular.html brzmiał „Angular”. Pisownia została poprawiona powyżej.

Jeśli kod zostanie wykonany prawidłowo, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.

Wyjście:

Po kliknięciu na link AngularJS Topics zostanie wyświetlony poniższy wynik.

Dane wyjściowe wyraźnie pokazują, że

• Po kliknięciu linku „Angular JS Topics” router RouteProvider, który zadeklarowaliśmy w naszym kodzie, decyduje o wstrzyknięciu kodu Angular.html.
• Kod ten zostanie wstrzyknięty do znacznika „div”, który zawiera dyrektywę ng-view. Ponadto treść opisu kursu pochodzi z „zmiennej samouczka”, która była częścią obiektu zakresu zdefiniowanego w AngularControllerze.
• Kiedy ktoś kliknie na node.js Tematy, nastąpi ten sam wynik i zostanie wyświetlony widok tematów Node.js.
• Należy również zauważyć, że strona URL pozostaje niezmieniony. Zmienia się tylko trasa po znaczniku #, i to jest koncepcja aplikacji jednostronicowych. Znacznik #hash w URL jest separatorem pomiędzy trasą (w naszym przypadku jest to „Angular”), a główną stroną HTML (Sample.html).

Przykład działa tylko wtedy, gdy użytkownik kliknie link pasujący do zarejestrowanej trasy. Następna sekcja opisuje, co powinno się stać, gdy nic nie będzie pasować.

Tworzenie domyślnej trasy w AngularJS

Routing w AngularJS zapewnia również możliwość posiadania trasy domyślnej. Jest to trasa wybierana w przypadku braku dopasowania do istniejącej trasy.

Trasę domyślną tworzy się przez dodanie następującego warunku podczas definiowania usługi $routeProvider.

Poniższa składnia oznacza po prostu przekierowanie na inną stronę, jeśli żadna z istniejących tras nie pasuje.

otherwise({
  redirectTo: 'page'
});

Użyjmy tego samego przykładu powyżej i dodajmy trasę domyślną do naszej usługi $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 Wyjaśnienie:

1. Tutaj używamy tego samego kodu co powyżej, z tą różnicą, że używamy instrukcji otherwise i opcji „redirectTo”, aby określić, który widok powinien zostać załadowany, jeśli nie określono trasy. W naszym przypadku chcemy, aby wyświetlany był widok „/Angular”.

Jeśli kod zostanie wykonany prawidłowo, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.

Wyjście:

Z wyjścia,

• Można wyraźnie zobaczyć, że domyślnym widokiem jest widok AngularJS.
• Dzieje się tak, ponieważ po załadowaniu strony przechodzi ona do opcji „otherwise” w funkcji $routeProvider i ładuje widok „/Angular”.

Domyślna trasa decyduje, który widok zostanie załadowany. W następnej sekcji opisano, jak pojedyncza trasa może obsługiwać wiele rekordów, przenosząc wartość w URL.

Jak uzyskać dostęp do parametrów z trasy AngularJS

Angular zapewnia również funkcjonalność przekazywania parametrów podczas routingu. Parametry są dodawane na końcu trasy w URL, na przykład, http://guru99/index.html#/Angular/1. W tym przykładzie routingu Angular

1. http://guru99/index.html jest naszą główną aplikacją URL
2. Symbol # jest separatorem między aplikacją główną URL i trasa
3. Angular to nasza droga
4. I wreszcie „1” to parametr, który jest dodawany do naszej trasy

Ogólna składnia to HTMLStrona#/trasa/parametr, więc wcześniejsze tematy stały się Sample.html#/Angular/1, #/Angular/2 i #/Angular/3, gdzie cyfra oznacza identyfikator tematu.

Przyjrzyjmy się szczegółowo, jak można zaimplementować trasę Angular z parametrem.

Krok 1) Dodaj następujący kod do swojego widoku

1. Dodaj tabelę, w której będą wyświetlane użytkownikowi wszystkie tematy kursu Angular JS.
2. Dodaj wiersz tabeli, aby wyświetlić temat „Kontrolery”. W tym wierszu ustaw href na „#!/Angular/1”, tak aby kliknięcie tematu przekazało parametr 1 w URL wraz z trasą.
3. Dodaj wiersz dla tematu „Modele” z atrybutem href ustawionym na „#!/Angular/2”, aby parametr 2 był przesyłany w URL.
4. Dodaj wiersz dla tematu „Dyrektywy” z atrybutem href ustawionym na „#!/Angular/3”, aby parametr 3 był przesyłany w URL.

Krok 2) Dodaj identyfikator tematu w funkcji usługi routeProvider
W funkcji usługi routeProvider dodaj :topicId symbol zastępczy oznaczający, że dowolny parametr przekazany w URL po czym trasę należy przypisać do zmiennej topicId.

Krok 3) Dodaj niezbędny kod do kontrolera

1. Pamiętaj, aby najpierw dodać „$routeParams” jako parametr podczas definiowania funkcji kontrolera. Ten parametr będzie miał dostęp do wszystkich parametrów trasy przekazanych w URL.
2. „$routeParams” przechowuje identyfikator tematu przekazany w trasie. Dołączanie $routeParams.topicId do zakresu jako $scope.tutorialid udostępnia go do widoku 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>

⚠️ Poprawki zostały zastosowane. W oryginale użyto listu l zamiast cyfry 1 in href="#Angular/l", pominięto ng-view kontener, więc szablon nie miał gdzie renderować i został załadowany angular-route.js zanim angular.min.js, co powoduje błąd modułu.

Krok 4) Dodaj wyrażenie, aby wyświetlić zmienną
Dodaj wyrażenie, aby wyświetlić zmienną tutorialid na stronie Angular.html.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Jeśli kod zostanie wykonany prawidłowo, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.

Wyjście:

Na ekranie wyjściowym

• Jeśli klikniesz na link Szczegóły tematu dla pierwszego tematu, do numeru 1 zostanie dodana liczba URL.
• Liczba ta jest przyjmowana jako argument „routeParams” i staje się dostępna w kontrolerze.

Odczyt parametru jest prosty. Pobranie rekordu, który identyfikuje parametr, przed wyświetleniem widoku, to zadanie omawianej dalej właściwości.

Jak wstępnie załadować dane za pomocą właściwości resolve

Kontroler w poprzedniej sekcji odczytuje identyfikator tematu i natychmiast go wyświetla. Rzeczywiste aplikacje muszą najpierw pobrać rekord z serwera, a jeśli widok zostanie wyrenderowany przed zwróceniem żądania, użytkownik zobaczy pusty szablon, który zostanie wypełniony chwilę później. resolve właściwość usuwa ten błysk pustej zawartości.

Każdy klucz w środku resolve Obiekt to zależność przygotowywana przez AngularJS przed aktywacją trasy. Jeśli wartość jest obietnicą, router czeka na jej rozwiązanie. Dopiero po rozwiązaniu każdej obietnicy AngularJS tworzy instancję kontrolera i renderuje szablon, a rozwiązane wartości są wstrzykiwane do kontrolera według nazwy, dokładnie tak jak w przypadku każdej innej usługi.

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

W tym przypadku liczą się dwa zachowania. Odrzucona obietnica anuluje zmianę trasy i pozostawia przeglądarkę w bieżącym widoku, więc nieudane żądanie nigdy nie generuje uszkodzonej strony. Jednak ponieważ router blokuje się, gdy obietnica jest w toku, powolny punkt końcowy sprawia wrażenie zawieszonej aplikacji. Para resolve ze wskaźnikiem postępu napędzanym przez $routeChangeStart oraz $routeChangeSuccess wydarzenia.

⚠️ Ostrzeżenie: Nigdy nie umieszczaj kontroli uwierzytelniania wyłącznie wewnątrz resolveOdrzucenie trasy ukrywa widok, ale nie chroni danych, które się za nim kryją, a punkt końcowy interfejsu API nadal musi wymuszać dostęp na serwerze.

Oprócz wstępnego ładowania danych, trasa może również przenosić statyczne wartości konfiguracyjne. Usługa opisana poniżej pokazuje, w jaki sposób kontroler je odczytuje.

Jak korzystać z usługi Angular $route

Usługa $route umożliwia dostęp do właściwości trasy. Usługa $route jest dostępna jako parametr, gdy funkcja jest zdefiniowana w kontrolerze. Poniżej przedstawiono ogólną składnię udostępniania parametru $route z kontrolera.

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

1. myApp to moduł AngularJS zdefiniowany dla Twojej aplikacji.
2. MyController to nazwa kontrolera zdefiniowanego dla Twojej aplikacji.
3. Podobnie jak $scope przekazuje informacje z kontrolera do widoku, $route udostępnia właściwości bieżącej trasy.

Przyjrzyjmy się, jak możemy wykorzystać usługę $route.

W tym przykładzie

• Zamierzamy utworzyć prostą zmienną niestandardową o nazwie „mójtekst”, która będzie zawierać ciąg „To jest kątowe”.
• Dołączymy tę zmienną do naszej trasy. Later uzyskamy dostęp do tego ciągu z naszego kontrolera za pomocą usługi $route, a następnie użyjemy obiektu zakresu, aby wyświetlić go w naszym widoku.

Przyjrzyjmy się więc krokom, które musimy wykonać, aby to osiągnąć.

Krok 1) Dodaj niestandardową parę klucz-wartość do trasy. Tutaj dodajemy klucz o nazwie „mójtekst” i przypisujemy mu wartość „To jest kątowe”.

Krok 2) Dodaj odpowiedni kod do kontrolera.

1. Dodaj parametr $route do funkcji kontrolera. Parametr $route to kluczowy parametr zdefiniowany w Angularze, który umożliwia dostęp do właściwości trasy.
2. Dostęp do zmiennej „mytext” zdefiniowanej w trasie można uzyskać poprzez odwołanie $route.current. Wartość ta jest następnie przypisywana do zmiennej „text” obiektu zakresu. Dostęp do zmiennej tekstowej można następnie uzyskać z widoku.

// 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) Dodaj odwołanie do zmiennej tekstowej z obiektu zakresu jako wyrażenie. Zostanie to dodane do naszej strony Angular.html, jak pokazano poniżej.

Spowoduje to wstrzyknięcie do widoku tekstu „This is angular”. Wyrażenie {{tutorialid}} jest takie samo, jak w poprzednim temacie i wyświetla liczbę „1”.

<h2>Angular</h2>

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

Jeśli kod zostanie wykonany prawidłowo, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.

Wyjście:

Z wyjścia,

• Widzimy, że tekst „This is angular” jest również wyświetlany, gdy klikamy na dowolny link w tabeli. Identyfikator tematu jest również wyświetlany w tym samym czasie, co tekst.

Każdy URL Dotychczas wyświetlane elementy nadal są oznaczone symbolem #. Ostatni krok konfiguracji usuwa go.

Włączanie routingu HTML5

Trasowanie HTML5 jest używane do tworzenia czystych URLs. Oznacza to usunięcie hashtagu z URL. Więc trasa URLW przypadku użycia routingu HTML5, wygląd pliku s będzie wyglądał tak, jak pokazano poniżej.

Przykład.html/Angular/1

Przykład.html/Angular/2

Przykład.html/Angular/3

Koncepcję tę powszechnie określa się jako prezentację ładnego URL do użytkownika.

Istnieją 2 główne kroki, które należy wykonać w przypadku routingu HTML5.

1. Konfigurowanie $locationProvider
2. Ustawianie naszej bazy dla linków względnych

Przyjrzyjmy się szczegółowo, jak wykonać powyższe kroki w naszym przykładzie.

Krok 1) Dodaj odpowiedni kod do modułu Angular.

1. dodaj <base> Tag do nagłówka dokumentu. Jest to wymagane do routingu HTML5, aby aplikacja wiedziała, jaka jest jej lokalizacja bazowa.
2. Dodaj usługę $locationProvider. Ta usługa umożliwia zdefiniowanie trybu html5Mode.
3. Ustaw html5Mode usługi $locationProvider na true.

Krok 2) Usuń wszystkie znaczniki # dla linków („Angular/1”, „Angular/2”, „Angular/3”), aby utworzyć tekst łatwy do odczytania 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>

⚠️ korekta: oryginał ogłosił baseUrl stała wskazująca na lokalną ścieżkę IDE, która nie ma wpływu na tryb html5Mode. AngularJS odczytuje lokalizację bazową z <base href> tag. Oryginał również wstrzyknięty $locationProvider bez dzwonienia html5Mode(true), więc hash nigdy nie został usunięty.

Jeśli kod zostanie wykonany prawidłowo, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.

Wyjście:

Z wyjścia,

• Możesz zobaczyć, że tagu # nie ma podczas uzyskiwania dostępu do aplikacji.

Wszystkie powyższe rozwiązania wykorzystują ngRoute, router dostarczony przez zespół AngularJS. Nie jest to jedyna opcja, a poniższe porównanie wyjaśnia, kiedy alternatywa jest lepszym rozwiązaniem.

ngRoute kontra ui-router: Który router wybrać?

ngRoute jest utrzymywany przez zespół AngularJS i dopasowuje URL bezpośrednio do pojedynczego szablonu i kontrolera. ui-router to projekt społecznościowy stworzony w celu usunięcia głównego ograniczenia ngRoute: dopasowuje się do aplikacji były zamiast na URL samodzielnie, co pozwala na to, aby jeden ekran zawierał kilka niezależnie kierowanych regionów.

Wybierz ngRoute, gdy każdy URL Mapuje do jednego widoku pełnostronicowego, ponieważ nie wymaga dodatkowych zależności, a całe API mieści się na jednej stronie. Wybierz ui-router, gdy ekran ma panele, które nawigują niezależnie, lub gdy widoki potomne muszą ponownie wykorzystywać dane załadowane przez widok nadrzędny. Późniejsza migracja jest możliwa, ale nie jest trywialna, ponieważ nazwy stanów zastępują URL wzory w szablonach.

Typowe błędy routingu AngularJS i jak je naprawić

Większość awarii routingu powoduje wyświetlenie pustego widoku ng-view zamiast błędu konsoli, przez co trudniej je zdiagnozować niż powinno. Każdy objaw poniżej opisuje przyczynę i sposób rozwiązania.

• Nieznany dostawca: $routeProvider: Plik angular-route.js nigdy nie został załadowany lub został załadowany przed plikiem angular.min.js. Najpierw zapoznaj się z biblioteką główną.
• Widok pozostaje pusty bez błędu: żaden element nie zawiera dyrektywy ng-view, więc szablon nie ma gdzie renderować.
• Nic się nie ładuje przy pierwszej wizycie: Żadna trasa nie pasuje do pustej ścieżki. Dodaj blok „w przeciwnym razie” z wartością „redirectTo”.
• $routeParams jest pusty: Wzorzec nie zawiera symbolu zastępczego dwukropka. Powinien zawierać „/Angular/:topicId”.
• Szablony 404 po html5Mode: skonfiguruj serwer tak, aby nadpisywał niedopasowane ścieżki do strony bazowej i sprawdź, czy znacznik href strony bazowej jest obecny.
• Kontroler nigdy nie uruchamia się ponownie: Zmienił się tylko parametr, więc AngularJS ponownie wykorzystał instancję kontrolera zamiast ją przebudowywać. Nasłuchuj zdarzenia $routeUpdate zamiast oczekiwać ponownego uruchomienia funkcji kontrolera.

FAQ