Angular 给出了一个奇怪的模板 URL

Question

我正在尝试使用选定的 objectID 导航到另一个页面。 Angular 路由，

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.when('/',{
    controller: 'BooksController',
    templateUrl: 'views/books.html'
})  
.when('/books/details/:id',{
    controller: 'BooksController',
    templateUrl: 'views/book_details.html'
})   
});

Angular 控制器：

    var myApp = angular.module('myApp');

myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams){
  console.log('BooksController loaded...');

 // This To get request all the books: it works fine   
  $scope.getBooks = function(){
    $http.get('/api/books').then(function(response){
      $scope.books = response.data;
    });
  }

   // This to get request a book with specific id it works fine
  $scope.getBook = function(){
    var id = $routeParams.id;
    $http.get('/api/books/'+id).then(function(response){
      $scope.book = response.data;
    });
  }

}]);

然后我有这个 html 页面，它也可以正常工作接受页面中的按钮，这个按钮应该给我一个干净的 templateUrl 导航到另一个 html 页面但它给了我奇怪 URL:

<div class="panel panel-default" ng-init="getBooks()">
<div class="panel-heading">
  <h3 class="panel-title">Latest Books</h3>
</div>
<div class="panel-body">
  <div class="row">
      <div ng-repeat="book in books">
          <div class="col-md-6">
              <div class="col-md-6">
                  <h4>{{book.title}}</h4>
                  <p>{{book.description}}</p>
                  <a class="btn btn-primary" href="#/books/details/{{book._id}}">View Details</a>
              </div>
              <div class="col-md-6">
                  <img class="thumbnail" src="{{book.image_url}}">
              </div>
          </div>
      </div>
  </div>
</div>

一旦我按下按钮，我应该得到一个干净的 url，例如： http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab 但是我得到了这个url！ http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab

Answer 1

好像你有 hashprefix !，那么你的 URL 在 hash(#)

之后也应该有 !

href="#!/books/details/{{book._id}}"

由于 Angular 1.6 hashprefix 默认为 !，您可以通过将 hashPrefix 设置为 ''（空白）来禁用此行为。

.config(['$locationProvider', 
  function($locationProvider) {
     $locationProvider.hashPrefix('');
  }
]);

Answer 2

这是因为您的 url 正在转换为代码。 %2f 表示一个 /.

您需要进行此配置才能避免 angular

的这种行为

myApp.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Answer 3

您在 url 中有前缀，它正在转换为字符，即 url 编码。因此，您需要通过将其值替换为 empty/blank string

来修复 $locationProvider 的 hashPrefix 属性

     $locationProvider.hashPrefix('');

Angular 给出了一个奇怪的模板 URL

Angular giving a weird templateURL

html

javascript

node.js

angularjs

angularjs-routing