Pengaturan Routing AngularJs dengan parameter

Sebelum kita melihat bagaimana routing bekerja di AngularJS, ada baiknya untuk memahami jenis aplikasi yang menjadi sasaran routing ini. Bagian di bawah ini menjelaskan konteks tersebut, dan setiap teknik yang akan dibahas selanjutnya dibangun di atasnya.

Apa itu Aplikasi Satu Halaman?

Aplikasi satu halaman, atau SPA, adalah aplikasi web yang memuat satu halaman HTML dan kemudian memperbarui halaman tersebut secara dinamis saat pengguna berinteraksi dengannya. Alih-alih meminta dokumen baru dari server setiap kali diklik, SPA hanya mengganti bagian halaman yang berubah.

Desain tersebut menimbulkan satu masalah. Jika browser tidak pernah beralih ke dokumen baru, bilah alamat tidak akan pernah berubah, sehingga pengguna tidak dapat menambahkan bookmark pada layar, membagikannya, atau menggunakan tombol kembali. Perutean (routing) menyelesaikan masalah ini dengan tepat.

Apa itu Perutean di AngularJS?

Perutean di AngularJS adalah metode yang memungkinkan Anda membuat Aplikasi Halaman Tunggal (Single Page Application). Metode ini memungkinkan Anda membuat berbagai macam aplikasi. URLuntuk konten yang berbeda di aplikasi web Anda. Routing AngularJS juga membantu menampilkan beberapa konten tergantung pada rute mana yang dipilih. Hal ini ditentukan dalam URL setelah tanda #.

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

Halaman ini menampilkan layar utama aplikasi Anda. Misalkan aplikasi tersebut menyelenggarakan sebuah Acara dan pengguna ingin melihat daftar acara, melihat detail salah satu acara, atau menghapus salah satu acara. Dalam aplikasi Single Page dengan routing yang diaktifkan, semua ini tersedia melalui tautan berikut.

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

• Untuk melihat semua acara, pengguna akan diarahkan ke http://example.com/index.html#ShowEvent
• Untuk menyaksikan suatu acara tertentu, mereka diarahkan ke http://example.com/index.html#DisplayEvent
• Untuk menghapus suatu acara, mereka diarahkan ke http://example.com/index.html#DeleteEvent

Perhatikan bahwa yang utama URL tetap sama. Hanya fragmen setelah tanda # yang berubah, dan fragmen itulah yang dipantau oleh AngularJS. Setelah konsepnya dipahami, bagian selanjutnya akan membahas bagian-bagian yang harus Anda hubungkan sebelum semuanya berfungsi.

Menambahkan Rute AngularJS menggunakan $routeProvider

Seperti yang telah dibahas sebelumnya, rute di AngularJS Digunakan untuk mengarahkan pengguna ke tampilan aplikasi Anda yang berbeda. Pengarahan ini dilakukan pada halaman HTML yang sama, sehingga pengguna merasa seolah-olah mereka tidak meninggalkan halaman tersebut.

Untuk mengimplementasikan routing, langkah-langkah utama berikut harus diimplementasikan dalam aplikasi Anda dalam urutan tertentu.

1. Referensi angular-route.js. Ini JavaNaskah berkas, dikembangkan oleh Google, berisi semua fungsi perutean dan harus disertakan agar aplikasi dapat merujuk kebutuhan perutean modul.
2. Tambahkan dependensi ke modul ngRoute dari dalam aplikasi Anda. Tanpa dependensi ini, routing tidak dapat digunakan sama sekali di aplikasi AngularJS.

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

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

3. Konfigurasikan `$routeProvider` Anda. Ini menyediakan berbagai rute dalam aplikasi Anda, dan sintaksnya hanya menyatakan bahwa ketika jalur yang relevan dipilih, gunakan rute tersebut untuk menampilkan tampilan yang diberikan.

when(path, route)

4. Tautan ke rute Anda dari dalam halaman HTML Anda. Di halaman HTML Anda, Anda akan menambahkan tautan referensi ke berbagai rute yang tersedia di aplikasi Anda.

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

5. Yang terakhir adalah penyertaan arahan ng-view, yang biasanya ada dalam tag div. Ini akan digunakan untuk memasukkan konten tampilan ketika rute yang relevan dipilih.

