服務（廠）錯誤 - JSON API不顯示數據

Question

我已經花是個不錯的4至6個小時試圖解決我的問題 - 也許我看着它完全錯誤的。

controller.js文件：

'use strict'; 

/* Controllers */ 

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

bookControllers.controller('BookListCtrl', ['$scope', 'Book', 
    function($scope, Book) { 
    $scope.books = Book.query(); 
    $scope.orderProp = 'name'; 
    }]); 

bookControllers.controller('BookDetailCtrl', ['$scope', '$routeParams', 'Book', 
    function($scope, $routeParams, Book) { 
    $scope.book = Book.get({bookId: $routeParams.bookId}, function(book) { 
     $scope.mainImageUrl = book.avatar; 
    }); 

    $scope.setImage = function(imageUrl) { 
     $scope.mainImageUrl = imageUrl; 
    }; 
    }]); 

我service.js文件

'use strict'; 

/* Services */ 

var bookServices = angular.module('bookServices', ['ngResource']); 

bookServices.factory('Book', ['$resource', 
    function($resource){ 
    return $resource('https://api.myjson.com/bins/1oofv', {}, { 
     query: {method:'GET', params:{bookId:'bookId'}, isArray:true} 
    }); 
    }]); 

所以發生了什麼。

我的SHOW文件 - 顯示所有books我的book.json文件，我在myjson上託管顯示所有我需要的內容。

它相應地顯示所有縮略圖與下面的HTML：

<div class="container"> 
<!--Nav Bar--> 
    <div class="row"> 
    <div class="col-md-4"> 
     Find me the best 
     <select ng-model="orderProp" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
     <option value="name">Alphabetical</option> 
     <option value="age">Newest</option> 
     </select> 
    </div> 

    <div class="col-md-4"> 
     Books about 
     <select ng-model="orderProp" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
     <option ng-repeat="book in books" value="">{{ book.genre.name }}</option> 
     </select> 
    </div> 

    <div class="col-md-4"> 
     <div class="input-group"> 
     <input ng-model="query" type="text" class="form-control" placeholder="Search books"> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" ></span></button> 
      </span> 
     </div> 
    </div> 
    </div> 

<!--Body content--> 
    <div class="row"> 
    <div class="col-md-4" ng-repeat="book in books | filter:query | orderBy:orderProp"> 
     <div class="thumbnail" id="books"> 
     <a href="#/books/{{ book.name }}"><img ng-src="{{ book.cover }}"></a> 
     <div class="caption"> 
      <h4>{{ book.name }}</h4> 
      <h5><a href="{{ book.id }}">{{ book.author.name }}</a></h5> 
      <span class="glyphicon glyphicon-heart likes">{{ book.likes }}</span> 
      <span style="float: right;">{{ book.published | date:'yyyy-MM-dd' }}</span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

這是一切優秀 - 現在，當我點擊一個特定的書或作者我期待的應用NAV到下一個頁面中的所有詳細的細節我需要在以下模板（但事實並非如此）：

<div class="container"> 
<div class="row"> 
    <header> 
    <h1></h1> 
    <h4></h4> 
    <p></p> 
    <h6>Categories:</h6> 
    <span>{{ book.genre.category }}</span> 
    </header> 
</div> 

<div class="row"> 
    <h3>Introduction</h3> 
    <h1></h1> 
    <p></p> 
    <div class="line-sep"></div> 
    <img ng-src="{{ avatar }}" class="img-round" /> 
    <h2></h2> 
</div> 

<div class="row"> 
    <h1>Similar reading</h1> 
    <p></p> 
    <div class="col-md-4"> 
    <div class="thumbnail" id="books"> 
     <a href="#"><img ng-src="http://placehold.it/350x500"></a> 
     <div class="caption"> 
     <h4>Lorem Ipsum Dolar Asar</h4> 
     <h5><a href="#">By Mr Lorem Ipsum</a></h5> 
     <span class="glyphicon glyphicon-heart likes">1032</span> 
     <span style="float: right;">3 days ago</span> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail" id="books"> 
     <a href="#"><img ng-src="http://placehold.it/350x500"></a> 
     <div class="caption"> 
     <h4>Lorem Ipsum Dolar Asar</h4> 
     <h5><a href="#">By Mr Lorem Ipsum</a></h5> 
     <span class="glyphicon glyphicon-heart likes">1032</span> 
     <span style="float: right;">3 days ago</span> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="thumbnail" id="books"> 
     <a href="#"><img ng-src="http://placehold.it/350x500"></a> 
     <div class="caption"> 
     <h4>Lorem Ipsum Dolar Asar</h4> 
     <h5><a href="#">By Mr Lorem Ipsum</a></h5> 
     <span class="glyphicon glyphicon-heart likes">1032</span> 
     <span style="float: right;">3 days ago</span> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

在現場看我的josn文件：https://api.myjson.com/bins/1oofv

所有我需要的要做的是以下幾點：

使用json文件在list頁面上顯示書籍（有一些細節） - 以我認爲合適的任何顯示風格顯示。

然後 - 一次顯示所有的書（用搜索和過濾能力） - 能夠點擊一本書，被帶到一個BOOK DETAIL頁面，我們將深入研究有關的書和展示的書籍類似於詳細給他們。

Answer 1

停止強調，並按照Flatlander Gemstore tutorial。

1. 第一個問題，我可以發現的是，你使用Book.get但定義Book.query
2. 其次，使用href="#"休息角，要麼使用一個<a href="">或者，因爲我喜歡，簡單地用一個按鈕，這是條死衚衕，ISN的超鏈接'鏈接。
3. 爲yeouuu說，href="{{ book.id }}"似乎是錯誤的，這可以是一個語義錯誤，應該是href="{{ book.url }}"或者這根本就是一個錯誤，應該已經完全是另一回事。

做的教程，這是一個很好的資源。