Xóa định danh phân đoạn khỏi các url AngularJS (ký hiệu #)

257

Có thể xóa biểu tượng # khỏi URL angular.js không?

Tôi vẫn muốn có thể sử dụng nút quay lại của trình duyệt, v.v., khi tôi thay đổi chế độ xem và sẽ cập nhật URL với thông số, nhưng tôi không muốn biểu tượng #.

Hướng dẫn routeProvider được khai báo như sau:

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

Tôi có thể chỉnh sửa phần này để có cùng chức năng mà không cần # không?

angularjs  url  ngroute 
— Tim Webster
nguồn
13
hashtag đẹp một
— BoJack Horseman
— Mạnh
Đối với tôi tất cả các câu trả lời ở đây là sai. Chúng tôi có thể "viết lại" url và xóa #, nhưng không bao giờ truy cập trực tiếp vào trang web mà không có #. Bất kỳ giải pháp thực sự ở đây ???
— amdev
Đây là giải pháp nếu bạn đang sử dụng Angular 1.6 .
— Mistalis

Câu trả lời:

251

Có, bạn nên định cấu hình $locationProvidervà đặt html5Modethành 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
nguồn
10
Bởi vì IE lt 10 không hỗ trợ API lịch sử html5 được kích hoạt bằng cách thiết lập html5Mode(true). Trong IE bạn phải sử dụng #trong các tuyến đường.
— Maxim Grach
10
@powtac IE lt 10có nghĩa là Internet Explorer ít hơn phiên bản 10
— Maxim Grach
6
Bạn có thể thiết lập nó để dự phòng này sử dụng # trong IE không? Có đơn giản như chỉ gói $locationProvider.html5Mode(true);trong if !(IE lt 10)?
— Andy Hayden
52
Vì vậy, giải pháp này giải quyết việc loại bỏ hashtag trong url do url cung cấp có hashtag, tuy nhiên nó không giải quyết được cách đáp ứng các yêu cầu không muốn đưa hashtag vào vị trí đầu tiên. Aka, nó giải quyết blah / # / điện thoại -> blah / điện thoại nhưng nó không xử lý trực tiếp blah / điện thoại .
— Lu-ca
9
Tôi cần đặt <base href = "/" /> trong phần index.html <head> của mình.
— nyxz
55

Hãy chắc chắn kiểm tra hỗ trợ trình duyệt cho API lịch sử html5:

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }
— SSaidi
nguồn
23
Điều này có thể phù hợp hơn như là một nhận xét vì nó không trả lời trực tiếp câu hỏi.
— brandonscript
31
Theo hướng dẫn của nhà phát triển , việc phát hiện này được thực hiện tự động:If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically
— IanB
Làm việc như một cơ duyên và tôi đánh giá cao việc kiểm tra phương pháp thay vì kiểm tra phiên bản trình duyệt - bằng chứng trong tương lai.
— Shane
46

Để xóa thẻ Hash cho một URL đẹp và cũng để mã của bạn hoạt động sau khi thu nhỏ, bạn cần cấu trúc mã của mình như ví dụ dưới đây:

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
nguồn
15
Đối với requireBase: false+1
— whoan
2
Xin chào @digitlimit, Sau khi thêm $locationProvider.html5Modemã, mã của tôi $urlRouterProvider.otherwise('/home');đã ngừng hoạt động.
— Jaikrat
18

Tôi viết ra một quy tắc trong web.config sau khi $locationProvider.html5Mode(true)được đặt app.js.

Hy vọng, giúp ai đó ra ngoài.

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

Trong index.html của tôi, tôi đã thêm cái này vào <head>

<base href="/">

Đừng quên cài đặt ghi lại url cho iis trên máy chủ.

Ngoài ra nếu bạn sử dụng Web Api và IIS, url khớp này sẽ không hoạt động, vì nó sẽ thay đổi các cuộc gọi api của bạn. Vì vậy, thêm đầu vào thứ ba (dòng điều kiện thứ ba) và đưa ra một mẫu sẽ loại trừ các cuộc gọi từwww.yourdomain.com/api

— Yagiz Ozturk
nguồn
1
Làm thế nào để bạn cài đặt ghi lại url cho IIS? Tôi đang lưu trữ trên Azure.
— Bohhu
11

Nếu bạn đang ở trong ngăn xếp .NET với MVC với AngularJS, đây là việc bạn phải làm để xóa '#' khỏi url:

  1. Thiết lập cơ sở của bạn trong trang _Layout của bạn: <head> <base href="https://stackoverflow.com/"> </head>

  2. Sau đó, thêm sau đây trong cấu hình ứng dụng góc cạnh của bạn: $locationProvider.html5Mode(true)

  3. Ở trên sẽ xóa '#' khỏi url nhưng làm mới trang sẽ không hoạt động, ví dụ: nếu bạn ở trong trang "yoursite.com/about" sẽ cung cấp cho bạn 404. Điều này là do MVC không biết về định tuyến góc và theo mô hình MVC. sẽ tìm một trang MVC cho 'about' không tồn tại trong đường dẫn định tuyến MVC. Giải pháp cho việc này là gửi tất cả yêu cầu trang MVC đến một chế độ xem MVC duy nhất và bạn có thể thực hiện điều đó bằng cách thêm một tuyến bắt tất cả

url: 

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
— Maksood
nguồn
Tôi nên thêm tập tin nào.MapRoute?
— Vicheanak
1
RouteConfig.cs của mình theo App_Start thư mục
— Maksood
5

Bạn có thể điều chỉnh html5mode nhưng đó chỉ là chức năng cho các liên kết được bao gồm trong các neo html của trang của bạn và cách url trông giống như trong thanh địa chỉ trình duyệt. Cố gắng yêu cầu một trang con không có hashtag (có hoặc không có html5mode) từ bất kỳ nơi nào bên ngoài trang sẽ dẫn đến lỗi 404. Ví dụ: yêu cầu CURL sau đây sẽ dẫn đến lỗi không tìm thấy trang, bất kể html5mode:

$ curl http://foo.bar/phones

mặc dù sau đây sẽ trả về trang gốc / trang chủ:

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

Lý do cho điều này là bất cứ điều gì sau khi hashtag bị loại bỏ trước khi yêu cầu đến máy chủ. Vì vậy, một yêu cầu http://foo.bar/#/portfoliođến máy chủ như một yêu cầu cho http://foo.bar. Máy chủ sẽ phản hồi với phản hồi 200 OK (có lẽ là) http://foo.barvà đại lý / khách hàng sẽ xử lý phần còn lại.

Vì vậy, trong trường hợp bạn muốn chia sẻ một url với người khác, bạn không có tùy chọn nào ngoài việc bao gồm hashtag.

— chris
nguồn
Không có cách nào xung quanh điều này? Đây là một vấn đề khá lớn.
— dùng441521
5

Thực hiện theo 2 bước-
1. Trước tiên, đặt $ locationProvider.html5Mode (true) trong tệp cấu hình ứng dụng của bạn.
Ví dụ:
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Thứ hai đặt <cơ sở> bên trong trang chính của bạn.
Ví dụ:>
<base href="https://stackoverflow.com/">

Dịch vụ $ location sẽ tự động chuyển sang phương thức băm cho các trình duyệt không hỗ trợ API Lịch sử HTML5.

— Anshul Bisht
nguồn
3

Giải pháp của tôi là tạo .htaccess và sử dụng mã #Sorian .. không có .htaccess Tôi không thể xóa #

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
nguồn
1

Theo tài liệu. Bạn có thể dùng:

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

NB: Nếu trình duyệt của bạn không hỗ trợ HTML 5. Đừng lo lắng: D nó có dự phòng cho chế độ hashbang. Vì vậy, bạn không cần phải kiểm tra bằng if(window.history && window.history.pushState){ ... }tay

Ví dụ: Nếu bạn bấm: <a href="https://stackoverflow.com/other">Some URL</a>

Trong Trình duyệt HTML5 : angular sẽ tự động chuyển hướng đếnexample.com/other

Trong Trình duyệt không phải HTML5 : angular sẽ tự động chuyển hướng đếnexample.com/#!/other

— Efriandika
nguồn
1

Câu trả lời này giả định rằng bạn đang sử dụng nginx làm proxy ngược và bạn đã đặt $ locationProvider.html5mode thành true.

-> Dành cho những người vẫn có thể vật lộn với tất cả những thứ hay ho ở trên.

Chắc chắn, giải pháp @maxim grach hoạt động tốt, nhưng đối với giải pháp về cách đáp ứng các yêu cầu không muốn đưa hashtag vào vị trí đầu tiên, hãy kiểm tra xem php có gửi 404 không và sau đó viết lại url. Sau đây là mã cho nginx,

Trong vị trí php, phát hiện lỗi 404 404 và chuyển hướng đến vị trí khác, 

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

Sau đó viết lại url trong vị trí chuyển hướng và proxy_ vượt qua dữ liệu, giao dịch, đặt url trang web của bạn vào vị trí url của blog của tôi. (Yêu cầu: Câu hỏi này chỉ sau khi bạn thử nó)

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

Và xem phép thuật.

Và nó chắc chắn hoạt động, ít nhất cho tôi.

— Satys
nguồn
Thêm cái này ở đâu?
— Volatil3
Nơi để thêm mã ở trên? Đặt chúng trong tập tin cấu hình Nginx chính.
— Satys
1

Bắt đầu từ index.html xóa tất cả #khỏi <a href="#/aboutus">About Us</a>để nó phải giống như <a href="https://stackoverflow.com/aboutus">About Us</a>. Bây giờ trong thẻ head của index.html ghi <base href="https://stackoverflow.com/">ngay sau thẻ meta cuối cùng .

Bây giờ trong js định tuyến của bạn tiêm $locationProvidervà viết một $locatonProvider.html5Mode(true); cái gì đó như thế này: -

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

Để biết thêm chi tiết, hãy xem video này https://www.youtube.com/watch?v=XsRugDQaGOo

— Aniket Jha
nguồn
Xóa tất cả # Url đã giúp vì tôi đã kiểm tra nó mà không xóa #urls.
— optimistanoop
1

Đoán đây là thực sự muộn cho việc này. Nhưng việc thêm cấu hình dưới đây vào nhập khẩu app.module thực hiện công việc:

RouterModule.forRoot(routes, { useHash: false })
— Sagar Bhat
nguồn
0

Bước 1: Tiêm dịch vụ $ locationProvider vào hàm tạo của cấu hình ứng dụng

Bước 2: Thêm dòng mã $ locationProvider.html5Mode (true) vào hàm tạo của cấu hình ứng dụng.

Bước 3: trong trang container (hạ cánh, chính hoặc bố cục), thêm thẻ html như <base href="https://stackoverflow.com/">bên trong thẻ.

Bước 4: xóa tất cả '# "để định cấu hình khỏi tất cả các thẻ neo. Ví dụ: href =" # home "trở thành href =" home "; href =" # about "trở thành herf =" about "; href =" # contact "trở thành href =" liên hệ "

 <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
nguồn
-1

Chỉ cần thêm $locationProviderTrong

.config(function ($routeProvider,$locationProvider)

và sau đó thêm $locationProvider.hashPrefix(''); vào sau

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

Đó là nó.

— Narendra Solanki
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.