Angular js: not able to route pages using $routeProvider

Question

This is the route file app.js. Other routes are not working, every time any other link or button is clicked it redirects to books.html only. 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. Here view details button redirects to the same page i.e 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.

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

Share how you are using routes in `html` code. you must be doing it wrong , so `otherwise` route is getting called — Shashank Vivek, May 28 '18 at 10:47
All these template urls exists in that path? Addresses are correct? — Saeed, May 28 '18 at 11:38
Can you replace `href="#/books/details/{{book._id}}` with `ng-href="#/books/details/{{book._id}}` and let me know if that works — Shashank Vivek, May 28 '18 at 12:05

score 0 · Answer 1 · answered May 28 '18 at 12:11

0

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

answered May 28 '18 at 12:11

Shashank Vivek

16,888
8
62
104

Tried the above solution but it doesn't work. The issue is something else. – sneha_h May 28 '18 at 15:15
@sneha_h :Can u try creating a sample plunkr https://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2 and share in your question and in this comment as well ? – Shashank Vivek May 29 '18 at 03:45
Solved the issue. I was using angular version 1.6 , edited it to angular version 1.4 and it worked. Thanks for your help. – sneha_h May 29 '18 at 10:38
@sneha_h : Awesome !!!! Make note of `ng-href` as well. It can create bugs if not taken care of :) – Shashank Vivek May 29 '18 at 12:18
@sneha_h Did you change version of `angular-route` as well ? Although it worked for you, I am not sure what problem did `1.6` created in your case – Shashank Vivek May 29 '18 at 12:20
Yes i changed the version of `angular-route` to 1.4 as well. – sneha_h May 30 '18 at 09:54

score 0 · Answer 2 · answered Sep 06 '18 at 09:43

0

Seems like you have hashprefix !, then your URL should also have ! after hash(#)

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

answered Sep 06 '18 at 09:43

saeed asghari

23
6

Angular js: not able to route pages using $routeProvider

2 Answers2