Menghapus pengidentifikasi fragmen dari url AngularJS (simbol #)

257

Apakah mungkin untuk menghapus simbol # dari URL angular.js?

Saya masih ingin dapat menggunakan tombol kembali browser, dll, ketika saya mengubah tampilan dan akan memperbarui URL dengan params, tetapi saya tidak ingin simbol #.

Tutorial routeProvider dinyatakan sebagai berikut:

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
  when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  otherwise({redirectTo: '/phones'});
}]);

Bisakah saya mengedit ini untuk memiliki fungsi yang sama tanpa #?

angularjs url ngroute Tim Webster
sumber
13
hashtag nice one
BoJack Horseman
stackoverflow.com/questions/14319967/…
Ravimallya
Bagi saya semua jawaban di sini salah. Kami dapat "menulis ulang" url dan menghapus #, tetapi tidak pernah mengakses langsung ke halaman web tanpa #. Ada solusi nyata di sini ???
amdev
Ini solusinya jika Anda menggunakan Angular 1.6 .
Mistalis

Jawaban:

251

Ya, Anda harus mengonfigurasi $locationProviderdan mengatur html5Modeke true:

angular.module('phonecat', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode(true);

  }]);
Maxim Grach
sumber
10
Karena IE lt 10 tidak mendukung API riwayat html5 yang diaktifkan dengan pengaturan html5Mode(true). Di IE Anda harus menggunakan #rute.
Maxim Grach
10
@ Powow IE lt 10berarti Internet Explorer kurang dari versi 10
Maxim Grach
6
Bisakah Anda mengaturnya sehingga ini fallback untuk menggunakan # di IE? Apakah sesederhana hanya membungkus $locationProvider.html5Mode(true);di if !(IE lt 10)?
Andy Hayden
52
Jadi solusi ini tidak menghapus hashtag di url mengingat url memiliki hashtag, namun itu tidak menyelesaikan bagaimana menanggapi permintaan yang tidak ingin hashtag dimasukkan di tempat pertama. Aka, ini memecahkan bla / # / telepon -> bla / telepon tetapi tidak menangani bla / telepon secara langsung.
Luke
9
Saya perlu meletakkan <base href = "/" /> di bagian index.html <head> saya.
nyxz
55

Pastikan untuk memeriksa dukungan browser untuk API riwayat html5:

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }
SSaidi
sumber
23
Ini mungkin lebih cocok sebagai komentar karena tidak langsung menjawab pertanyaan.
Naskah Naskah
31
Menurut panduan pengembang , deteksi ini dilakukan secara otomatis:If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically
IanB
Bekerja seperti pesona, dan saya menghargai metode memeriksa daripada memeriksa versi browser - bukti masa depan.
Shane
46

Untuk menghapus tag hash untuk URL cantik dan juga agar kode Anda berfungsi setelah minifikasi, Anda perlu menyusun kode seperti contoh di bawah ini:

jobApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus/:id', {
                templateUrl: 'views/job-detail.html',
                controller: 'JobDetailController'
            });

         //you can include a fallback by  including .otherwise({
          //redirectTo: '/jobs'
        //});


        //check browser support
        if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="https://stackoverflow.com/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        }
    }]);
Emeka Mbah
sumber
15
Untuk requireBase: false+1
whoan
2
Halo @digitlimit, Setelah menambahkan $locationProvider.html5Modekode, kode saya $urlRouterProvider.otherwise('/home');berhenti bekerja.
Jaikrat
18

Saya menulis aturan di web.config setelah $locationProvider.html5Mode(true)diatur app.js.

Semoga, bantu seseorang keluar.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Di index.html saya menambahkan ini ke <head>

<base href="/">

Jangan lupa untuk menginstal url rewriter untuk iis di server.

Juga jika Anda menggunakan Web Api dan IIS, url pertandingan ini tidak akan berfungsi, karena itu akan mengubah panggilan api Anda. Jadi tambahkan input ketiga (kondisi baris ketiga) dan berikan pola yang akan mengecualikan panggilan dariwww.yourdomain.com/api

Yagiz Ozturk
sumber
1
Bagaimana Anda menginstal url rewriter untuk IIS? Saya hosting di Azure.
Prabhu
11

Jika Anda berada di .NET stack dengan MVC dengan AngularJS, inilah yang harus Anda lakukan untuk menghapus '#' dari url:

  1. Siapkan markas Anda di halaman _Layout Anda: <head> <base href="https://stackoverflow.com/"> </head>

  2. Lalu, tambahkan berikut ini di konfigurasi aplikasi sudut Anda: $locationProvider.html5Mode(true)

  3. Di atas akan menghapus '#' dari url tetapi penyegaran halaman tidak akan berfungsi misalnya jika Anda berada di refreash halaman "yoursite.com/about" akan memberi Anda 404. Ini karena MVC tidak tahu tentang perutean sudut dan menurut pola MVC. akan mencari halaman MVC untuk 'about' yang tidak ada di jalur routing MVC. Solusi untuk ini adalah mengirim semua permintaan halaman MVC ke tampilan MVC tunggal dan Anda dapat melakukannya dengan menambahkan rute yang menangkap semua

url: 

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
Maksood
sumber
File mana yang harus saya tambahkan rute. Peta?
Vicheanak
1
RouteConfig.cs di bawah folder
App_Start
5

Anda dapat mengubah html5mode tetapi itu hanya berfungsi untuk tautan yang termasuk dalam html jangkar halaman Anda dan bagaimana url terlihat di bilah alamat browser. Mencoba meminta subhalaman tanpa tagar (dengan atau tanpa html5mode) dari mana saja di luar halaman akan menghasilkan kesalahan 404. Misalnya, permintaan CURL berikut akan menghasilkan kesalahan halaman yang tidak ditemukan, terlepas dari html5mode:

$ curl http://foo.bar/phones

meskipun yang berikut ini akan mengembalikan halaman utama / home:

$ curl http://foo.bar/#/phones

Alasan untuk ini adalah bahwa apa pun setelah tagar dilepas sebelum permintaan tiba di server. Jadi permintaan untuk http://foo.bar/#/portfoliotiba di server sebagai permintaan http://foo.bar. Server akan merespons dengan 200 respons OK (mungkin) untuk http://foo.bardan agen / klien akan memproses sisanya.

Jadi jika Anda ingin membagikan url dengan orang lain, Anda tidak punya pilihan selain menyertakan tagar.

chris
sumber
Apakah tidak ada jalan lain? Ini adalah masalah yang cukup besar.
user441521
5

Ikuti 2 langkah-
1. Pertama, atur $ locationProvider.html5Mode (true) di file konfigurasi aplikasi Anda.
Untuk misalnya -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Kunci kedua <base> di dalam halaman utama Anda.
Untuk mis ->
<base href="https://stackoverflow.com/">

Layanan $ location akan secara otomatis mundur ke metode hash-part untuk browser yang tidak mendukung API Riwayat HTML5.

Anshul Bisht
sumber
3

Solusi saya adalah membuat .htaccess dan menggunakan kode #Sorian .. tanpa .htaccess saya gagal menghapus #

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]
Thomas Knápek
sumber
1

Menurut dokumentasi. Kamu bisa memakai:

$locationProvider.html5Mode(true).hashPrefix('!');

NB: Jika browser Anda tidak mendukung ke HTML 5. Jangan khawatir: D itu mundur ke mode hashbang. Jadi, Anda tidak perlu memeriksanya if(window.history && window.history.pushState){ ... }secara manual

Misalnya: Jika Anda mengklik: <a href="https://stackoverflow.com/other">Some URL</a>

Di Browser HTML5 : angular akan secara otomatis dialihkan keexample.com/other

Di Bukan HTML5 Browser : angular akan secara otomatis dialihkan keexample.com/#!/other

Efriandika Pratama
sumber
1

Jawaban ini mengasumsikan bahwa Anda menggunakan nginx sebagai proxy terbalik dan Anda sudah menyetel $ locationProvider.html5mode menjadi true.

-> Untuk orang-orang yang mungkin masih berjuang dengan semua hal keren di atas.

Tentunya, solusi @maxim grach berfungsi dengan baik, tetapi untuk solusi bagaimana menanggapi permintaan yang tidak ingin tagar dimasukkan di tempat pertama yang dapat dilakukan adalah memeriksa apakah php mengirim 404 dan kemudian menulis ulang url. Berikut ini adalah kode untuk nginx,

Di lokasi php, deteksi 404 kesalahan php dan redirect ke lokasi lain, 

location ~ \.php${
  ...
  fastcgi_intercept_errors on;
  error_page 404 = /redirect/$request_uri ;
}

Kemudian tulis ulang url di lokasi redirect dan proxy_pass data, offcourse, letakkan url situs web Anda di tempat url blog saya. (Permintaan: Pertanyakan ini hanya setelah Anda mencobanya)

location /redirect {
  rewrite ^/redirect/(.*) /$1;
  proxy_pass http://www.techromance.com;
}

Dan lihat keajaibannya.

Dan itu pasti berhasil, setidaknya bagi saya.

Satys
sumber
Di mana menambahkan ini?
Volatil3
Di mana menambahkan kode di atas? Letakkan di file konfigurasi Nginx utama.
Satys
1

Mulai dari index.html hapus semua #dari <a href="#/aboutus">About Us</a>sehingga harus terlihat seperti <a href="https://stackoverflow.com/aboutus">About Us</a>. Sekarang di tag kepala index.html tulis <base href="https://stackoverflow.com/">tepat setelah meta tag terakhir .

Sekarang dalam perutean Anda js menyuntikkan $locationProviderdan menulis $locatonProvider.html5Mode(true); Sesuatu Seperti Ini: -

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
            .when("/aboutus",{templateUrl:"Templates/aboutus.html"})
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    });

Untuk Detail lebih lanjut, tonton video ini https://www.youtube.com/watch?v=XsRugDQaGOo

Aniket Jha
sumber
Menghapus semua # Url membantu karena saya mengujinya tanpa menghapus #url.
optimistanoop
1

Kira ini benar-benar terlambat untuk ini. Tetapi menambahkan konfigurasi di bawah ini ke app.module impor berfungsi:

RouterModule.forRoot(routes, { useHash: false })
Sagar Bhat
sumber
0

Langkah 1: Suntikkan layanan $ locationProvider ke dalam konstruktor konfigurasi aplikasi

Langkah 2: Tambahkan baris kode $ locationProvider.html5Mode (true) ke konstruktor konfigurasi aplikasi.

Langkah 3: di halaman wadah (pendaratan, master, atau tata letak), tambahkan tag html seperti <base href="https://stackoverflow.com/">di dalam tag.

Langkah 4: hapus semua '# "untuk merutekan konfigurasi dari semua tag anchor. Sebagai contoh, href =" # home "menjadi href =" home "; href =" # tentang "menjadi herf =" tentang "; href =" # kontak "menjadi href =" kontak "

 <ul class="nav navbar-nav">
     <li><a href="home">Home</a></li>
     <li><a href="about">About us</a></li>
     <li><a href="contact">Contact us</a></li>
</ul>
Thomas.Benz
sumber
-1

Cukup tambahkan $locationProviderDalam

.config(function ($routeProvider,$locationProvider)

dan kemudian tambahkan $locationProvider.hashPrefix(''); setelah

.otherwise({
        redirectTo: '/'
      });

Itu dia.

Narendra Solanki
sumber