Laluan AngularJS dengan Parameter: Contoh Aplikasi Halaman Tunggal

Sebelum kita memulakan dengan penghalaan, mari kita ikhtisar ringkas mengenai Aplikasi Halaman Tunggal.

Apakah Aplikasi Halaman Tunggal?

Aplikasi halaman tunggal atau (SPA) adalah aplikasi web yang memuat halaman HTML tunggal dan mengemas kini halaman secara dinamis berdasarkan interaksi pengguna dengan aplikasi web.

Apakah Routing di AngularJS?

Di AngularJS, routing adalah yang membolehkan anda membuat Aplikasi Halaman Tunggal.

• Laluan AngularJS membolehkan anda membuat URL yang berbeza untuk kandungan yang berbeza dalam aplikasi anda.
• Laluan AngularJS membolehkan seseorang menunjukkan pelbagai kandungan bergantung pada laluan mana yang dipilih.
• Laluan ditentukan dalam URL selepas tanda #.

Mari kita ambil contoh laman web yang dihoskan melalui URL http://example.com/index.html .

Di halaman ini, anda akan menghoskan halaman utama aplikasi anda. Anggaplah jika aplikasi itu menganjurkan Acara dan seseorang ingin melihat apa itu pelbagai acara yang dipamerkan, atau ingin melihat perincian acara tertentu atau menghapus acara. Dalam aplikasi Halaman Tunggal, ketika routing diaktifkan, semua fungsi ini akan tersedia melalui pautan berikut

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

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

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

Simbol # akan digunakan bersama dengan rute yang berbeda (ShowEvent, DisplayEvent, dan DeleteEvent).

• Oleh itu, jika pengguna ingin melihat semua Acara, mereka akan diarahkan ke pautan ( http://example.com/index.html#ShowEvent ), jika tidak
• Sekiranya mereka ingin melihat acara tertentu, mereka akan diarahkan semula ke pautan ( http://example.com/index.html#DisplayEvent ) atau
• Sekiranya mereka ingin menghapus acara, mereka akan diarahkan ke pautan http://example.com/index.html#DeleteEvent .

Perhatikan bahawa URL utama tetap sama.

Dalam tutorial ini, anda akan belajar-

• Menambah Laluan Sudut ($ routeProvider)
• Membuat laluan lalai
• Mengakses parameter dari laluan
• Menggunakan perkhidmatan laluan $ Angular
• Mengaktifkan Penghalaan HTML5

Menambah Laluan Sudut ($ routeProvider)

Jadi seperti yang telah kita bincangkan sebelumnya, laluan di AngularJS digunakan untuk mengarahkan pengguna ke pandangan aplikasi anda yang berbeza. Dan penghalaan ini dilakukan pada halaman HTML yang sama sehingga pengguna mempunyai pengalaman bahawa dia tidak meninggalkan halaman.

Untuk melaksanakan routing, langkah-langkah utama berikut harus dilaksanakan dalam aplikasi Anda dalam urutan tertentu.

1. Rujukan ke sudut-laluan.js. Ini adalah fail JavaScript yang dikembangkan oleh Google yang mempunyai semua fungsi penghalaan. Ini perlu dimasukkan ke dalam aplikasi anda sehingga dapat merujuk semua modul utama yang diperlukan untuk routing.

2. Langkah penting seterusnya adalah menambahkan kebergantungan pada modul ngRoute dari dalam aplikasi anda. Ketergantungan ini diperlukan agar fungsi penghalaan dapat digunakan dalam aplikasi. Sekiranya kebergantungan ini tidak ditambahkan, maka seseorang tidak akan dapat menggunakan routing dalam aplikasi sudut.JS.

   Berikut adalah sintaks umum penyataan ini. Ini hanyalah pernyataan biasa modul dengan kemasukan kata kunci ngRoute.

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

3. Langkah seterusnya adalah mengkonfigurasi $ routeProvider anda. Ini diperlukan untuk menyediakan pelbagai laluan dalam aplikasi anda.

   Berikut adalah sintaks umum penyataan ini yang sangat jelas. Ini hanya menyatakan bahawa apabila jalan yang relevan dipilih, gunakan laluan untuk memaparkan pandangan yang diberikan kepada pengguna.

when(path, route)

4. Pautan ke laluan anda dari dalam halaman HTML anda. Di halaman HTML anda, anda akan menambahkan pautan rujukan ke pelbagai laluan yang tersedia dalam aplikasi anda.

 Laluan 1 

5. Akhirnya adalah penyertaan arahan ng-view, yang biasanya dalam tag div. Ini akan digunakan untuk menyuntikkan isi pandangan ketika rute yang relevan dipilih.

Sekarang, mari kita lihat contoh routing menggunakan langkah-langkah yang disebutkan di atas.

Dalam contoh kami,

Kami akan memberikan 2 pautan kepada pengguna,

• Salah satunya adalah untuk memaparkan topik untuk kursus Angular JS , dan yang lain adalah untuk kursus Node.js.
• Apabila pengguna mengklik salah satu pautan, topik untuk kursus itu akan dipaparkan.

Langkah 1) Sertakan fail laluan sudut sebagai rujukan skrip.

Fail laluan ini diperlukan untuk memanfaatkan fungsi mempunyai banyak laluan dan pandangan. Fail ini boleh dimuat turun dari laman web angular.JS.

Langkah 2) Tambahkan tag href yang akan mewakili pautan ke "Topik Angles JS" dan "Topik Node JS."

Langkah 3) Tambahkan tag div dengan arahan ng-view yang akan mewakili pandangan.

Ini akan membolehkan paparan yang sesuai disuntik setiap kali pengguna mengklik "Topik Sudut JS" atau "Topik NS JS."

Langkah 4) Dalam tag skrip anda untuk AngularJS, tambahkan "ngRoute module" dan perkhidmatan "$ routeProvider".

Penjelasan Kod:

1. Langkah pertama adalah memastikan untuk memasukkan "modul ngRoute." Dengan adanya ini, Angular akan secara automatik menangani perutean dalam aplikasi anda. Modul ngRoute yang dikembangkan oleh Google mempunyai semua fungsi yang memungkinkan perutean dapat dilakukan. Dengan menambahkan modul ini, aplikasi akan secara automatik memahami semua arahan routing.
2. $ Routeprovider adalah perkhidmatan yang digunakan sudut untuk mendengar di latar belakang laluan yang dipanggil. Oleh itu, apabila pengguna mengklik pautan, penyedia laluan akan mengesannya dan kemudian memutuskan jalan yang mana yang akan diambil.
3. Buat satu laluan untuk pautan Angular - Blok ini bermaksud bahawa apabila pautan Angular diklik, masukkan fail Angular.html dan juga gunakan Pengawal 'AngularController' untuk memproses sebarang logik perniagaan.
4. Buat satu laluan untuk pautan Node - Blok ini bermaksud bahawa apabila pautan Node diklik, masukkan fail Node.html dan juga gunakan Pengawal 'NodeController' untuk memproses sebarang logik perniagaan.

Langkah 5) Seterusnya adalah dengan menambahkan pengawal untuk memproses logik perniagaan untuk kedua-dua AngularController dan NodeController.

Di setiap pengawal, kami membuat pelbagai pasangan nilai-kunci untuk menyimpan nama dan perihalan Topik untuk setiap kursus. Pemboleh ubah array 'tutorial' ditambahkan ke objek lingkup untuk setiap pengawal.

Guru99 Global Event


Angular JS Topics
Node JS Topics

Langkah 6) Buat halaman yang dipanggil Angular.html dan Node.html. Untuk setiap halaman kami menjalankan langkah-langkah di bawah.

Langkah-langkah ini akan memastikan bahawa semua pasangan nilai-kunci dari array dipaparkan di setiap halaman.

1. Menggunakan arahan ng-ulangi untuk melalui setiap pasangan nilai-kunci yang ditentukan dalam pemboleh ubah tutorial.
2. Memaparkan nama dan keterangan setiap pasangan nilai-kunci.

• Sudut.html

Anguler

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

• Node.html

Node

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

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Sekiranya anda mengklik pada pautan Topik AngularJS output di bawah akan dipaparkan.

Hasilnya jelas menunjukkan bahawa,

• Apabila pautan "Topik Angular JS" diklik, routeProvider yang kami nyatakan dalam kod kami memutuskan bahawa kod Angular.html harus disuntik.
• Kod ini akan disuntikkan ke dalam tag "div", yang berisi arahan ng-view. Juga, kandungan untuk keterangan kursus berasal dari "pemboleh ubah tutorial" yang merupakan sebahagian dari objek lingkup yang ditentukan dalam AngularController.
• Apabila seseorang mengklik Topik Node.js, hasil yang sama akan berlaku, dan pandangan untuk topik Node.js akan ditunjukkan.
• Juga, perhatikan bahawa URL halaman tetap sama, hanya laluan selepas tag # yang berubah. Dan ini adalah konsep aplikasi halaman tunggal. Tag #hash dalam URL adalah pemisah yang memisahkan laluan (yang dalam kes kami adalah 'Angular' seperti yang ditunjukkan pada gambar di atas) dan halaman HTML utama (Contoh.html)

Membuat laluan lalai

Laluan di AngularJS juga menyediakan kemudahan untuk mempunyai laluan lalai. Ini adalah laluan yang dipilih jika tidak ada yang sesuai untuk laluan yang ada.

Laluan lalai dibuat dengan menambahkan keadaan berikut semasa menentukan perkhidmatan $ routeProvider.

Sintaks di bawah ini hanya bermaksud mengalihkan ke halaman lain jika ada laluan yang ada tidak sesuai.

otherwise ({redirectTo: 'page'});

Mari gunakan contoh yang sama di atas dan tambahkan laluan lalai ke perkhidmatan $ routeProvider kami.

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

Penjelasan Kod:

1. Di sini kita menggunakan kod yang sama seperti di atas dengan satu-satunya perbezaan adalah kita menggunakan pernyataan sebaliknya dan pilihan "redirectTo" untuk menentukan pandangan mana yang harus dimuat jika tidak ada rute yang ditentukan. Dalam kes kami, kami mahu paparan '/ Angular' ditunjukkan.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output,

• Anda dapat melihat dengan jelas bahawa pandangan lalai yang ditunjukkan adalah pandangan JS sudut.
• Ini kerana apabila halaman dimuat, ia pergi ke pilihan 'sebaliknya' dalam fungsi $ routeProvider dan memuatkan pandangan '/ Angular'.

Mengakses parameter dari laluan

Angular juga menyediakan fungsi untuk menyediakan parameter semasa routing. Parameter ditambahkan ke akhir laluan dalam URL, misalnya, http: //guru99/index.html#/Angular/1 . Dalam contoh ini

1. , http: //guru99/index.html adalah URL aplikasi utama kami
2. Simbol # adalah pemisah antara URL aplikasi utama dan laluan.
3. Sudut adalah laluan kami
4. Dan akhirnya '1' adalah parameter yang ditambahkan ke laluan kami

Sintaks bagaimana parameter dilihat dalam URL ditunjukkan di bawah:

HTMLPage # / route / parameter

Di sini anda akan melihat bahawa parameter dilalui setelah laluan di URL.

Jadi dalam contoh kami, di atas untuk topik JS Angular, kami dapat menyampaikan parameter seperti yang ditunjukkan di bawah

Contoh.html # / Sudut / 1

Contoh.html # / Sudut / 2

Contoh.html # / Sudut / 3

Di sini parameter 1, 2 dan 3 sebenarnya dapat mewakili topikid.

Mari lihat secara terperinci bagaimana kita dapat melaksanakannya.

Langkah 1) Tambahkan kod berikut ke pandangan anda