💡 olymp trade indonesiaTip: Kelima langkah tersebut wajib dilakukan. Referensi angular-route.js yang hilang adalah alasan paling umum mengapa sebuah rute tidak melakukan apa pun secara diam-diam, karena $routeProvider tidak ada tanpa itu. Bagian selanjutnya akan menggabungkan kelima langkah tersebut dalam contoh yang berfungsi.

Contoh Perutean AngularJS

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

Dalam contoh perutean AngularJS kami dengan parameter,

• Salah satu tautan adalah untuk menampilkan topik untuk sebuah AngularJS saja, dan yang lainnya untuk Node.js Tentu saja.
• Ketika pengguna mengklik salah satu link, topik untuk kursus tersebut akan ditampilkan.

Langkah 1) Sertakan file rute sudut sebagai referensi skrip.

File rute ini diperlukan agar dapat menggunakan fungsionalitas beberapa rute dan tampilan. File ini dapat diunduh dari situs web AngularJS.

Langkah 2) Tambahkan tag href yang akan mewakili tautan ke “Topik JS Sudut” dan “Topik Node JS.”

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

Ini akan memungkinkan tampilan yang sesuai untuk dimasukkan setiap kali pengguna mengklik “Topik JS Sudut” atau “Topik Node JS.”

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

Code Penjelasan:

1. Sertakan modul “ngRoute”. Dengan adanya modul ini, Angular akan menangani perutean secara otomatis dan memahami semua perintah perutean.
2. `$routeProvider` adalah layanan yang mendengarkan rute yang dipanggil di latar belakang. Ketika pengguna mengklik tautan, layanan ini mendeteksi hal tersebut dan memutuskan rute mana yang akan diambil.
3. Buat satu rute untuk tautan Angular: saat diklik, suntikkan Angular.html dan gunakan 'AngularController' untuk logika bisnis.
4. Buat satu rute untuk tautan Node, yang menyuntikkan Node.html dan menggunakan 'NodeController' dengan cara yang sama.

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

Di setiap controller, kita membuat array pasangan kunci-nilai untuk menyimpan nama dan deskripsi Topik untuk setiap kursus. Variabel array 'tutorial' ditambahkan ke objek scope untuk setiap controller.

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

⚠️ Koreksi telah diterapkan. The <title> label itu berada di dalam <body>, chrset="UTF 8" salah eja, tautan kedua mengarah ke #Node.html alih-alih rute yang terdaftar /Node, dan jalur templat membawa garis miring di depannya yang mengarah ke akar domain.

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 pada setiap halaman.

1. Menggunakan arahan ng-ulangi untuk menelusuri setiap pasangan kunci-nilai yang didefinisikan dalam variabel tutorial.
2. Menampilkan nama dan deskripsi setiap pasangan nilai kunci.

• Angular.html

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

• Node.html — identik dengan daftar di atas, dengan judul diubah menjadi “Node”. Kedua templat tersebut terbaca sama. tutorial variabel, yang masing-masing pengontrol sediakan dari cakupannya sendiri.

⚠️ Koreksi: Judul di Angular.html asli tertulis “Anguler”. Ejaan tersebut telah dikoreksi di atas.

Jika kode berhasil dieksekusi, output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

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

Outputnya dengan jelas menunjukkan bahwa,

• Ketika tautan “Angular JS Topics” diklik, penyedia rute 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 deskripsi kursus berasal dari "variabel tutorial" yang merupakan bagian dari objek cakupan yang ditentukan dalam AngularController.
• Ketika seseorang mengklik Node.js Topik, hasil yang sama akan terjadi, dan tampilan untuk topik Node.js akan ditampilkan.
• Selain itu, perhatikan bahwa halaman tersebut URL tetap sama. Hanya rute setelah tag # yang berubah, dan inilah konsep aplikasi halaman tunggal. Tag #hash di URL adalah pemisah antara rute (yang dalam kasus kita adalah 'Angular') dan halaman HTML utama (Sample.html).

Contoh ini hanya berfungsi saat pengguna mengklik tautan yang sesuai dengan rute yang terdaftar. Bagian selanjutnya membahas apa yang seharusnya terjadi ketika tidak ada yang cocok.

