簡體   English   中英

Angular JS:無法使用$ routeProvider路由頁面

[英]Angular js: not able to route pages using $routeProvider

這是路由文件app.js。 其他路由不起作用,每次單擊任何其他鏈接或按鈕時,它只會重定向到books.html。 我在做什么錯?

 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文件。 此處的“ 查看詳細信息”按鈕重定向到同一頁面,即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> 

問題是使用相同的控制器名稱嗎? 這是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; } } }]); 

這是index.html 這段代碼有什么問題嗎?

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

更換

<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

好像您有hashprefix ! ,那么您的網址也應該有! 在hash( # )之后

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM