AngularJS Routing z parametrami: przykład aplikacji jednostronicowej

Zanim zaczniemy z routingiem, przyjrzyjmy się krótko aplikacjom jednostronicowym.

Co to są aplikacje jednostronicowe?

Aplikacje jednostronicowe lub (SPA) to aplikacje internetowe, które ładują pojedynczą stronę HTML i dynamicznie aktualizują stronę na podstawie interakcji użytkownika z aplikacją internetową.

Co to jest routing w AngularJS?

W AngularJS routing umożliwia tworzenie aplikacji jednostronicowych.

• Trasy AngularJS umożliwiają tworzenie różnych adresów URL dla różnych treści w aplikacji.
• Trasy AngularJS pozwalają na wyświetlanie wielu treści w zależności od wybranej trasy.
• Trasa jest określona w adresie URL po znaku #.

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

Na tej stronie możesz hostować główną stronę swojej aplikacji. Załóżmy, że aplikacja organizowała wydarzenie i ktoś chciał zobaczyć, jakie są wyświetlane wydarzenia, lub chciał zobaczyć szczegóły konkretnego wydarzenia lub usunąć wydarzenie. W aplikacji jednostronicowej, gdy routing jest włączony, wszystkie te funkcje byłyby dostępne za pośrednictwem poniższych łączy

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

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

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

Symbol # byłby używany wraz z różnymi trasami (ShowEvent, DisplayEvent i DeleteEvent).

• Więc jeśli użytkownik chciałby zobaczyć wszystkie zdarzenia, zostałby przekierowany do linku ( http://example.com/index.html#ShowEvent ), w przeciwnym razie
• Gdyby chcieli tylko zobaczyć określone zdarzenie, zostaliby przekierowani do linku ( http://example.com/index.html#DisplayEvent ) lub
• Gdyby chcieli usunąć wydarzenie, zostaliby przekierowani do linku http://example.com/index.html#DeleteEvent .

Zwróć uwagę, że główny adres URL pozostaje taki sam.

W tym samouczku nauczysz się:

• Dodawanie trasy kątowej ($ routeProvider)
• Tworzenie trasy domyślnej
• Dostęp do parametrów z trasy
• Korzystanie z usługi Angular $ route
• Włączanie routingu HTML5

Dodawanie trasy kątowej ($ routeProvider)

Tak więc, jak omówiliśmy wcześniej, trasy w AngularJS służą do kierowania użytkownika do innego widoku aplikacji. To routing 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 wdrożyć następujące główne kroki w aplikacji w dowolnej kolejności.

1. Odniesienie do angular-route.js. To jest plik JavaScript opracowany przez Google, który ma wszystkie funkcje routingu. Należy go umieścić w aplikacji, aby mogła odwoływać się do wszystkich głównych modułów wymaganych do routingu.

2. Następnym ważnym krokiem jest dodanie zależności do modułu ngRoute z poziomu aplikacji. Ta zależność jest wymagana, aby w aplikacji można było używać funkcji routingu. Jeśli ta zależność nie zostanie dodana, nie będzie można używać routingu w aplikacji angular.JS.

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

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

3. Następnym krokiem byłoby skonfigurowanie $ routeProvider. Jest to wymagane do zapewnienia różnych tras w aplikacji.

   Poniżej znajduje się ogólna składnia tego stwierdzenia, która nie wymaga wyjaśnień. Po prostu stwierdza, że ​​po wybraniu odpowiedniej ścieżki użyj trasy, aby wyświetlić dany widok użytkownikowi.

when(path, route)

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

 Trasa 1 

5. Wreszcie byłoby dołączenie dyrektywy ng-view, która normalnie znajdowałaby się w znaczniku DIV. Byłoby to używane do wstrzykiwania zawartości widoku, gdy wybrana zostanie odpowiednia trasa.

Spójrzmy teraz na przykład routingu przy użyciu wyżej wymienionych kroków.

W naszym przykładzie

Przedstawimy użytkownikowi 2 linki,

• Jednym z nich jest wyświetlenie tematów kursu Angular JS , a drugim kurs Node.js.
• Gdy użytkownik kliknie którekolwiek łącze, zostaną wyświetlone tematy tego kursu.

Krok 1) Uwzględnij plik trasy kątowej jako odniesienie do skryptu.

Ten plik tras jest niezbędny do korzystania z funkcji posiadania wielu tras i widoków. Ten plik można pobrać ze strony internetowej angular.JS.

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

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

Umożliwi to wstawienie odpowiedniego widoku za każdym razem, gdy użytkownik kliknie „Angular JS Topics” lub „Node JS Topics”.

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

Objaśnienie kodu:

1. Pierwszym krokiem jest uwzględnienie „modułu ngRoute”. Dzięki temu Angular będzie automatycznie obsługiwał routing w Twojej aplikacji. Moduł ngRoute, który został opracowany przez Google, posiada wszystkie funkcje, które pozwalają na wyznaczanie tras. Dodając ten moduł, aplikacja automatycznie zrozumie wszystkie polecenia routingu.
2. $ Routeprovider to usługa, której używa angular do nasłuchiwania w tle wywoływanych tras. Kiedy więc użytkownik kliknie łącze, dostawca trasy wykryje to, a następnie zdecyduje, którą trasę wybrać.
3. Utwórz jedną trasę dla łącza Angular - ten blok oznacza, że ​​po kliknięciu łącza Angular wstrzyknij plik Angular.html, a także użyj kontrolera „AngularController” do przetwarzania dowolnej logiki biznesowej.
4. Utwórz jedną trasę dla łącza węzła - ten blok oznacza, że ​​po kliknięciu łącza węzła wstrzyknij plik Node.html, a także użyj kontrolera „NodeController” do przetwarzania dowolnej logiki biznesowej.

Krok 5) Następnie należy dodać kontrolery do przetwarzania logiki biznesowej zarówno dla AngularController, jak i NodeController.

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

Guru99 Global Event


Angular JS Topics
Node JS Topics

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

Dzięki tym krokom wszystkie pary klucz-wartość w tablicy zostaną wyświetlone na każdej stronie.

1. Użycie dyrektywy ng-repeat do przejrzenia każdej pary klucz-wartość zdefiniowanej w zmiennej samouczka.
2. Wyświetlanie nazwy i opisu każdej pary klucz-wartość.

• Angular.html

Anguler

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

• Node.html

Node

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

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Jeśli klikniesz łącze AngularJS Topics, wyświetlone zostaną poniższe dane wyjściowe.

Wyniki jasno pokazują, że

• Po kliknięciu linku „Angular JS Topics” dostawca routeProvider, który zadeklarowaliśmy w naszym kodzie, decyduje, że należy wstrzyknąć kod Angular.html.
• Ten kod zostanie wstawiony do znacznika „div”, który zawiera dyrektywę ng-view. Treść opisu kursu pochodzi również z „zmiennej tutoriala”, która była częścią obiektu scope zdefiniowanego w AngularController.
• Kliknięcie na tematy Node.js spowoduje ten sam wynik i zostanie zamanifestowany widok tematów Node.js.
• Zwróć też uwagę, że adres URL strony pozostaje taki sam, zmienia się tylko trasa po tagu #. I to jest koncepcja aplikacji jednostronicowych. Tag #hash w adresie URL to separator oddzielający trasę (w naszym przypadku jest to „Angular”, jak pokazano na powyższym obrazku) i główną stronę HTML (Sample.html)

Tworzenie trasy domyślnej

Routing w AngularJS zapewnia również możliwość wyznaczenia trasy domyślnej. To jest trasa, która jest wybierana, jeśli nie ma dopasowania do istniejącej trasy.

Trasa domyślna jest tworzona przez dodanie następującego warunku podczas definiowania usługi $ routeProvider.

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

otherwise ({redirectTo: 'page'});

Skorzystajmy z tego samego przykładu powyżej i dodajmy domyślną trasę do naszej usługi $ routeProvider.

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

Objaśnienie kodu:

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

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Z wyjścia,

• Możesz wyraźnie zobaczyć, że pokazany widok domyślny to widok kątowy JS.
• Dzieje się tak, ponieważ po załadowaniu strony przechodzi do opcji „inaczej” w funkcji $ routeProvider i ładuje widok „/ Angular”.

Dostęp do parametrów z trasy

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

1. , http: //guru99/index.html to główny adres URL naszej aplikacji
2. Symbol # jest separatorem między głównym adresem URL aplikacji a trasą.
3. Angular to nasza trasa
4. I wreszcie „1” to parametr, który jest dodawany do naszej trasy

Poniżej przedstawiono składnię wyglądu parametrów w adresie URL:

Nr strony HTML / trasa / parametr

Tutaj zauważysz, że parametr jest przekazywany po trasie w adresie URL.

W naszym przykładzie powyżej dla tematów Angular JS możemy przekazać parametr, jak pokazano poniżej

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

Tutaj parametry 1, 2 i 3 mogą w rzeczywistości reprezentować identyfikator tematu.

Przyjrzyjmy się szczegółowo, jak możemy to zaimplementować.

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

1. Dodaj tabelę, aby pokazać użytkownikowi wszystkie tematy kursu Angular JS

2. Dodaj wiersz tabeli, aby wyświetlić temat „Kontrolery”. W tym wierszu zmień tag href na „Angular / 1”, co oznacza, że ​​gdy użytkownik kliknie ten temat, parametr 1 zostanie przekazany w adresie URL wraz z trasą.

3. Dodaj wiersz tabeli, aby wyświetlić temat „Modele”. W tym wierszu zmień tag href na „Angular / 2”, co oznacza, że ​​gdy użytkownik kliknie ten temat, parametr 2 zostanie przekazany w adresie URL wraz z trasą.

4. Dodaj wiersz tabeli, aby wyświetlić temat „Dyrektywy”. W tym wierszu zmień tag href na „Angular / 3”, co oznacza, że ​​gdy użytkownik kliknie ten temat, parametr 3 zostanie przekazany w adresie URL wraz z trasą.

Krok 2) W funkcji usługi routeprovider dodaj: topicId, aby wskazać, że każdy parametr przekazany w adresie URL po trasie powinien być przypisany 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 adresie URL.
2. Parametr „routeParams” zawiera odwołanie do obiektu topicId, który jest przekazywany jako parametr trasy. Tutaj dołączamy zmienną „$ routeParams.topicId” do naszego obiektu zasięgu jako zmienną „$ scope.tutotialid”. Dzieje się tak, aby można było się do niego odwoływać w naszym widoku za pośrednictwem zmiennej tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

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

Anguler


{{tutorialid}}

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Na ekranie wyjściowym

• Jeśli klikniesz łącze Szczegóły tematu dotyczące pierwszego tematu, numer 1 zostanie dodany do adresu URL.
• Ta liczba zostanie następnie przyjęta jako argument „routeparam” przez usługę Angular.JS routeprovider i będzie można do niej uzyskać dostęp naszemu kontrolerowi.

Korzystanie 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. Ogólna składnia sposobu, w jaki parametr $ route jest dostępny w kontrolerze, jest pokazana poniżej;

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

1. myApp to moduł angular.JS zdefiniowany dla Twoich aplikacji
2. MyController to nazwa kontrolera zdefiniowanego dla Twojej aplikacji
3. Podobnie jak zmienna $ scope jest udostępniana twojej aplikacji, która służy do przekazywania informacji z kontrolera do widoku. Parametr $ route służy do uzyskiwania dostępu do właściwości trasy.

Przyjrzyjmy się, jak możemy korzystać z usługi $ route.

W tym przykładzie

• Zamierzamy utworzyć prostą zmienną niestandardową o nazwie „mytext”, która będzie zawierać ciąg „This is angular”.
• Zamierzamy dołączyć tę zmienną do naszej trasy. Później uzyskamy dostęp do tego ciągu z naszego kontrolera za pomocą usługi $ route, a następnie użyjemy obiektu scope, aby wyświetlić go w naszym widoku.

Zobaczmy więc kroki, które musimy wykonać, aby to osiągnąć.

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

Krok 2) Dodaj odpowiedni kod do kontrolera

1. Dodaj parametr $ route do funkcji kontrolera. Parametr $ route jest kluczowym parametrem zdefiniowanym w układzie kątowym, który umożliwia dostęp do właściwości trasy.
2. Dostęp do zmiennej „mytext”, która została zdefiniowana w trasie, można uzyskać poprzez odniesienie $ route.current. Jest to następnie przypisywane do zmiennej „text” obiektu zasięgu. Następnie można uzyskać dostęp do zmiennej tekstowej z poziomu widoku.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

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 wstawienie do widoku tekstu „To jest kątowe”. Wyrażenie {{tutorialid}} jest takie samo jak w poprzednim temacie i wyświetli liczbę „1”.

Anguler


{{text}}

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Z wyjścia,

• Widzimy, że tekst „To jest kątowe” jest również wyświetlany po kliknięciu dowolnego łącza w tabeli. Identyfikator tematu jest również wyświetlany w tym samym czasie, co tekst.

Włączanie routingu HTML5

Routing HTML5 jest używany głównie do tworzenia czystych adresów URL. Oznacza to usunięcie hashtagu z adresu URL. Tak więc adresy URL routingu, gdy jest używany routing HTML5, będą wyglądać tak, jak pokazano poniżej

Sample.html / Angular / 1

Sample.html / Angular / 2

Sample.html / Angular / 3

Ta koncepcja jest zwykle znana jako prezentowanie użytkownikowi ładnego adresu URL.

W przypadku routingu HTML5 należy wykonać 2 główne kroki.

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

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

Krok 1) Dodaj odpowiedni kod do modułu kątowego

1. Dodaj stałą baseURL do aplikacji - jest to wymagane w przypadku routingu HTML5, aby aplikacja wiedziała, jaka jest podstawowa lokalizacja aplikacji.
2. Dodaj usługi $ locationProvider. Ta usługa umożliwia zdefiniowanie html5Mode.
3. Ustaw html5Mode usługi $ locationProvider na true.

Krok 2) Usuń wszystkie #tagi dla linków („Angular / 1”, „Angular / 2”, „Angular / 3”), aby utworzyć łatwy do odczytania adres URL.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Z wyjścia,

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

Podsumowanie

• Routing służy do przedstawiania użytkownikowi różnych widoków na tej samej stronie internetowej. Jest to w zasadzie koncepcja używana w aplikacjach jednostronicowych, które są implementowane dla prawie wszystkich współczesnych aplikacji internetowych
• Dla routingu angular.JS można ustawić trasę domyślną. Służy do określenia, jaki będzie domyślny widok pokazywany użytkownikowi
• Parametry można przekazać do trasy za pośrednictwem adresu URL jako parametry trasy. Następnie uzyskuje się dostęp do tych parametrów za pomocą parametru $ routeParams w kontrolerze
• Usługa $ route może służyć do definiowania niestandardowych par klucz-wartość w trasie, do których można następnie uzyskać dostęp z poziomu widoku
• Routing HTML5 służy do usuwania #tagu z adresu URL routingu w sposób kątowy, aby utworzyć ładny adres URL