Perutean AngularJS dengan Parameter: Contoh Aplikasi Halaman Tunggal

Daftar Isi:

Anonim

Sebelum kita mulai dengan perutean, mari kita lihat ikhtisar singkat tentang Aplikasi Halaman Tunggal.

Apa itu Aplikasi Halaman Tunggal?

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

Apa itu Routing di AngularJS?

Di AngularJS, perutean memungkinkan Anda membuat Aplikasi Halaman Tunggal.

  • Rute AngularJS memungkinkan Anda membuat URL berbeda untuk konten berbeda dalam aplikasi Anda.
  • Rute AngularJS memungkinkan seseorang untuk menampilkan beberapa konten tergantung pada rute mana yang dipilih.
  • Sebuah rute ditentukan dalam URL setelah tanda #.

Mari kita ambil contoh situs yang dihosting melalui URL http://example.com/index.html .

Pada halaman ini, Anda akan menghosting halaman utama aplikasi Anda. Misalkan jika aplikasi sedang mengatur suatu Acara dan seseorang ingin melihat berbagai acara yang ditampilkan, atau ingin melihat detail acara tertentu atau menghapus acara. Dalam aplikasi Halaman Tunggal, saat perutean diaktifkan, semua fungsi ini akan tersedia melalui tautan 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).

  • Jadi, jika pengguna ingin melihat semua Peristiwa, mereka akan diarahkan ke tautan ( http://example.com/index.html#ShowEvent ), jika tidak
  • Jika mereka hanya ingin melihat acara tertentu, mereka akan diarahkan ulang ke tautan ( http://example.com/index.html#DisplayEvent ) atau
  • Jika mereka ingin menghapus sebuah acara, mereka akan diarahkan ke tautan http://example.com/index.html#DeleteEvent .

Perhatikan bahwa URL utama tetap sama.

Dalam tutorial ini, Anda akan belajar-

  • Menambahkan Rute Sudut ($ routeProvider)
  • Membuat rute default
  • Mengakses parameter dari rute
  • Menggunakan layanan Angular $ route
  • Mengaktifkan Perutean HTML5

Menambahkan Rute Sudut ($ routeProvider)

Jadi seperti yang kita bahas sebelumnya, rute di AngularJS digunakan untuk merutekan pengguna ke tampilan aplikasi Anda yang berbeda. Dan perutean ini dilakukan pada halaman HTML yang sama sehingga pengguna memiliki pengalaman bahwa dia tidak meninggalkan halaman.

Untuk mengimplementasikan perutean, langkah-langkah utama berikut harus diterapkan di aplikasi Anda dalam urutan tertentu.

  1. Referensi ke angular-route.js. Ini adalah file JavaScript yang dikembangkan oleh Google yang memiliki semua fungsi perutean. Ini perlu ditempatkan di aplikasi Anda sehingga dapat mereferensikan semua modul utama yang diperlukan untuk perutean.

  2. Langkah penting berikutnya adalah menambahkan dependensi ke modul ngRoute dari dalam aplikasi Anda. Ketergantungan ini diperlukan agar fungsionalitas perutean dapat digunakan dalam aplikasi. Jika ketergantungan ini tidak ditambahkan, maka seseorang tidak akan dapat menggunakan perutean dalam aplikasi angular.JS.

    Di bawah ini adalah sintaks umum dari pernyataan ini. Ini hanyalah deklarasi normal dari sebuah modul dengan penyertaan kata kunci ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);
  1. Langkah selanjutnya adalah mengonfigurasi $ routeProvider Anda. Ini diperlukan untuk menyediakan berbagai rute dalam aplikasi Anda.

    Di bawah ini adalah sintaks umum dari pernyataan ini yang sangat jelas. Ini hanya menyatakan bahwa ketika jalur yang relevan dipilih, gunakan rute untuk menampilkan tampilan yang diberikan kepada pengguna.

when(path, route)
  1. Link ke rute Anda dari dalam halaman HTML Anda. Di halaman HTML, Anda akan menambahkan link referensi ke berbagai rute yang tersedia di aplikasi Anda.
 Rute 1
  1. Terakhir adalah penyertaan direktif ng-view, yang biasanya ada dalam tag div. Ini akan digunakan untuk memasukkan konten tampilan saat rute yang relevan dipilih.

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

Dalam contoh kami,

Kami akan menyajikan 2 tautan ke pengguna,

  • Salah satunya adalah menampilkan topik untuk kursus JS Angular , dan yang lainnya adalah untuk kursus Node.js.
  • Ketika pengguna mengklik salah satu tautan, topik untuk kursus itu akan ditampilkan.

Langkah 1) Sertakan file rute-sudut sebagai referensi skrip.

File rute ini diperlukan untuk memanfaatkan fungsionalitas yang memiliki beberapa rute dan tampilan. File ini dapat diunduh dari situs angular.JS.

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

Step3) Tambahkan tag div dengan direktif ng-view yang akan mewakili tampilan.

Ini akan memungkinkan tampilan terkait untuk dimasukkan setiap kali pengguna mengklik "Topik JS Angular" atau "Topik JS Node."

Langkah 4) Di tag skrip Anda untuk AngularJS, tambahkan "modul ngRoute" dan layanan "$ routeProvider".

Penjelasan Kode:

  1. Langkah pertama adalah memastikan untuk menyertakan "modul ngRoute". Dengan ini, Angular secara otomatis akan menangani perutean di aplikasi Anda. Modul ngRoute yang dikembangkan oleh Google memiliki semua fungsi yang memungkinkan perutean menjadi mungkin. Dengan menambahkan modul ini, aplikasi akan secara otomatis memahami semua perintah perutean.
  2. $ Routeprovider adalah layanan yang digunakan angular untuk mendengarkan di latar belakang ke rute yang dipanggil. Jadi ketika pengguna mengklik link, penyedia rute akan mendeteksi ini dan kemudian memutuskan rute mana yang akan diambil.
  3. Buat satu rute untuk tautan Angular - Blok ini berarti bahwa ketika tautan Angular diklik, masukkan file Angular.html dan juga gunakan Controller 'AngularController' untuk memproses logika bisnis apa pun.
  4. Buat satu rute untuk tautan Node - Blok ini berarti bahwa ketika tautan Node diklik, masukkan file Node.html dan juga gunakan Controller 'NodeController' untuk memproses logika bisnis apa pun.

Langkah 5) Berikutnya adalah menambahkan pengontrol untuk memproses logika bisnis untuk AngularController dan NodeController.

Di setiap pengontrol, kami membuat larik pasangan nilai-kunci untuk menyimpan nama dan deskripsi Topik untuk setiap kursus. Variabel array 'tutorial' ditambahkan ke objek lingkup untuk setiap pengontrol.

Event Registration

Guru99 Global Event

Langkah 6) Buat halaman bernama Angular.html dan Node.html. Untuk setiap halaman kami melakukan langkah-langkah di bawah ini.

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

  1. Menggunakan direktif ng-repeat untuk menelusuri setiap key-value pair yang ditentukan dalam variabel tutorial.
  2. Menampilkan nama dan deskripsi setiap key-value pair.
  • Angular.html



Anguler


    

  • Course : {{ptutor.Name}} - {{ptutor.Description}}
    •
  • Node.html



Node


    

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

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Jika Anda mengklik tautan AngularJS Topics, output di bawah ini akan ditampilkan.

Outputnya dengan jelas menunjukkan bahwa,

  • Saat tautan "Angular JS Topics" diklik, routeProvider yang kami nyatakan dalam kode kami memutuskan bahwa kode Angular.html harus dimasukkan.
  • Kode ini akan dimasukkan ke dalam tag "div", yang berisi direktif ng-view. Selain itu, konten untuk deskripsi kursus berasal dari "variabel tutorial" yang merupakan bagian dari objek cakupan yang ditentukan di AngularController.
  • Ketika seseorang mengklik Topik Node.js, hasil yang sama akan terjadi, dan tampilan untuk topik Node.js akan terwujud.
  • Selain itu, perhatikan bahwa URL halaman tetap sama, hanya rute setelah tag # yang berubah. Dan inilah konsep aplikasi satu halaman. Tag #hash di URL adalah pemisah yang memisahkan rute (yang dalam kasus kami adalah 'Angular' seperti yang ditunjukkan pada gambar di atas) dan halaman HTML utama (Sample.html)

Membuat rute default

Routing di AngularJS juga menyediakan fasilitas untuk memiliki rute default. Ini adalah rute yang dipilih jika tidak ada yang cocok dengan rute yang ada.

Rute default dibuat dengan menambahkan kondisi berikut saat menentukan layanan $ routeProvider.

Sintaks di bawah ini hanya berarti mengarahkan ke halaman lain jika salah satu rute yang ada tidak cocok.

otherwise ({redirectTo: 'page'});

