0

I am learning angular by building a simple bookstore web app using nodejs as a restful api server. I built the server and it works fine, but once it comes to the front end I face an issue. I built the main page using angular ngRoute to get the data from the server and presented as following:

MainPage

the picture and the title and the description angular read it with no problem but once I press the button "View Details" I should be redirected to a details page using the book id from the server.

From the front End the route provider:

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider){
$routeProvider.when('/',{
    controller: 'BooksController',
    templateUrl: 'views/books.html'
})
.when('/books',{
    controller: 'BooksController',
    templateUrl: 'views/books.hrml'
})
.when('/books/details/:id',{
    controller: 'BooksController',
    templateUrl: 'views/book_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: '/'
})
});

Books Controller: 

    var myApp = angular.module('myApp');

myApp.controller('BooksController', ['$scope', '$http', '$location', 
'$routeParams', function($scope, $http, $location, $routeParams){
  console.log('BooksController loaded...');



  $scope.getBooks = function(){
    $http.get('/api/books').then(function(response){
      $scope.books = response.data;
    });
  }

  $scope.getBook = function(){
    var id = $routeParams.id;
    $http.get('/api/books/'+id).then(function(response){
      $scope.book = response.data;
    });
  }


}]);

books html where the panel being designed:

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

This the details book html where by clicking the button it must be redirected to:

details_book.html

 <div class="panel panel-default" ng-init="getBook()">
 <div class="panel-heading">
<h3 class="panel-title">{{book.title}}</h3>
</div>
<div class="panel-body">
<div class "row">
    <div class ="col-md-4">
            <img src="{{book.image_url}}">
    </div>
    <div class ="col-md-8">
        <p>{{book.description}}</p>
        <ul class="list-group">
            <li class="list-group-item">Genre: {{book.genre}}</li>
            <li class="list-group-item">Author: {{book.author}}</li>
            <li class="list-group-item">Publisher: {{book.publisher}}
</li>


        </ul>
    </div>
</div>
</div>
</div>

and this is the get request from the server to prove the server working find using a certain id

PostMan Get Request

The error I get once I open the main page: First Error

And this error I get once I press the button: Second Error

Note: Once I press the button it give me this url: http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab where the id is 599701c1f3da51117535b9ab which we can see it in the end of the url. But it should give url exactly such as: http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab and once I write this url manually I get to the page which is the details with no problem but once I press the button from the book.html page I get the previews strange url again which is: http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab Which load no where.

This is the github url for all the documents: https://github.com/AbdallahRizk/BookStore.git

Any suggestions Please!!

AbdallahRizk
  • 107
  • 1
  • 5
  • 3
    have you checked the dev tools if it has any errors? can you try to replicate your issue on plnkr? it would be easier for us to help you. – redanesc Aug 21 '17 at 03:14
  • What error you are getting exactly, did you debug and checked whether routeparams.Id has any Id or not? – Karan Desai Aug 21 '17 at 03:15
  • its better to have different controller than single controller – user1608841 Aug 21 '17 at 04:12
  • Possible duplicate of [URL hash-bang (#!/) prefix instead of simple hash (#/) in Angular 1.6](https://stackoverflow.com/questions/41226122/url-hash-bang-prefix-instead-of-simple-hash-in-angular-1-6) – Mistalis Aug 29 '17 at 09:58

2 Answers2

1

use $rootScope instead of $scope for getBook function

$rootScope.getBook = function(){
  var id = $routeParams.id;
    $http.get('/api/books/'+id).then(function(response){
        $scope.book = response.data;
});
    init(getBook);
}

Note: add $rootScope to your BookController

Vishnu prasad
  • 11
  • 3
0

Seems like I have hashprefix !, then my URL should also have ! after hash(#)

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

Since Angular 1.6 hashprefix is defaulted to !, you can disable this behavior by setting hashPrefix to ''(blank).

.config(['$locationProvider', 
 function($locationProvider) {
 $locationProvider.hashPrefix('');
}
  ]);

Note: This answer from, @Pankaj Parkar at I get a weird templateURL not as it suppose to give with angular?

AbdallahRizk
  • 107
  • 1
  • 5