首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular js:无法使用$routeProvider路由页面

Angular js:无法使用$routeProvider路由页面
EN

Stack Overflow用户
提问于 2018-05-28 18:46:14
回答 2查看 92关注 0票数 0

这是app.js的路由文件。其他路由不起作用,每次单击任何其他链接或按钮时,它都只重定向到books.html。我做错了什么?

代码语言:javascript
复制
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);
}]);

这是html文件。在这里view details按钮重定向到同一页面,即books.html

代码语言:javascript
复制
<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>

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

代码语言:javascript
复制
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;
            }   
    }
}]);

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

代码语言:javascript
复制
<!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>

EN

回答 2

Stack Overflow用户

发布于 2018-05-28 20:11:32

替换

代码语言:javascript
复制
<a class="btn btn-primary" href="#/books/details/{{book._id}}">View Details</a>

使用

代码语言:javascript
复制
<a class="btn btn-primary" ng-href="#/books/details/{{book._id}}">View Details</a>

它应该是有效的。在使用{{ }} angular表达式呈现url时,请确保使用ng-href

票数 0
EN

Stack Overflow用户

发布于 2018-09-06 17:43:44

看起来你有哈希前缀!,那么你的网址也应该有!散列后(#)

代码语言:javascript
复制
 href="#!/books/details/{{book._id}}"
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50564602

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档