ngRoute Issue - Onclick of Link Controller template is not loading the list

Hi,

I am trying a example of ngRoute on page load it is showing me proper list i.e. view1.html but when I am clicking on link that does not go on my view2.html template, I spent so much time to debug but nothing comes in the hand…
below is my whole code:

<html>
   <head>
         <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
         <script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js" type="text/javascript"></script>
         <script src="https://code.angularjs.org/1.5.0-rc.2/angular-messages.min.js"></script>
         <script src="https://code.angularjs.org/1.5.0-rc.2/angular-resource.min.js"></script>
       <script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.min.js"></script>
        <!-- <script src="js/myApp.js" type="text/javascript"></script>-->
   </head>
 <body>
        <!-- Placeholder for the views -->
   <div data-ng-app="demoApp">
      <ng-view></ng-view>   
    </div>
   <script>
         var demoApp = angular.module("demoApp", ["ngRoute"]);
         demoApp.config(function($routeProvider){
             $routeProvider
                .when('/view1',
                      {    
                        controller: 'simpleController',
                        templateUrl: 'view1.html'
                      })
                .when('/view2',
                      {    
                        controller: 'simpleController',
                        templateUrl: 'view2.html'
                      })
                .otherwise ({ redirectTo: '/view1'});                     
         });
         demoApp.controller('simpleController', function($scope) {
           $scope.customers =[
               {name:'Shahzad',city:'shahjahanpur'},  
               {name:'Irshad', city:'Lucknow'}, 
               {name:'Shamshad', city:'rampur'}
           ];
            $scope.addCustomer = function(){
                $scope.customers.push(
                    { name: $scope.newCustomer.name, 
                      city: $scope.newCustomer.city
                    });
            }; 
        });        
      </script>
</body> 
</html>

**view1.html**
<div>
    <h2>View 1</h2>
        Name : 
        <br />
        <input type="text" data-ng-model="filter.names" />
        <ul>
          <li data-ng-repeat="cust in customers | filter:filter.names | filter:city | orderBy:'city'"> {{ cust.name | lowercase}} - {{ cust.city | uppercase }}</li>
        </ul>
        <br />
        Customer Name: <br/>
        <input type="text" data-ng-model="newCustomer.name" />
        <br />
        Customer city: <br/>
        <input type="text" data-ng-model="newCustomer.city" />
        <br />
        <button data-ng-click="addCustomer()">Add Customer</button>   
    <br /><br />
    <a href="#/view2" > View2</a>
</div> 

**view2.html**

<div>
        <h2>View 2</h2>
        city : 
        <br />
        <input type="text" data-ng-model="filter.city"> 
        <br />
        <ul>
            <li data-ng-repeat= "cust in customers | filter:filter.city | orderBy:city"> {{ cust.name }} - {{ cust.city }} </li>
        </ul>
</div>

Because of so much white space between lines, it looks like some of your code has not been formatted for Discourse to show in your post.

If you cannot see the code, then we cannot see it either.

Please highlight the invisible code and click the </> button in the editor menu to make it appear.

thanks for your reply,
I edited my post, please take a look…

Thanks for your reply, I edited my post please take a look…

Thank you for editing your post.

I am not a JavaScript person so I cannot help with your question, but someone else should be along within a couple of hours who can. . :slight_smile:

In Angular 1.6 the default hash-prefix used for $location hash-bang URLs has changed from the empty string (‘’) to the bang (‘!’).

More info: commit-aa077e8

So, you have 3 options:

Use an Angular version < 1.6

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-route.min.js"></script>

Revert to the old way of doing things

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

Adapt to the new behaviour

<!DOCTYPE HTML>
<html>
  <head>
    <meta chraset="utf-8">
    <title>Router demo</title>
  </head>
  <body>
    <h1>My App!</h1>

    <div data-ng-app="demoApp">
      <ng-view></ng-view>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular-route.min.js"></script>

    <script>
      var demoApp = angular.module("demoApp", ["ngRoute"]);
      demoApp.config(function($routeProvider){
        $routeProvider
          .when('/view1', {
            template: '<h2>View 1</h2><a href="#!/view2">View 2</a>'
          })
          .when('/view2', {
            template: '<h2>View 2</h2><a href="#!/view1">View 1</a>'
          })
          .otherwise ({ redirectTo: '/view1' });
      });
    </script>
  </body>
</html>

HTH

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.