Mari gunakan contoh yang sama di atas dan tambahkan rute default ke layanan $ routeProvider kita.

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

Penjelasan Kode:

  1. Di sini kami menggunakan kode yang sama seperti di atas dengan satu-satunya perbedaan adalah bahwa kami menggunakan pernyataan sebaliknya dan opsi "redirectTo" untuk menentukan tampilan mana yang harus dimuat jika tidak ada rute yang ditentukan. Dalam kasus kami, kami ingin tampilan '/ Angular' ditampilkan.

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Dari keluarannya,

  • Anda dapat dengan jelas melihat bahwa tampilan default yang ditampilkan adalah tampilan JS sudut.
  • Ini karena ketika halaman dimuat, ia pergi ke opsi 'sebaliknya' dalam fungsi $ routeProvider dan memuat tampilan '/ Angular'.

Mengakses parameter dari rute

Angular juga menyediakan fungsionalitas untuk menyediakan parameter selama perutean. Parameter ditambahkan ke akhir rute di 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 rute.
  3. Sudut adalah rute kami
  4. Dan akhirnya '1' adalah parameter yang ditambahkan ke rute kita

Sintaks tentang tampilan parameter di URL ditunjukkan di bawah ini:

HTMLPage # / route / parameter

Di sini Anda akan melihat bahwa parameter dilewatkan setelah rute di URL.

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

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

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

Mari kita lihat secara detail bagaimana kita dapat menerapkan ini.

Langkah 1) Tambahkan kode berikut ke tampilan Anda

  1. Tambahkan tabel untuk menampilkan semua topik untuk kursus JS Angular kepada pengguna

  2. Tambahkan baris tabel untuk menampilkan topik "Pengontrol". Untuk baris ini, ubah tag href menjadi "Angular / 1" yang berarti ketika pengguna mengklik topik ini, parameter 1 akan diteruskan di URL bersama dengan rutenya.

  3. Tambahkan baris tabel untuk menampilkan topik "Model". Untuk baris ini, ubah tag href menjadi "Angular / 2" yang berarti ketika pengguna mengklik topik ini, parameter 2 akan diteruskan di URL bersama dengan rutenya.

  4. Tambahkan baris tabel untuk menampilkan topik "Arahan". Untuk baris ini, ubah tag href menjadi "Angular / 3" yang berarti ketika pengguna mengklik topik ini, parameter 3 akan diteruskan di URL bersama dengan rutenya.

Langkah 2) Dalam fungsi layanan routeprovider tambahkan: topicId untuk menunjukkan bahwa parameter apa pun yang diteruskan di URL setelah rute harus ditetapkan ke variabel topicId.

Langkah 3) Tambahkan kode yang diperlukan ke pengontrol

  1. Pastikan untuk menambahkan "$ routeParams" sebagai parameter saat mendefinisikan fungsi kontroler. Parameter ini akan memiliki akses ke semua parameter rute yang diteruskan di URL.
  2. Parameter "routeParams" memiliki referensi ke objek topicId, yang diteruskan sebagai parameter rute. Di sini kita melampirkan variabel '$ routeParams.topicId' ke objek lingkup kita sebagai variabel '$ scope.tutotialid'. Ini dilakukan agar dapat direferensikan dalam tampilan kami melalui variabel tutorialid.

Event Registration

Guru99 Global Event





 #Angular JS topicDescription 


 



llControllersTopic details



22ModelsTopic details



33DirectivesTopic details

Langkah 4) Tambahkan ekspresi untuk menampilkan variabel tutorialid di halaman Angular.html.



Anguler



{{tutorialid}}

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Di layar keluaran,

  • Jika Anda mengklik tautan Detail Topik untuk topik pertama, nomor 1 akan ditambahkan ke URL.
  • Nomor ini kemudian akan diambil sebagai argumen "routeparam" oleh layanan penyedia router Angular.JS dan kemudian dapat diakses oleh pengontrol kami.

Menggunakan layanan Angular $ route

Layanan $ route memungkinkan Anda untuk mengakses properti dari rute tersebut. Layanan $ route tersedia sebagai parameter ketika fungsi didefinisikan di controller. Sintaks umum tentang bagaimana parameter $ route tersedia dari controller ditampilkan di bawah;

myApp.controller('MyController',function($scope,$route)
  1. myApp adalah modul angular.JS yang ditentukan untuk aplikasi Anda
  2. MyController adalah nama pengontrol yang ditentukan untuk aplikasi Anda
  3. Sama seperti variabel $ scope tersedia untuk aplikasi Anda, yang digunakan untuk meneruskan informasi dari controller ke view. Parameter $ route digunakan untuk mengakses properti dari rute.

Mari kita lihat bagaimana kita dapat menggunakan layanan $ route.

Dalam contoh ini,

  • Kita akan membuat variabel kustom sederhana yang disebut "mytext", yang akan berisi string "This is angular".
  • Kami akan melampirkan variabel ini ke rute kami. Dan kemudian kita akan mengakses string ini dari controller kita menggunakan $ route service dan kemudian menggunakan objek scope untuk menampilkannya dalam view kita.

Jadi, mari kita lihat langkah-langkah yang perlu kita lakukan untuk mencapai ini.

Langkah 1) Tambahkan pasangan nilai kunci khusus ke rute. Di sini, kami menambahkan kunci yang disebut 'mytext' dan memberinya nilai "This is angular."

Langkah 2) Tambahkan kode yang relevan ke pengontrol

  1. Tambahkan parameter $ route ke fungsi controller. Parameter $ route adalah parameter kunci yang didefinisikan dalam angular, yang memungkinkan seseorang untuk mengakses properti dari rute tersebut.
  2. Variabel "mytext" yang didefinisikan dalam rute dapat diakses melalui referensi $ route.current. Ini kemudian ditugaskan ke variabel 'teks' dari objek lingkup. Variabel teks kemudian dapat diakses dari tampilan yang sesuai.

Event Registration

Guru99 Global Event





 #Angular JS topicDescription 


 



llControllersTopic details



22ModelsTopic details



33DirectivesTopic details

Langkah 3) Tambahkan referensi ke variabel teks dari objek lingkup sebagai ekspresi. Ini akan ditambahkan ke halaman Angular.html kami seperti yang ditunjukkan di bawah ini.

Ini akan menyebabkan teks "Ini bersudut" dimasukkan ke dalam tampilan. Ekspresi {{tutorialid}} sama dengan yang terlihat di topik sebelumnya dan ini akan menampilkan angka '1'.



Anguler



{{text}}

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Dari keluarannya,

  • Kita dapat melihat bahwa teks "Ini bersudut" juga ditampilkan saat kita mengklik salah satu link di tabel. Id topik juga ditampilkan bersamaan dengan teks.

Mengaktifkan Perutean HTML5

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

Sample.html / Angular / 1

Sample.html / Angular / 2

Sample.html / Angular / 3

Konsep ini biasanya dikenal sebagai menyajikan URL cantik kepada pengguna.

Ada 2 langkah utama yang perlu dilakukan untuk perutean HTML5.

  1. Mengonfigurasi $ locationProvider
  2. Mengatur basis kami untuk tautan relatif

Mari kita lihat detail bagaimana melakukan langkah-langkah yang disebutkan di atas dalam contoh kita di atas

Langkah 1) Tambahkan kode yang relevan ke modul sudut

  1. Tambahkan konstanta baseURL ke aplikasi - Ini diperlukan untuk perutean HTML5 sehingga aplikasi mengetahui lokasi dasar aplikasi.
  2. Tambahkan layanan $ locationProvider. Layanan ini memungkinkan Anda untuk menentukan html5Mode.
  3. Setel html5Mode dari layanan $ locationProvider ke true.

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

Event Registration

Guru99 Global Event





 #Angular JS topicDescription 


 



llControllersTopic details



22ModelsTopic details



33DirectivesTopic details

Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Dari keluarannya,

  • Anda dapat melihat bahwa # tag tidak ada saat mengakses aplikasi.

Ringkasan

  • Perutean digunakan untuk menyajikan tampilan berbeda kepada pengguna di halaman web yang sama. Ini pada dasarnya adalah konsep yang digunakan dalam aplikasi satu halaman yang diimplementasikan untuk hampir semua aplikasi web modern
  • Rute default dapat diatur untuk perutean angular.JS. Ini digunakan untuk menentukan apa yang akan menjadi tampilan default yang akan ditampilkan kepada pengguna
  • Parameter dapat diteruskan ke rute melalui URL sebagai parameter rute. Parameter ini kemudian diakses dengan menggunakan parameter $ routeParams di kontroler
  • Layanan $ route dapat digunakan untuk menentukan pasangan nilai kunci kustom di rute yang kemudian dapat diakses dari dalam tampilan.
  • Perutean HTML5 digunakan untuk menghapus #tag dari URL perutean secara bersudut untuk membentuk URL yang cantik