1. Tambahkan jadual untuk menunjukkan semua topik kursus JS Angular kepada pengguna

2. Tambahkan baris jadual untuk menunjukkan topik "Pengawal." Untuk baris ini, ubah tag href menjadi "Angular / 1" yang bermaksud bahawa apabila pengguna mengklik topik ini, parameter 1 akan diteruskan dalam URL bersama dengan rute.

3. Tambahkan baris jadual untuk menunjukkan topik "Model." Untuk baris ini, ubah tag href menjadi "Angular / 2" yang bermaksud bahawa apabila pengguna mengklik topik ini, parameter 2 akan diteruskan dalam URL bersama dengan rute.

4. Tambahkan baris jadual untuk menunjukkan topik "Arahan." Untuk baris ini, ubah tag href menjadi "Angular / 3" yang bermaksud bahawa apabila pengguna mengklik topik ini, parameter 3 akan diteruskan dalam URL bersama dengan rute.

Langkah 2) Dalam fungsi perkhidmatan routeprovider tambahkan: topicId untuk menandakan bahawa parameter apa pun yang dilewatkan dalam URL setelah laluan harus ditetapkan ke variabel topicId.

Langkah 3) Tambahkan kod yang diperlukan ke pengawal

1. Pastikan untuk menambahkan "$ routeParams" terlebih dahulu sebagai parameter semasa menentukan fungsi pengawal. Parameter ini akan memiliki akses ke semua parameter rute yang dilewatkan dalam URL.
2. Parameter "routeParams" memiliki rujukan ke objek topicId, yang diteruskan sebagai parameter rute. Di sini kita melampirkan pemboleh ubah '$ routeParams.topicId' ke objek skop kita sebagai pemboleh ubah '$ lingkup.tutotialid'. Ini dilakukan supaya dapat dirujuk dalam pandangan kami melalui pemboleh ubah tutorialid.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Langkah 4) Tambahkan ungkapan untuk memaparkan pemboleh ubah tutorialid di halaman Angular.html.

Anguler


{{tutorialid}}

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Di skrin output,

• Sekiranya anda mengklik pada pautan Butiran Topik untuk topik pertama, nombor 1 akan dilampirkan ke URL.
• Nombor ini kemudian akan diambil sebagai argumen "routeparam" oleh perkhidmatan routeprovider Angular.JS dan kemudian dapat diakses oleh pengawal kami.

Menggunakan perkhidmatan laluan $ Angular

Perkhidmatan laluan $ membolehkan anda mengakses sifat-sifat laluan. Perkhidmatan laluan $ tersedia sebagai parameter ketika fungsi ditentukan dalam pengawal. Sintaks umum bagaimana parameter laluan $ tersedia dari pengawal ditunjukkan di bawah;

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

1. myApp adalah modul sudut.JS yang ditentukan untuk aplikasi anda
2. MyController adalah nama pengawal yang ditentukan untuk aplikasi anda
3. Sama seperti pemboleh ubah skop $ disediakan untuk aplikasi anda, yang digunakan untuk menyampaikan maklumat dari pengawal ke paparan. Parameter $ laluan digunakan untuk mengakses sifat-sifat laluan.

Mari kita lihat bagaimana kita boleh menggunakan perkhidmatan laluan $.

Dalam contoh ini,

• Kami akan membuat pemboleh ubah khas sederhana yang disebut "mytext," yang akan mengandungi rentetan "Ini bersudut."
• Kami akan melampirkan pemboleh ubah ini ke laluan kami. Dan kemudian kita akan mengakses rentetan ini dari pengawal kita menggunakan perkhidmatan laluan $ dan kemudian menggunakan objek skop untuk memaparkannya dalam pandangan kita.

Oleh itu, mari kita lihat langkah-langkah yang perlu kita laksanakan untuk mencapainya.

Langkah 1) Tambahkan pasangan nilai kunci tersuai ke laluan. Di sini, kami menambahkan kunci yang disebut 'mytext' dan memberikannya nilai "Ini bersudut."

Langkah 2) Tambahkan kod yang berkaitan ke pengawal

1. Tambahkan parameter laluan $ ke fungsi pengawal. Parameter $ route adalah parameter utama yang ditentukan dalam sudut, yang membolehkan seseorang mengakses sifat-sifat laluan.
2. Pemboleh ubah "mytext" yang ditentukan dalam rute dapat diakses melalui rujukan $ route.current. Ini kemudian diberikan kepada pemboleh ubah 'teks' objek skop. Pemboleh ubah teks kemudian dapat diakses dari pandangan dengan sewajarnya.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Langkah 3) Tambahkan rujukan ke pemboleh ubah teks dari objek skop sebagai ekspresi. Ini akan ditambahkan ke halaman Angular.html kami seperti gambar di bawah.

Ini akan menyebabkan teks "Ini bersudut" disuntik ke dalam paparan. Ungkapan {{tutorialid}} sama dengan yang dilihat pada topik sebelumnya dan ini akan memaparkan nombor '1'.

Anguler


{{text}}

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output,

• Kita dapat melihat bahawa teks "Ini bersudut" juga akan dipaparkan ketika kita mengklik salah satu pautan dalam jadual. Id topik juga dipaparkan pada masa yang sama dengan teks.

Mengaktifkan Penghalaan HTML5

Penghalaan HTML5 digunakan pada dasarnya untuk membuat URL bersih. Ini bermaksud penghapusan hashtag dari URL. Jadi URL perutean, ketika perutean HTML5 digunakan, akan muncul seperti yang ditunjukkan di bawah ini

Contoh.html / Sudut / 1

Contoh.html / Sudut / 2

Contoh.html / Sudut / 3

Konsep ini biasanya dikenali sebagai menyampaikan URL cantik kepada pengguna.

Terdapat 2 langkah utama yang perlu dilakukan untuk penghalaan HTML5.

1. Mengkonfigurasi $ locationProvider
2. Menetapkan pangkalan kami untuk pautan relatif

Mari kita perhatikan perincian cara menjalankan langkah-langkah yang dinyatakan di dalam contoh kita di atas

Langkah 1) Tambahkan kod yang berkaitan ke modul sudut

1. Tambahkan pemalar baseURL ke aplikasi - Ini diperlukan untuk penghalaan HTML5 sehingga aplikasi mengetahui lokasi lokasi aplikasi.
2. Tambahkan perkhidmatan $ locationProvider. Perkhidmatan ini membolehkan anda menentukan html5Mode.
3. Tetapkan html5Mode perkhidmatan $ locationProvider ke true.

Langkah 2) Keluarkan semua #tag untuk pautan ('Angular / 1', 'Angular / 2', 'Angular / 3') untuk membuat URL yang mudah dibaca.

Guru99 Global Event


 
#
Angular JS topic
Description
 

 


l
l
Controllers
Topic details

2
2
Models
Topic details

3
3
Directives
Topic details

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output,

• Anda dapat melihat bahawa tanda # tidak ada ketika mengakses aplikasi.

Ringkasan

• Routing digunakan untuk menampilkan pandangan yang berbeza kepada pengguna di laman web yang sama. Ini pada dasarnya adalah konsep yang digunakan dalam aplikasi Halaman tunggal yang dilaksanakan untuk hampir semua aplikasi web moden
• Laluan lalai boleh disiapkan untuk penghalaan sudut.JS. Ini digunakan untuk menentukan apa yang akan menjadi paparan lalai yang akan ditunjukkan kepada pengguna
• Parameter dapat diteruskan ke rute melalui URL sebagai parameter laluan. Parameter ini kemudian diakses dengan menggunakan parameter $ routeParams dalam pengawal
• Perkhidmatan $ laluan dapat digunakan untuk menentukan pasangan kunci-nilai khusus dalam laluan yang kemudian dapat diakses dari dalam pandangan
• Perutean HTML5 digunakan untuk membuang #tag dari routing URL secara bersudut untuk membentuk URL cantik