Question

这是路线文件 app.js 。其他路线不起作用，每次点击任何其他链接或按钮时，它只会重定向到books.html。我在做什么错误？

＆＃13;

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider' , function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'BooksController',
            templateUrl: '/views/books.html'
        })
        .when('/books', {
            controller: 'BooksController',
            templateUrl: '/views/books.html'
        })
        .when('/books/details/:id', {
            controller: 'BooksController',
            templateUrl: '/views/books_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: '/'
        })
  // $locationProvider.html5Mode(true);
}]);

＆＃13;

这是html文件。此处查看详细信息按钮重定向到同一页面，即 books.html 。

＆＃13;

<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" ng-src="{{book.image_url}}">
                   </div>
               </div>
            </div>
        </div>
      </div>
    </div>
</html>

＆＃13;

问题是使用相同的控制器名称吗？这是BooksController。

＆＃13;

var myApp = angular.module('myApp');

myApp.controller('BooksController', [ '$scope', '$http', '$location', '$routeParams', function ($scope, $http, $location, $routeParams) {
    $scope.getBooks = function() {

        $http.get('/api/books').then(successCallback, errorCallback);
            function successCallback(response){
                //success code
                $scope.books = response.data;
            }
            function errorCallback(error){
                //error code
                $scope.books = error;
            }   
    }
    
    $scope.getBook = function() {
        $http.get('/api/books/:id').then(successCallback, errorCallback);
            function successCallback(response){
                //success code
                $scope.book = response.data;
            }
            function errorCallback(error){
                //error code
                $scope.books = error;
            }   
    }
}]);

＆＃13;

这是index.html。这段代码有什么问题吗？

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<title>BookStore</title>
        <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="/css/style.css">
	</head>
	<body>
		<nav class="navbar navbar-default">
			<div class="container" >
				<div class="navbar-header">
			      	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
			        	<span class="sr-only">Toggle Navigation</span>
			        	<span class="icon-bar"></span>
			        	<span class="icon-bar"></span>
			        	<span class="icon-bar"></span>
                        
			      	</button>
			      	<a class="navbar-brand" href="#">BookStore</a>
		      	</div>
		      	<div class="collapse navbar-collapse" id="navbar">
		        	<ul class="nav navbar-nav navbar-right">
		        		<li><a href="#/books/add">Add Book</a></li>
                       
		        	</ul>
		      	</div>
      		</div>
    	</nav>

    	<div class="container">
    		<div class="row">
    			<div class="col-md-12">
    				<div ng-view>
                    </div>
    			</div>
    		</div>
    	</div>
		
        
		<script src="/app.js"></script>
		<script src="/controller/books.js"></script>
		<script src="/controller/genres.js"></script>
	</body>
</html>

＆＃13;

Answer 1

替换

<a class="btn btn-primary" href="#/books/details/{{book._id}}">View Details</a>

带

<a class="btn btn-primary" ng-href="#/books/details/{{book._id}}">View Details</a>

它应该有效。使用ng-href角度表达式

渲染网址时，请务必使用{{ }}

Answer 2

好像您有hashprefix !，那么您的URL也应该有！哈希（#）

之后

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

Angular js：无法使用$ routeProvider

2 个答案: