[SOLVED] angularJs routeProvider issue

angularJs routeProvider issue

I have the below mentioned Angular code that uses the config and the routeProvider. View1 and View 2 are also enclosed.

<!DOCTYPE html>
<html>
<head>
    <title>My test application</title>
</head>
<body ng-app="myApp">
    <div>
        <div ng-view></div>
    </div>
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
min.js"></script>
    <script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
    <script>
        var myApp = angular.module('myApp', ['ngRoute']);  

        myApp.config(function($routeProvider){
            $routeProvider
                .when('/',
                {
                    controller: 'SimpleController',
                    templateUrl: 'Partials/view1.html'
                })
                .when('/view2',{
                    controller: 'SimpleController'
                    templateUrl:'Partials/view2.html'
                })
                .otherwise({
                    redirectTo: '/' 
                });
        });

        myApp.controller('SimpleController',SimpFunc);
        function SimpFunc($scope){
            $scope.customers = [
                {name:'Dave Smith', city:'New York'},
                {name:'Will Smith', city:'Phily'},
                {name:'Will Die', city:'Cincy'},
                {name:'Die till', city:'New Jersey'},
                {name:'Till What', city:'Cincy'}                
            ];
            $scope.addCustomer = function(){
                $scope.customers.push(
                    {
                        name: $scope.newCust.name, 
                        city: $scope.newCust.city
                    });
            };
        }
    </script>
</body>
</html>

View1.html

<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="filter.name" />
<br />
<ul>
    <li ng-repeat="cust in customers | filter:filter.name">{{ cust.name 
}} - {{ cust.city }}</li>
</ul>
<br />
Customer Name:
<br />
<input type="text" ng-model="newCust.name" />
Customer City:
<br />
<input type="text" ng-model="newCust.city" />
<br />
<button ng-click="addCustomer()">Add customer</button>
<br />
<a href="#/view2">View 2</a>
</div>

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

I am not able to render view1 and/or view2 in the page. How can I do that?

Solution

Your script library URLs are giving 404 error.

I used below

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js

And comma missing after SimpleController

 
.when('/view2',{
                    controller: 'SimpleController',