AngularJs(1.x) routing problem in ngRoute?

Question

This is the link for the hotels

<ul>
  <li ng-repeat="hotel in vm.hotels">
     <a ng-href="#/hotel/{{ hotel._id }}">{{ hotel.name }}</a>
  </li>
</ul>

and the route is this

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

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'angular-app/hotel-list/hotels.html',
      controller: HotelsController,
      controllerAs: 'vm'
    })
    .when('/hotel/:id', {
      templateUrl: 'angular-app/hotel-display/hotel.html',
      controller: HotelController,
      controllerAs: 'vm'
    });
}

there is no error in the console, I have put <div ng-view></div> in the correct place but it is not giving what I wanted. Any corrections please?Thank you!

Answer 1

With AngularJS V1.6, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c

<ul>
  <li ng-repeat="hotel in vm.hotels">
     ̶<̶a̶ ̶n̶g̶-̶h̶r̶e̶f̶=̶"̶#̶/̶h̶o̶t̶e̶l̶/̶{̶{̶ ̶h̶o̶t̶e̶l̶.̶_̶i̶d̶ ̶}̶}̶"̶>̶{̶{̶ ̶h̶o̶t̶e̶l̶.̶n̶a̶m̶e̶ ̶}̶}̶<̶/̶a̶>̶
     <a ng-href="#!/hotel/{{ hotel._id }}">{{ hotel.name }}</a>
  </li>
</ul>

For more information, see AngularJS Developer Guide - Migrating to V1.6 - $location