Question

我正在通过使用nodejs作为restful api服务器构建一个简单的书店Web应用程序来学习角度。我构建了服务器，它工作正常，但一旦涉及到前端我面临一个问题。我使用角度ngRoute构建主页面以从服务器获取数据并显示如下：

图片和标题以及描述角度读取没有问题但是一旦按下按钮＆＃34;查看详细信息＆＃34;我应该使用服务器上的book id重定向到详细信息页面。

从前端结束路线提供者：

lua_package_path "/opt/luameter/luac/luameter.luac";

图书管理员：

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

myApp.config(function($routeProvider){
$routeProvider.when('/',{
    controller: 'BooksController',
    templateUrl: 'views/books.html'
})
.when('/books',{
    controller: 'BooksController',
    templateUrl: 'views/books.hrml'
})
.when('/books/details/:id',{
    controller: 'BooksController',
    templateUrl: 'views/book_details.html'
})
.when('/books/add', {
    controller: 'BooksController',
    templateUrl: 'views/add_book.html'
})
.when('/books/edit/:id', {
    controller: 'BooksController',
    templateUrl: 'views/edit_book.html'
})
.otherwise({
    redirectTo: '/'
})
});

书籍html正在设计的面板：

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

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



  $scope.getBooks = function(){
    $http.get('/api/books').then(function(response){
      $scope.books = response.data;
    });
  }

  $scope.getBook = function(){
    var id = $routeParams.id;
    $http.get('/api/books/'+id).then(function(response){
      $scope.book = response.data;
    });
  }


}]);

这个详细信息预订html，点击按钮必须将其重定向到：

details_book.html

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

这是来自服务器的get请求，用于证明服务器使用某个id

工作

打开主页后出现的错误：

按下按钮后出现此错误：

注意：按下按钮后，它会给我这个网址： http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab 其中id是599701c1f3da51117535b9ab，我们可以在url的末尾看到它。但它应该给url完全如下： http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab 一旦我手动编写这个网址，我就到了页面，这是没有问题的细节，但是一旦我从book.html页面按下按钮，我再次得到预览奇怪的网址： http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab 哪个加载没有。

这是所有文件的github网址： https://github.com/AbdallahRizk/BookStore.git

任何建议请!!

Answer 1

使用$ rootScope而不是$ scope for getBook function

$rootScope.getBook = function(){
  var id = $routeParams.id;
    $http.get('/api/books/'+id).then(function(response){
        $scope.book = response.data;
});
    init(getBook);
}

注意：将$ rootScope添加到BookController

Answer 2

好像我有hashprefix！，那么我的网址也应该有！哈希（＃）

之后

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

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

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

注意：@Pankaj Parkar在I get a weird templateURL not as it suppose to give with angular?

的回答

它只是用角度ngRoute加载相同的页面？

2 个答案: