การลบตัวระบุส่วนออกจาก URL ของ AngularJS (# symbol)

257

เป็นไปได้ไหมที่จะลบสัญลักษณ์ # ออกจาก angular.js URL

ฉันยังต้องการใช้ปุ่มย้อนกลับของเบราว์เซอร์และอื่น ๆ เมื่อฉันเปลี่ยนมุมมองและจะอัปเดต URL ด้วย params แต่ฉันไม่ต้องการสัญลักษณ์ #

tutorialProProider มีการประกาศดังนี้:

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

ฉันสามารถแก้ไขสิ่งนี้เพื่อให้มีฟังก์ชันการทำงานเดียวกันโดยไม่มี # ได้หรือไม่

angularjs  url  ngroute 
— ทิมเว็บสเตอร์
แหล่งที่มา
13
แฮชแท็กเป็นคนดี
— BoJack Horseman
— Ravimallya
สำหรับฉันคำตอบทั้งหมดที่นี่ผิด เราสามารถ "เขียนซ้ำ" URL และลบ # แต่ไม่เคยเข้าถึงหน้าเว็บโดยตรงโดยไม่ต้อง # ทางออกที่แท้จริงที่นี่ ???
— amdev
นี่คือวิธีการแก้ถ้าคุณกำลังใช้เชิงมุม1.6
— Mistalis

คำตอบ:

251

ใช่คุณควรกำหนดค่า$locationProviderและตั้งค่าhtml5Modeเป็น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
แหล่งที่มา
10
เพราะIE LT 10ไม่สนับสนุน API ประวัติศาสตร์ HTML5 html5Mode(true)ซึ่งถูกเปิดใช้งานโดยการตั้งค่า ใน IE คุณต้องใช้#ในเส้นทาง
— Maxim Grach
10
@powtac IE lt 10หมายถึง Internet Explorer น้อยกว่ารุ่น 10
— Maxim Grach
6
คุณสามารถตั้งค่าให้มันใช้แทน # ใน IE ได้หรือไม่? มันเป็นง่ายๆเป็นเพียงห่อ$locationProvider.html5Mode(true);ในif !(IE lt 10)?
— Andy Hayden
52
ดังนั้นวิธีนี้จะแก้ปัญหาการลบแฮชแท็กใน URL เนื่องจาก URL นั้นมีแฮชแท็ก แต่ก็ไม่ได้แก้ปัญหาวิธีตอบสนองต่อคำขอที่ไม่ต้องการรวมแฮชแท็กไว้ในที่แรก Aka มันแก้blah / # / โทรศัพท์ -> blah / โทรศัพท์แต่มันไม่ได้จัดการblah / โทรศัพท์โดยตรง
— ลุค
9
ฉันต้องการใส่ <base href = "/" /> ใน index.html <head> ของฉัน
— nyxz
55

ให้แน่ใจว่าได้ตรวจสอบการสนับสนุนเบราว์เซอร์สำหรับ API ประวัติ html5:

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }
— SSaidi
แหล่งที่มา
23
สิ่งนี้อาจเหมาะสมกว่าความคิดเห็นเนื่องจากไม่ตอบคำถามโดยตรง
— brandonscript
31
ตามคู่มือนักพัฒนาซอฟต์แวร์การตรวจจับนี้ทำโดยอัตโนมัติ:If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically
— IanB
ทำงานเหมือนมีเสน่ห์และฉันซาบซึ้งกับวิธีการตรวจสอบมากกว่าการตรวจสอบเวอร์ชันของเบราว์เซอร์ - หลักฐานในอนาคต
— เชน
46

หากต้องการลบแท็กแฮชสำหรับURL ที่สวยงามและเพื่อให้โค้ดของคุณทำงานหลังจากการลดขนาดคุณต้องจัดโครงสร้างโค้ดตามตัวอย่างด้านล่าง:

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
แหล่งที่มา
15
สำหรับrequireBase: false+1
— whoan
2
สวัสดี @digitlimit หลังจากเพิ่ม$locationProvider.html5Modeรหัสโค้ดของฉัน$urlRouterProvider.otherwise('/home');หยุดทำงาน
— Jaikrat
18

ผมเขียนออกกฎใน web.config หลังจากที่ตั้งอยู่ใน$locationProvider.html5Mode(true)app.js

หวังว่าจะช่วยให้ใครบางคนออกมา

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

ใน index.html ของฉันฉันเพิ่มไปนี้ <head>

<base href="/">

อย่าลืมติดตั้ง url rewriter สำหรับ iis บนเซิร์ฟเวอร์

นอกจากนี้หากคุณใช้ Web Api และ IIS URL ที่ตรงกันนี้จะไม่ทำงานเนื่องจากจะเปลี่ยนการเรียก API ของคุณ ดังนั้นเพิ่มอินพุตที่สาม (เงื่อนไขบรรทัดที่สาม) และให้รูปแบบที่จะแยกการโทรออกwww.yourdomain.com/api

— Yagiz Ozturk
แหล่งที่มา
1
คุณติดตั้ง url rewriter สำหรับ IIS ได้อย่างไร ฉันกำลังโฮสต์บน Azure
— Prabhu
11

หากคุณอยู่ใน. NET stack ด้วย MVC กับ AngularJS นี่คือสิ่งที่คุณต้องทำเพื่อลบ '#' ออกจาก url:

  1. ตั้งค่า href ฐานของคุณในหน้า _Layout ของคุณ: <head> <base href="https://stackoverflow.com/"> </head>

  2. จากนั้นเพิ่มสิ่งต่อไปนี้ในแอปเชิงมุมของคุณ: $locationProvider.html5Mode(true)

  3. ด้านบนจะลบ '#' ออกจาก url แต่การรีเฟรชหน้าเว็บจะไม่ทำงานเช่นถ้าคุณอยู่ในการสร้างหน้าใหม่ "yoursite.com/about" จะทำให้คุณมี 404 นี่เป็นเพราะ MVC ไม่ทราบเกี่ยวกับการจัดเส้นทางเชิงมุมและรูปแบบ MVC จะค้นหาหน้า MVC สำหรับ 'เกี่ยวกับ' ซึ่งไม่มีอยู่ในเส้นทางการกำหนดเส้นทาง MVC วิธีแก้ปัญหาสำหรับสิ่งนี้คือการส่งคำขอหน้า MVC ทั้งหมดไปยังมุมมอง MVC เดียวและคุณสามารถทำได้โดยการเพิ่มเส้นทางที่ดึงดูดทั้งหมด

url: 

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
— Maksood
แหล่งที่มา
ไฟล์ใดที่ฉันควรเพิ่มเส้นทาง MapRoute
— Vicheanak
1
RouteConfig.cs อยู่ในโฟลเดอร์
— App_Start
5

คุณสามารถปรับแต่ง html5mode ได้ แต่ใช้งานได้เฉพาะกับลิงค์ที่รวมอยู่ใน html anchors ของหน้าของคุณและลักษณะของ url ในแถบที่อยู่ของเบราว์เซอร์ ความพยายามในการร้องขอหน้าย่อยที่ไม่มีแฮชแท็ก (มีหรือไม่มี html5mode) จากที่ใดก็ได้นอกหน้าจะทำให้เกิดข้อผิดพลาด 404 ตัวอย่างเช่นคำขอ CURL ต่อไปนี้จะทำให้เกิดข้อผิดพลาดที่ไม่พบหน้าเว็บโดยไม่คำนึงถึง html5mode:

$ curl http://foo.bar/phones

แม้ว่าสิ่งต่อไปนี้จะส่งคืนรูท / โฮมเพจ

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

เหตุผลนี้คือสิ่งใดหลังจากถอดแฮชแท็กออกก่อนที่คำขอจะมาถึงเซิร์ฟเวอร์ ดังนั้นขอให้มาถึงที่เซิร์ฟเวอร์เป็นขอhttp://foo.bar/#/portfolio http://foo.barเซิร์ฟเวอร์จะตอบสนองด้วยการตอบสนอง 200 OK (สมมุติ) http://foo.barและตัวแทน / ลูกค้าจะประมวลผลส่วนที่เหลือ

ดังนั้นในกรณีที่คุณต้องการแบ่งปัน URL กับผู้อื่นคุณไม่มีตัวเลือกนอกจากใส่แฮชแท็ก

— คริส
แหล่งที่มา
ไม่มีทางรอบนี้หรือไม่? นี่เป็นปัญหาใหญ่ทีเดียว
— user441521
5

ทำตาม 2
ขั้นตอน - 1. ตั้งค่า$ locationProvider.html5Mode (จริง)ในไฟล์กำหนดค่าแอปของคุณ
สำหรับเช่น -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2. วินาทีตั้ง<base>ภายในหน้าหลักของคุณ
สำหรับเช่น ->
<base href="https://stackoverflow.com/">

บริการตำแหน่ง $ จะย้อนกลับไปที่วิธีแฮชส่วนโดยอัตโนมัติสำหรับเบราว์เซอร์ที่ไม่รองรับ API ประวัติ HTML5

— Anshul Bisht
แหล่งที่มา
3

โซลูชันของฉันคือสร้าง. htaccess และใช้ #Sorian code .. โดยไม่ต้อง. htaccess ฉันไม่สามารถลบ #

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]
— โทมัสKnápek
แหล่งที่มา
1

ตามเอกสารประกอบ คุณสามารถใช้ได้:

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

หมายเหตุ: หากเบราว์เซอร์ของคุณไม่รองรับ HTML 5. ไม่ต้องกังวล: D มีทางเลือกในโหมด hashbang ดังนั้นคุณไม่จำเป็นต้องตรวจสอบด้วยif(window.history && window.history.pushState){ ... }ตนเอง

ตัวอย่างเช่น: ถ้าคุณคลิก: <a href="https://stackoverflow.com/other">Some URL</a>

ในเบราว์เซอร์ HTML5 : มุมจะเปลี่ยนเส้นทางโดยอัตโนมัติexample.com/other

ในเบราว์เซอร์ไม่ใช่ HTML5 : มุมจะเปลี่ยนเส้นทางโดยอัตโนมัติexample.com/#!/other

— Efriandika Pratama
แหล่งที่มา
1

คำตอบนี้จะถือว่าคุณใช้ nginx เป็น reverse proxy และคุณได้ตั้ง $ locationProvider.html5mode เป็น true แล้ว

-> สำหรับคนที่อาจยังคงดิ้นรนกับสิ่งดีๆทั้งหมดข้างต้น

แน่นอนว่าโซลูชัน @maxim grach ทำงานได้ดี แต่สำหรับวิธีการตอบสนองต่อคำขอที่ไม่ต้องการให้แฮชแท็กรวมอยู่ในที่แรกสิ่งที่สามารถทำได้คือการตรวจสอบว่า php กำลังส่ง 404 แล้วเขียน url ใหม่ ต่อไปนี้เป็นรหัสสำหรับ nginx

ในตำแหน่ง php ตรวจพบข้อผิดพลาด 404 php และเปลี่ยนเส้นทางไปยังตำแหน่งอื่น 

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

จากนั้นเขียน url ใหม่ในตำแหน่งการเปลี่ยนเส้นทางและ proxy_pass ข้อมูล offcourse วาง url เว็บไซต์ของคุณไว้ที่ URL ของบล็อกของฉัน (คำขอ: คำถามนี้เฉพาะหลังจากที่คุณลอง)

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

และดูเวทย์มนตร์

และมันก็ใช้งานได้ดีอย่างน้อยก็สำหรับฉัน

— Satys
แหล่งที่มา
เพิ่มที่ไหน
— Volatil3
จะเพิ่มรหัสด้านบนได้ที่ไหน วางไว้ในไฟล์กำหนดค่า Nginx หลัก
— Satys
1

เริ่มต้นที่ลบ index.html ทั้งหมด#จาก<a href="#/aboutus">About Us</a>ดังนั้นจึงต้องมีลักษณะเช่น<a href="https://stackoverflow.com/aboutus">About Us</a>ตอนนี้ในแท็กหัวของการเขียน index.html <base href="https://stackoverflow.com/">เพียงหลังจากที่ผ่านมาเมตาแท็ก

ตอนนี้ในการกำหนดเส้นทางของคุณ js inject $locationProviderและเขียน$locatonProvider.html5Mode(true); บางอย่างเช่นนี้: -

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

สำหรับรายละเอียดเพิ่มเติมดูวิดีโอนี้ https://www.youtube.com/watch?v=XsRugDQaGOo

— Aniket Jha
แหล่งที่มา
การลบ # Url ทั้งหมดได้รับความช่วยเหลือเนื่องจากฉันทำการทดสอบโดยไม่ลบ #urls
— optimistanoop
1

ลองเดาดูสิว่านี่สายไปแล้วสำหรับสิ่งนี้ แต่การเพิ่มการกำหนดค่าด้านล่างลงใน app.module ก็จะทำงานได้:

RouterModule.forRoot(routes, { useHash: false })
— Sagar Bhat
แหล่งที่มา
0

ขั้นตอนที่ 1: ใส่บริการ $ locationProvider ลงในคอนสตรัคเตอร์ของแอป config

ขั้นตอนที่ 2: เพิ่มรหัสบรรทัด $ locationProvider.html5Mode (true) ให้กับคอนสตรัคเตอร์ของแอป config

ขั้นตอนที่ 3: ในหน้าคอนเทนเนอร์ (Landing, Master หรือ Layout) ให้เพิ่มแท็ก html เช่น<base href="https://stackoverflow.com/">ภายในแท็ก

ขั้นตอนที่ 4: ลบ '# "ทั้งหมดสำหรับการกำหนดเส้นทางการกำหนดค่าจากแท็ก anchor ทั้งหมดตัวอย่างเช่น href =" # home "กลายเป็น href =" home "; href =" # about "กลายเป็น herf =" about "; href =" # contact "กลายเป็น href =" ผู้ติดต่อ "

 <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
แหล่งที่มา
-1

เพียงแค่เพิ่ม$locationProviderใน

.config(function ($routeProvider,$locationProvider)

แล้วเพิ่ม$locationProvider.hashPrefix(''); หลังจาก

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

แค่นั้นแหละ.

— Narendra Solanki
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.