Terangkan secara ringkas definisi dan penggunaan AngularJS Routing_AngularJS

Dalam aplikasi satu halaman, melompat antara paparan adalah sangat penting Memandangkan aplikasi menjadi semakin kompleks, kami memerlukan kaedah untuk mengawal dengan tepat masa dan halaman yang perlu dipersembahkan kepada pengguna.

Kami boleh menyokong penukaran antara halaman yang berbeza dengan memperkenalkan templat yang berbeza ke dalam halaman utama, tetapi kelemahan berbuat demikian ialah semakin banyak kod terbenam menyukarkan untuk mengurus akhirnya.

Kami boleh menyepadukan banyak templat ke dalam paparan melalui arahan ng-include, tetapi kami mempunyai cara yang lebih baik untuk menangani situasi ini Kami boleh membahagikan paparan kepada paparan reka letak dan templat, dan kemudian mengikut URL akses pengguna tertentu untuk memaparkan paparan yang diingini

Kita boleh meletakkan "kepingan" ini bersama-sama dalam templat reka letak

AngularJS melaksanakan idea di atas dengan mengisytiharkan laluan pada $routeProvider (penyedia perkhidmatan $route)

Menggunakan $routeProvider, kami boleh menggunakan API sejarah penyemakan imbas dengan lebih baik dan membenarkan pengguna menyimpan laluan semasa sebagai penanda halaman untuk kegunaan masa hadapan

Untuk menyediakan penghalaan dalam aplikasi kami, kami perlu melakukan dua perkara: Pertama, kami perlu menunjukkan tempat kami akan menyimpan templat reka letak di mana kandungan halaman baharu akan disimpan. Sebagai contoh, jika kita ingin menambah pengepala dan pengaki pada semua halaman, kita boleh mereka bentuk templat reka letak seperti ini:

<header>
 <h1>Header</h1>
</header>
<div class="content">
 <div ng-view></div>
</div>
<footer>
 <h5>Footer</h5>
</footer>

Arahan ng-view akan menggunakan $routeProvider berkelajuan tinggi tempat untuk memaparkan templat

Kedua, kami perlu mengkonfigurasi maklumat penghalaan kami, kami akan mengkonfigurasi $routeProvider dalam aplikasi

$routeProvider menyediakan dua kaedah untuk mengendalikan penghalaan: bila dan sebaliknya. Kaedah apabila menerima dua parameter, yang pertama ditetapkan $location.path() (Tiada masalah jika anda menggunakan "//" secara langsung)

Takrif
Sangat mudah untuk menentukan laluan, hanya masukkan kebergantungan ngRoute ke dalam modul utama aplikasi kami

angular.module('myApp', ['ngRoute'])
 .config(function($routeProvider) {});

Kini, kami boleh menentukan laluan untuk aplikasi. $routeProvider disuntik ke dalam kaedah .config() dalam modul penghalaan Kod di atas menunjukkan kepada kita dua kaedah untuk menentukan laluan.

bila()

Kaedah when() mempunyai dua parameter, url penyemak imbas yang kami mahu padankan dan objek operasi penghalaan. Secara amnya, laluan utama sering diwakili oleh "/", dan parameter URL juga boleh ditakrifkan Dalam pengawal, $routeParams digunakan untuk mendapatkan parameter url.

templateUrl: lihat templat yang mewakili lompatan laluan

pengawal: pengawal

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
   $routeProvider
    .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
    })
    .when('/day/:id', {
     templateUrl: 'views/day.html',
     controller: 'DayCtrl'
    })

jika tidak()

jika tidak() mentakrifkan laluan untuk melompat ke apabila aplikasi tidak dapat mencari laluan yang ditentukan

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
 $routeProvider
  .when('/', {
   templateUrl: 'views/main.html',
   controller: 'MainCtrl'
  })
  .when('/day/:id', {
   templateUrl: 'views/day.html',
   controller: 'DayCtrl'
  })
  .otherwise({
   redirectTo: '/'
  });
})

Gunakan
Bagaimana untuk menggunakan laluan yang ditentukan? Kita perlu memberitahu sudut mana bahagian halaman yang ingin kita tukar, yang memerlukan penggunaan arahan ng-view

<div class="header">My page</div>
<div ng-view></div>
<span class="footer">A footer</span>

Dengan cara ini, hanya 08c7689d8bf8fe33141f270e3fd6c1d516b28748ea4df4d9c2150843fecfba68 akan dikemas kini dan pengepala/pengaki akan sentiasa kekal tidak berubah