Tại sao url của tôi chứa "!" khi sử dụng góc?

Tôi vừa mới bắt đầu với ngăn xếp MEAN và tôi đang theo dõi một số TUT.Tại sao url của tôi chứa "!" khi sử dụng góc?

Tôi đang sử dụng npm-views từ Angular và cố gắng chuyển hướng thẻ html a tới một tệp html khác. Tuy nhiên khi tôi đi đến localhost:3000 Tôi nhận được điều này: localhost:3000/#!/ và khi tôi liên kết bên trong trang đó, nó chỉ cần thêm localhost:3000/#!/#%2Fsl.

index.html của tôi là thế này (không có một số yếu tố - quá nhiều văn bản // Tôi đã gỡ bỏ tất cả các js và css file nhưng tôi có tất cả trong tập tin của tôi):

<!DOCTYPE html> 
<html ng-app="firstApp"> 

<head> 

<script type="text/javascript"> 

var app = angular.module('firstApp',['ngRoute']); 

app.config(function($routeProvider){ 
    $routeProvider 
    .when('/', { 
     templateUrl: 'home.html', 
     controller: 'HomeController', 
    }) 
    .when('/sl', { 
     templateUrl: 'sl.html', 
     controller: 'SLController', 
    }); 

}); 

app.controller('HomeController', function ($scope, $http){ 
    console.log('Home page'); 
}); 

app.controller('SLController', function ($scope, $http){ 
    console.log('Signup page'); 
}); 

</script> 
    <title>First Node.JS app</title> 

</head> 

<body> 
    <div class="container-fluid"> 

    <h1 id="indexTitle"> MyFirst App </h1> 
    <div ng-view></div> 

    </div> 
</body> 

</html>

home.html My tập tin là thế này:

<div class="container main-forms" id="main-forms"> 

    <h3 id="letMeIn1"><a href="#/sl" id="letMeIn">Let me in</a></h3> 

</div>

và tập tin sl.html của tôi là thế này:

<div class="container main-forms" id="main-forms"> 

    <div> 

    <!-- Nav tabs --> 
     <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" class="active tab-btn"><a href="#login" class="tab-link" id="login1" aria-controls="login" role="tab" data-toggle="tab">Login</a></li> 
     <li role="presentation" class="tab-btn"><a href="#signup" class="tab-link" id="signup1" aria-controls="signup" role="tab" data-toggle="tab">Sign Up</a></li> 
     </ul> 

    <!-- Tab panes --> 
     <div class="tab-content"> 
     <div role="tabpanel" class="tab-pane active" id="login"> 

      <div class=" row main col-md-6 col-md-offset-3"> 

       <form class="form-group"> 

        <h3 class="form-titles center-block">Login</h3> 

        <input type="text" class="form-control form-subtitles" placeholder="Usuario"> 

        <input type="password" class="form-control form-subtitles" placeholder="Password"> 

        <input type="submit" class="form-control form-subtitles btn btn-info" value="Login"> 

       </form> 

      </div> 


     </div> 
     <div role="tabpanel" class="tab-pane" id="signup"> 
      <div class=" row main col-md-6 col-md-offset-3"> 

       <form class="form-group"> 

        <h3 class="form-titles center-block">Sign Up</h3> 

        <input type="text" class="form-control form-subtitles" placeholder="Usuario"> 

        <input type="text" class="form-control form-subtitles" placeholder="E-mail"> 

        <input type="password" class="form-control form-subtitles" placeholder="Password"> 

        <input type="submit" class="form-control form-subtitles btn btn-info" value="Signup"> 

       </form> 

      </div> 
     </div> 






     </div> 

    </div> 

</div>

Nguồn

2017-02-03 Diego Rios

lẽ http://stackoverflow.com/a/4739713/218196. –

Bạn đang sử dụng điều hướng góc băm - https://docs.angularjs.org/guide/$location – dmoo

Bản sao có thể có của [angularjs 1.6.0 (mới nhất hiện tại) tuyến không hoạt động] (http: // stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working) – georgeawg

Nếu trình duyệt được duyệt HTML5 angularJS wi sẽ chuyển hướng nó đến #!

Nếu không, nó sẽ chỉ là #.

Đọc tài liệu này tại đây theo số $location để tìm hiểu thêm về lý do điều này xảy ra.

Mở một URL thường xuyên trong một trình duyệt di sản -> chuyển hướng đến một hashbang

URL Mở URL hashbang trong một trình duyệt hiện đại -> viết lại để một URL thường xuyên

chế độ HTML5

Ở chế độ HTML5, thanh ghi và thanh toán dịch vụ $location tương tác với địa chỉ URL của trình duyệt thông qua API lịch sử HTML5. Điều này cho phép sử dụng đường dẫn URL và phân đoạn tìm kiếm thông thường, thay vì tương đương hashbang của chúng. Nếu API lịch sử HTML5 không được hỗ trợ bởi trình duyệt, dịch vụ vị trí $ sẽ tự động quay lại sử dụng các URL băm hashbang. Điều này giúp bạn không phải lo lắng về việc liệu trình duyệt hiển thị ứng dụng của bạn có hỗ trợ API lịch sử hay không không; dịch vụ vị trí $ minh bạch sử dụng tùy chọn có sẵn tốt nhất.

Mở một URL thường xuyên trong một trình duyệt di sản -> chuyển hướng đến một hashbang URL URL Mở hashbang trong một trình duyệt hiện đại -> viết lại để một URL thường xuyên Lưu ý rằng trong chế độ này, AngularJS chặn tất cả các liên kết (tùy thuộc vào sự Quy tắc "viết lại liên kết Html" bên dưới) và cập nhật url theo cách không bao giờ thực hiện tải lại toàn bộ trang.

Ví dụ:

it('should show example', function() { 
    module(function($locationProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 
    }); 
    inject(function($location) { 
    // in browser with HTML5 history support: 
    // open http://example.com/#!/a -> rewrite to http://example.com/a 
    // (replacing the http://example.com/#!/a history record) 
    expect($location.path()).toBe('/a'); 

    $location.path('/foo'); 
    expect($location.absUrl()).toBe('http://example.com/foo'); 

    expect($location.search()).toEqual({}); 
    $location.search({a: 'b', c: true}); 
    expect($location.absUrl()).toBe('http://example.com/foo?a=b&c'); 

    $location.path('/new').search('x=y'); 
    expect($location.url()).toBe('/new?x=y'); 
    expect($location.absUrl()).toBe('http://example.com/new?x=y'); 
    }); 
}); 

it('should show example (when browser doesn\'t support HTML5 mode', function() { 
    module(function($provide, $locationProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 
    $provide.value('$sniffer', {history: false}); 
    }); 
    inject(initBrowser({ url: 'http://example.com/new?x=y', basePath: '/' }), 
    function($location) { 
    // in browser without html5 history support: 
    // open http://example.com/new?x=y -> redirect to http://example.com/#!/new?x=y 
    // (again replacing the http://example.com/new?x=y history item) 
    expect($location.path()).toBe('/new'); 
    expect($location.search()).toEqual({x: 'y'}); 

    $location.path('/foo/bar'); 
    expect($location.path()).toBe('/foo/bar'); 
    expect($location.url()).toBe('/foo/bar?x=y'); 
    expect($location.absUrl()).toBe('http://example.com/#!/foo/bar?x=y'); 
    }); 
});

Nguồn

2017-02-03 22:20:15

Cảm ơn. Và tôi nên làm gì để sửa liên kết gửi tôi đến 'localhost: 3000/#!/#% 2Fsl' –

@DiegoRios Hãy thử sử dụng' $ locationProvider.hashPrefix ('') '; –

Và tôi không nghĩ rằng tôi đang chạy nó trong một trình duyệt cũ. Chrome có phải là trình duyệt cũ nhất không? –

Tại sao url của tôi chứa "!" khi sử dụng góc?

Trả lời

Các vấn đề liên quan