Bagaimana untuk mengalih keluar aksara # dalam URL di bawah AngularJS

Bagaimana untuk mengalih keluar aksara # dalam URL di bawah AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:53:54

asal

1056 orang telah melayarinya

AngularJS akan menggunakan tanda # untuk menghalakan URL secara lalai.

Contohnya:

http://example.com/

http://example.com/#/about

http://example.com/#/contact

Adalah mudah untuk mendapatkan URL yang bersih dan mengalih keluar tanda cincang daripada URL.

Hanya lengkapkan dua perkara.

Konfigurasikan $locationProvider
Tetapkan laluan permulaan sambungan relatif kami

perkhidmatan $lokasi

Dalam Angular, perkhidmatan $location akan menyelesaikan URL dalam bar alamat dan membuat perubahan pada aplikasi anda, dan begitu juga sebaliknya.

Saya amat mengesyorkan membaca dokumentasi rasmi $location Angular untuk mendapatkan pemahaman tentang perkhidmatan $location dan ciri yang disediakannya.

$locationProvider dan html5Mode

Kami akan menggunakan modul $locationProvider dan menetapkan html5Mode kepada benar.

Kami akan melakukan ini apabila anda mentakrifkan aplikasi Sudut anda dan mengkonfigurasi laluan anda.

angular.module('scotchy', [])
  
 .config(function($routeProvider, $locationProvider) {
 
  $routeProvider
   .when('/', {
    templateUrl : 'partials/home.html',
    controller : mainController
   })
   .when('/about', {
    templateUrl : 'partials/about.html',
    controller : mainController
   })
   .when('/contact', {
    templateUrl : 'partials/contact.html',
    controller : mainController
   });
  
  // use the HTML5 History API
  $locationProvider.html5Mode(true);
 });

Salin selepas log masuk

Apakah itu API Sejarah HTML5? Ia adalah cara standard untuk memanipulasi sejarah penyemak imbas menggunakan skrip Ia membolehkan Angular menukar laluan dan URL halaman tanpa memuat semula halaman tersebut. Terdapat artikel API Sejarah HTML5 yang cukup bagus.

Tetapkan untuk pautan relatif

Untuk menggunakan pautan relatif sepanjang aplikasi anda, anda perlu menetapkan dalam

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 
 <base href="/">
</head>

Salin selepas log masuk

Terdapat banyak cara untuk mengkonfigurasi ini, dan menetapkan HTML5Mode kepada benar akan menyelesaikan pautan relatif secara automatik Ini sentiasa berfungsi untuk saya Jika aplikasi anda berakar pada URL yang sama, seperti /my-base, kemudian gunakan itu sebagai jalan permulaan anda.

Panggil balik untuk penyemak imbas lama

Perkhidmatan $location akan memanggil semula kaedah hashbang secara automatik untuk penyemak imbas yang tidak menyokong API sejarah penyemakan imbas HTML5.

Semuanya berlaku secara telus kepada anda dan anda tidak perlu melakukan sebarang konfigurasi untuk ini. Daripada dokumentasi

Angular $location, anda boleh melihat kaedah panggil balik dan cara ia berfungsi.

2015619153430123.jpg (567×311)
Ringkasan

Ini ialah cara mudah untuk mendapatkan URL yang cantik dan mengalih keluar teg cincang dalam apl Angular anda. Nikmati apl Sudut yang sangat bersih dan sangat pantas!