Membuat Rute Default di AngularJS

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

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

Sintaks di bawah ini 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 kami.

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

Code Penjelasan:

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

Jika kode berhasil dieksekusi, 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 AngularJS.
• Hal ini karena saat halaman dimuat, ia akan menuju ke opsi 'otherwise' dalam fungsi $routeProvider dan memuat tampilan '/Angular'.

Rute default menentukan tampilan mana yang dimuat. Bagian selanjutnya membahas bagaimana satu rute dapat melayani banyak catatan dengan membawa nilai di dalamnya. URL.

Cara Mengakses Parameter dari Rute AngularJS

Angular juga menyediakan fungsionalitas untuk meneruskan parameter selama routing. Parameter ditambahkan ke akhir rute di dalam URL, Misalnya, http://guru99/index.html#/Angular/1. Dalam contoh perutean Angular ini,

1. http://guru99/index.html adalah aplikasi utama kami URL
2. Simbol # adalah pemisah antara aplikasi utama. URL dan rutenya
3. Angular adalah rute kami
4. Dan terakhir '1' adalah parameter yang ditambahkan ke rute kita

Sintaks umumnya adalah HTMLHalaman#/rute/parameter, sehingga topik-topik sebelumnya menjadi Sample.html#/Angular/1, #/Angular/2 dan #/Angular/3, di mana angka tersebut adalah topicid.

Mari kita lihat secara detail bagaimana kita dapat mengimplementasikan rute Angular dengan parameter.

Langkah 1) Tambahkan kode berikut ke tampilan Anda

1. Tambahkan tabel untuk menampilkan semua topik kursus Angular JS kepada pengguna.
2. Tambahkan baris tabel untuk menampilkan topik “Controller”. Untuk baris ini, atur href ke “#!/Angular/1”, sehingga mengklik topik tersebut akan meneruskan parameter 1. URL di sepanjang rute.
3. Tambahkan baris untuk topik “Model,” dengan href diatur ke “#!/Angular/2” sehingga parameter 2 ikut dikirim. URL.
4. Tambahkan baris untuk topik “Direktif,” dengan href diatur ke “#!/Angular/3” sehingga parameter 3 ikut terbawa. URL.

Langkah 2) Tambahkan ID topik di fungsi layanan routeProvider
Di dalam fungsi layanan routeProvider, tambahkan :topicId placeholder untuk menunjukkan bahwa parameter apa pun yang dilewatkan URL Setelah itu, rute tersebut harus ditetapkan ke variabel topicId.

Langkah 3) Tambahkan kode yang diperlukan ke pengontrol

1. Pastikan untuk menambahkan "$routeParams" sebagai parameter terlebih dahulu saat mendefinisikan fungsi controller. Parameter ini akan memiliki akses ke semua parameter rute yang diteruskan. URL.
2. “$routeParams” menyimpan topicId yang diteruskan dalam rute. Melampirkan $routeParams.topicId terhadap cakupan sebagai $scope.tutorialid membuatnya tersedia untuk dilihat sebagai 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>

⚠️ Koreksi telah diterapkan. Aslinya menggunakan huruf tersebut l alih-alih angka 1 in href="#Angular/l", menghilangkan ng-view kontainer sehingga template tidak punya tempat untuk dirender, dan dimuat angular-route.js sebelum angular.min.js, yang menimbulkan kesalahan modul.

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

<h2>Angular</h2>

<br><br>{{tutorialid}}

Jika kode berhasil dieksekusi, output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Di layar keluaran,

• Jika Anda mengklik tautan Detail Topik untuk topik pertama, angka 1 akan ditambahkan ke dalamnya. URL.
• Angka tersebut diambil sebagai argumen “routeParams” dan dapat diakses di controller.

Membaca parameter itu mudah. ​​Mengambil data yang diidentifikasi oleh parameter tersebut, sebelum tampilan muncul, adalah tugas dari properti yang akan dibahas selanjutnya.

Cara Memuat Data Sebelumnya dengan Properti resolve

Pengontrol pada bagian sebelumnya membaca ID topik dan langsung menampilkannya. Aplikasi sebenarnya harus terlebih dahulu mengambil data dari server, dan jika tampilan dirender sebelum permintaan tersebut selesai, pengguna akan melihat templat kosong yang akan terisi beberapa saat kemudian. resolve Properti ini menghilangkan tampilan konten kosong yang muncul sekilas.

Setiap kunci di dalam resolve Objek adalah dependensi yang disiapkan AngularJS sebelum rute diaktifkan. Jika nilainya berupa promise, router akan menunggu hingga promise tersebut selesai. Hanya setelah semua promise terselesaikan, AngularJS akan membuat instance controller dan merender template, dan nilai-nilai yang telah diselesaikan akan diinjeksikan ke dalam controller berdasarkan namanya, persis seperti layanan lainnya.

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

Dua perilaku penting di sini. Promise yang ditolak membatalkan perubahan rute dan membiarkan browser tetap pada tampilan saat ini, sehingga permintaan yang gagal tidak pernah menghasilkan halaman yang rusak. Namun, karena router memblokir saat promise tertunda, endpoint yang lambat membuat aplikasi tampak macet. Pasangan resolve dengan indikator kemajuan yang didorong oleh $routeChangeStart ke $routeChangeSuccess acara.

⚠️ Peringatan: Jangan pernah menempatkan pemeriksaan otentikasi hanya di dalam resolveMenolak rute menyembunyikan tampilan tetapi tidak melindungi data di baliknya, dan titik akhir API tetap harus memberlakukan akses pada server.

Selain memuat data terlebih dahulu, sebuah rute juga dapat membawa nilai konfigurasi statis. Layanan yang dijelaskan selanjutnya adalah bagaimana pengontrol membacanya.

Cara Menggunakan Layanan $route Sudut

Layanan `$route` memungkinkan Anda mengakses properti rute. Layanan `$route` tersedia sebagai parameter saat fungsi didefinisikan di controller. Sintaks umum tentang bagaimana parameter `$route` tersedia dari controller ditunjukkan di bawah ini.

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

1. myApp adalah modul AngularJS yang didefinisikan untuk aplikasi Anda.
2. MyController adalah nama controller yang didefinisikan untuk aplikasi Anda.
3. Sama seperti `$scope` yang meneruskan informasi dari controller ke view, `$route` mengekspos properti dari rute saat ini.

Mari kita lihat bagaimana kita dapat menggunakan layanan $route.

Dalam contoh ini,

• Kita akan membuat variabel khusus sederhana yang disebut "teks saya", yang akan berisi string "Ini bersudut".
• Kita akan melampirkan variabel ini ke rute kita. Later Kita akan mengakses string ini dari controller kita menggunakan layanan `$route` dan kemudian menggunakan objek `scope` untuk menampilkannya di view kita.

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

Langkah 1) Tambahkan pasangan nilai kunci khusus ke rute. Di sini, kami menambahkan kunci yang disebut 'mytext' dan memberinya nilai “Ini bersudut.”

Langkah 2) Tambahkan kode yang relevan ke controller.

1. Tambahkan parameter `$route` ke fungsi controller. Parameter `$route` adalah parameter kunci yang didefinisikan di 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 cakupan. Variabel teks kemudian dapat diakses dari tampilan yang sesuai.

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

Langkah 3) Tambahkan referensi ke variabel teks dari objek cakupan 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 pada topik sebelumnya dan ini akan menampilkan angka '1'.

<h2>Angular</h2>

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

Jika kode berhasil dieksekusi, output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Dari keluarannya,

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

Setiap URL Yang ditampilkan sejauh ini masih mengandung simbol #. Langkah konfigurasi terakhir akan menghapusnya.

Mengaktifkan Perutean HTML5

Perutean HTML5 digunakan untuk membuat tampilan yang bersih. URLArtinya penghapusan tagar dari URLJadi, peruteannya... URLSaat menggunakan routing HTML5, tampilannya akan seperti yang ditunjukkan di bawah ini.

Contoh.html/Angular/1

Contoh.html/Angular/2

Contoh.html/Angular/3

Konsep ini biasanya dikenal sebagai menyajikan sesuatu yang cantik. URL kepada pengguna.

Ada 2 langkah utama yang perlu dilakukan untuk perutean HTML5.

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

Mari kita lihat secara detail bagaimana cara melaksanakan langkah-langkah yang disebutkan di atas dalam contoh kita.

Langkah 1) Tambahkan kode yang relevan ke modul Angular.

1. Tambahkan <base> menambahkan tag ke bagian head dokumen. Ini diperlukan untuk routing HTML5 agar aplikasi mengetahui lokasi dasar aplikasi tersebut.
2. Tambahkan layanan `$locationProvider`. Layanan ini memungkinkan Anda untuk menentukan html5Mode.
3. Setel html5Mode layanan $locationProvider ke true.

Langkah 2) Hapus semua tag # untuk tautan ('Angular/1', 'Angular/2', 'Angular/3') agar mudah dibaca. 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>

⚠️ Koreksi: yang asli menyatakan sebuah baseUrl konstanta yang menunjuk ke jalur IDE lokal, yang tidak berpengaruh pada html5Mode. AngularJS membaca lokasi dasar dari <base href> tag. Versi aslinya juga disisipkan $locationProvider tanpa pernah menelepon html5Mode(true), jadi tanda pagar (hash) tersebut tidak pernah dihapus.

Jika kode berhasil dieksekusi, output berikut akan ditampilkan saat Anda menjalankan kode di browser.

Keluaran:

Dari keluarannya,

• Terlihat tag # tidak ada pada saat mengakses aplikasi.

Semua hal di atas menggunakan ngRoute, yaitu router yang disediakan oleh tim AngularJS. Ini bukan satu-satunya pilihan, dan perbandingan di bawah ini menjelaskan kapan alternatif lain lebih tepat.

ngRoute vs ui-router: Router Mana yang Harus Dipilih?

ngRoute dikelola oleh tim AngularJS dan sesuai dengan URL langsung ke satu template dan controller. ui-router adalah proyek komunitas yang dibangun untuk menghilangkan keterbatasan utama ngRoute: ia mencocokkan berdasarkan aplikasi. negara daripada pada URL sendirian, yang memungkinkan satu layar untuk memuat beberapa wilayah yang dirutekan secara independen.

Pilih ngRoute saat setiap URL ui-router dipetakan ke satu tampilan halaman penuh, karena tidak memerlukan dependensi tambahan dan seluruh API muat dalam satu halaman. Pilih ui-router ketika layar memiliki panel yang bernavigasi secara independen, atau ketika tampilan anak harus menggunakan kembali data yang dimuat oleh induk. Migrasi di kemudian hari dimungkinkan tetapi tidak mudah, karena nama state menggantikan URL pola di seluruh templat.

Kesalahan Routing AngularJS Umum dan Cara Memperbaikinya

Sebagian besar kegagalan routing menghasilkan tampilan ng-view kosong, bukan kesalahan konsol, yang membuatnya lebih sulit didiagnosis daripada seharusnya. Setiap gejala di bawah ini menyebutkan penyebab dan solusinya.

• Penyedia tidak dikenal: $routeProvider: angular-route.js tidak pernah dimuat, atau dimuat sebelum angular.min.js. Referensikan pustaka inti terlebih dahulu.
• Tampilan tetap kosong tanpa kesalahan: Tidak ada elemen yang membawa direktif ng-view, sehingga template tidak memiliki tempat untuk melakukan rendering.
• Tidak ada yang dimuat pada kunjungan pertama: Tidak ada rute yang cocok dengan jalur kosong. Tambahkan blok otherwise dengan nilai redirectTo.
• $routeParams kosong: Pola tersebut kehilangan placeholder titik dua. Seharusnya tertulis '/Angular/:topicId'.
• Template 404 setelah html5Mode: Konfigurasikan server untuk menulis ulang jalur yang tidak cocok ke halaman dasar, dan pastikan tag base href ada.
• Pengontrol tidak pernah dijalankan ulang: Hanya parameter yang berubah, jadi AngularJS menggunakan kembali instance controller daripada membangunnya ulang. Dengarkan event `$routeUpdate` alih-alih mengandalkan fungsi controller untuk dijalankan lagi.

Pertanyaan Umum Demo Slot