Not able to redirect page using Angular Routing

I am trying to learn Angular but stuck with the routing issue. I have tried looking at other questions but couldn’t find an answer.

This is my index page

 <!DOCTYPE html>
 <html data-ng-app = 'myFirstApp'>
 <head>
      <title>View</title>
 </head>

 <body>
 <div>
     <div ng-view></div>
 </div>
 <script src="Scripts/angular.min.js"></script>
 <script src="Scripts/angular-route.min.js"></script>

 <script>
     var demoApp = angular.module('myFirstApp', ['ngRoute']);

     demoApp.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/view1', {
                templateUrl: 'demoPartials/view1.html',
                controller: 'SimpleController'
            })
            .when('/view2', {
                templateUrl: 'demoPartials/view2.html',
                controller: 'SimpleController'
            })
            .otherwise({redirectTo: '/view1'});
     }]);

     demoApp.controller('SimpleController', function($scope){
        $scope.customers = [
            {name:'A F', city:'M'},
            {name:'D D', city:'B'},
            {name:'S J', city:'I'}
        ];
        $scope.addCustomer = function(){
            $scope.cutomers.push(
                {
                    name: $scope.newCustomer.name,
                    city: $scope.newCustomer.city
                }
            );
        };
     });
 </script>
 </body>
 </html>

The issue of routing is that whenever I click the view2 link it doesn’t route to the View2.html page. How should I fix it?

The View1 page

<div class="container">
    <h2>View 1</h2>
    Name:
    <br>
    <input type="text" data-ng-model="filter.name">
    <br>
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">
            {{ cust.name }} - {{ cust.city }}
        </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 Cutomer</button>
    <br>
    <a href="#/view2.html">View 2</a>
</div>

And view 2 page

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

Do check at the images once.

normal view of page: https://s15.postimg.org/3jrg76nsb/image.png

after clicking view2: https://s7.postimg.org/7xazbqqij/image.png

Answer

Your view2 inside the view1.html should be the name of the route

 <a href="#/view2">View 2</a>

DEMO

Leave a Reply

Your email address will not be published. Required fields are marked *