Question

我已经制作了网页。但是，当我试图点击某些书时，我的路线不会改变，它总是一样的，在网页上总是有书而不是范围。我几乎尝试了一切，但我仍然没有看到可能存在的问题。我敢肯定，我错过了一些东西，但我没有看到。

        <div class="middle">
           <div class="book" ng-repeat="book in books | filter:searchBox">
                <img ng-src="{{book.pic}}" class="book-pic">
                <h1 class="book-title"><a href={{"#book/"+book.id}}>{{book.title}}</a></h1>
                <p class="author">{{book.author}}</p>
                <p class="description">{{book.description}}</p>
                <div class="price">
                    <p class="price-desc">{{book.price | currency  : "€"}}</p>
                </div>
            </div>

        </div>
    </div>

Js代码：

var myApp = angular.module('myApp', ['ngRoute']);

 myApp.config(function ($routeProvider) {
     $routeProvider

         .when('book/:id', {
             templateUrl: 'book.html',
             controller: 'bookController'
         });
     myApp.controller('bookController', function ($scope, $http, $routeParams) {

         $http.get("http://localhost/biblioteka/public/index/" + $routeParams.id)
             .then(function (response) {
                 $scope.book = response.data;
             });
     });

 });
 myApp.controller('myCtrl', function ($scope, $http) {


     // aside categories 

     $http.get("http://localhost/biblioteka/public/index")
         .then(function (response) {
             $scope.books = response.data;
         });

     $http.get("http://localhost/biblioteka/public/index/categories")
         .then(function (response) {
             $scope.categories = response.data;
         });
 });

图书已转换为json文件：

$app->get('/index', function (Request $request, Response $response, array $args) {
    // Sample log message
    $arr = [
        [  
            "id"=> 1,
            "pic"=> 'img/Nim-in-Action.jpg',
            "title"=> 'Nim in Action',
            "author"=> 'By: Dominik Picheta',
            "description"=> 'Nim is a multi-paradigm language that offers powerful customization options with the ability to compile to everything from C to JavaScript. In Nim in Action you’ll learn how Nim compares to other languages in style and performance, master its structure and syntax, and discover unique features.',
            "price"=> 35.59
            ],
        [
            "id"=> 2,
            "pic"=> 'img/31-Days-Before-Your-CCNA-Routing-Switching-Exam.jpg',
            "title"=> '31 Days Before Your CCNA Routing & Switching Exam',
            "author"=> 'By: Allan Johnson',
            "description"=> '31 Days Before Your CCNA Routing & Switching Exam  offers a friendly, practical way to understand the CCNA Routing & Switching certification process, commit to taking the ICND1 (100-105) and ICND2 (200-105) exams or the CCNA (200-125) exam, and finish your preparation using a variety of Primary and…',
            "price"=> 20
            ],
        [
            "id"=> 3,
            "pic"=> 'img/The-Python-3-Standard-Library-by-Example.jpg',
            "title"=> 'The Python 3 Standard Library by Example',
            "author"=> 'By: Doug Hellmann',
            "description"=> 'Master the Powerful Python 3 Standard Library through Real Code Examples The Python 3 Standard Library contains hundreds of modules for interacting with the operating system, interpreter, and Internet–all extensively tested and ready to jump-start application development. Now, Python expert Doug Hellmann introduces every major area of the…',
            "price"=> 45.50
        ],
        [
            "id" => 4, 
            "pic"=>'img/Visual-Basic-2012-Programmers-Reference.jpg',
            "title"=> 'Visual Basic 2012 Programmer’s Reference',
            "author"=> 'By: Rod Stephens',
            "description"=> 'The comprehensive guide to Visual Basic 2012 Microsoft Visual Basic (VB) is the most popular programming language in the world, with millions of lines of code used in businesses and applications of all types and sizes. In this edition of the bestselling Wrox guide, Visual Basic expert Rod…',
            "price"=> 10.8
        
        ],
        [
            "id" => 5,
            "pic"=> 'img/Windows-10-For-Dummies-3rd-Edition.jpg',
            "title"=> 'Windows 10 For Dummies, 3rd Edition',
            "author"=>'By: Andy Rathbone',
            "description"=> 'The #1 source for Windows 10 help Millions of Windows users have turned to Windows For Dummies for quick, friendly, and easy-to-understand help with their computers. Windows 10 For Dummies, 3rd Edition continues this tradition as it helps you navigate the twists and turns of Windows. Start at the beginning to discover the…',
            "price"=> 20
       
        ],
        
    ];
    
    $response->getBody()->write(json_encode($arr,true));

    // Render index view
    return $response->withHeader('Access-Control-Allow-Origin', '*')
            ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
            ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
});

Answer 1

从配置中取出你的控制器

myApp.config(function ($routeProvider) {
     $routeProvider

         .when('book/:id', {
             templateUrl: 'book.html',
             controller: 'bookController'
         });
}

myApp.controller('bookController', function ($scope, $http, $routeParams) {
  $http.get("http://localhost/biblioteka/public/index/" + $routeParams.id)
             .then(function (response) {
                 $scope.book = response.data;
             })
});

Answer 2

您应该从代码的配置部分移动控制器。

将这部分代码移出config：

aws-sdk

Answer 3

你这样做是错误的。 app.config部分仅用于配置服务等，我们只有config阶段可用的提供商。但是，您正在config内部注册控制器，这会影响流程。您应该将控制器部件从config部分移动到单独的文件或同一文件中，但不能移动到config内部。

将此代码移出config：

myApp.controller（'bookController'，function（$ scope，$ http，$ routeParams）{

         $http.get("http://localhost/biblioteka/public/index/" + $routeParams.id)
             .then(function (response) {
                 $scope.book = response.data;
             });
     });

如何在angularJS中使用ng-route创建动态网页

3 个答案: