Angular JS：无法使用$ routeProvider路由页面

Question

This is the route file app.js . 这是路由文件app.js。 Other routes are not working, every time any other link or button is clicked it redirects to books.html only. 其他路由不起作用，每次单击任何其他链接或按钮时，它只会重定向到books.html。 what mistake I am doing? 我在做什么错？

 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); }]);

This is the html file. 这是html文件。 Here view details button redirects to the same page ie books.html . 此处的“ 查看详细信息”按钮重定向到同一页面，即books.html 。

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

Is the issue is using same controller name?? 问题是使用相同的控制器名称吗？ This is BooksController . 这是BooksController 。

 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; } } }]);

This is index.html . 这是index.html 。 Is there anything wrong in this code?? 这段代码有什么问题吗？

 <!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>

Answer 1

Replace 更换

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

with 与

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

and it should work. 它应该工作。 Make sure to use ng-href when rendering url with {{ }} angular expression 使用{{ }}角度表达式渲染网址时，请确保使用ng-href

Answer 2

Seems like you have hashprefix ! 好像您有hashprefix ! , then your URL should also have ! ，那么您的网址也应该有！ after hash( # ) 在hash（ # ）之后

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

Angular JS：无法使用$ routeProvider路由页面

问题描述

2 个解决方案

解决方案1
0 2018-05-28 12:11:32

解决方案2
0 2018-09-06 09:43:43

Angular JS：无法使用$ routeProvider路由页面

问题描述

2 个解决方案

解决方案1 0 2018-05-28 12:11:32

解决方案2 0 2018-09-06 09:43:43

解决方案1
0 2018-05-28 12:11:32

解决方案2
0 2018-09-06 09:43:43