AngularJS NgRoute - Url Changes But view doesnt render,No errors

appscript.js

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


    myApp.config([$routeProvider,function($routeProvider) {

      $routeProvider

      // route for the home page
        .when('/home', {

        templateUrl: 'home.html',
        controller: 'homeController'
      })

      // route for the about page
      .when('/services', {
        templateUrl: 'services.html',
        controller: 'servicesController'
      })

      // route for the contact page
      .when('/contacts', {
        templateUrl: 'contacts.html',
        controller: 'contactsController'
      })
      .otherwise({ redirectTo: '/services' });
    }
    ]);

index.html

<!doctype html>
<html ng-app="myApp">
  <head >


    <script src="appscript.js"></script>

    <link href="Styles/Styles.css" rel="stylesheet">

    <script src="homeController.js"></script>    
      <script src="servicesController.js"></script>
       <script src="contactsController.js"></script>
       <script src="aboutController.js"></script>
       <script src="clientsController.js"></script>

       <script src="angular-route.min.js"></script>
      <script src="angular.min.js"></script>

  </head>
  <body >
<div class="header" > <h2 style="color:blue;">Training Institute</h2> 
  </div>
<div class="nav">

<a href="#/home">Home</a>
<a href="#/about">About</a>
  <a href="#/services">Services</a>
  <a href="#/clients">Clients</a>
  <a href="#/contacts">Contact</a>

  </div>

<div class="content"  >  
<ng-view>   </ng-view>

  </div>

<div class="footer">footer</div>
  </body>
</html>

homeController.js

angular.module('myApp').controller('homeController',function($scope)
        {

           $scope.message="i am in home controller";

        }


);

home.html

<div>i am in home partial template</div>

I have searched related questions and did many changes but still not able to load partial templates in the view.The url is changed but the veiw doesnt update.

I put all my code files in the same location where index.html is there,to make sure the issue is not because of incorrect paths.

Solution

I've created a plunkr to reproduce and fix your problem which you can find here: https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview (note: only home, services and contacts work, as those are the only routes configures in ur code so the rest falls back to the route specified in otherwise)

There are two issues with your code:

You're order of files is incorrect, it needs to be:

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="appscript.js"></script>
<script src="homeController.js"></script>    
<script src="servicesController.js"></script>
<script src="contactsController.js"></script>
<script src="aboutController.js"></script>
<script src="clientsController.js"></script>

You're using AngularJS 1.6, in order to use routing ensure to read my answer here: Angular routing with ng-view is not working

Long story short: As of AngularJS 1.6, the default value for hashPrefix is !. As you're not making use of it, you either have to use it or reset it to '' using $locationProvider.hashPrefix(''). This change was introduced as of AngularJS 1.6 due this commit: https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52

Note: If this still doesn't help you, we might need more information as we have no idea what the content of all those js files are. Feel free to update my plunkr to reproduce your problem in that case.