html - Angular routing is not working, url is displayed but page is not loading -

i have added angular.min.js, angular-route.min.js

the issue when login button clicked url changes '/home' page home.html not displaying. i've tried adding controller under templateurl it's not working

<main class="container" ng-app="myapp"> <div class="row">   <div class="login-page" ng-controller="loginctrl">     <div class="form">       <form class="login-form">         <input type="text" placeholder="username" ng-model="username"/>         <input type="password" placeholder="password" ng-model="password"/>         <button type="submit" ng-click="submit()">login</button>         <p class="message">not registered? <a href="#">create account</a></p>       </form>     </div>   </div> </div> 

 var app = angular.module('myapp', ['ngroute']);   app.config(function ($routeprovider, $locationprovider){  $locationprovider.hashprefix('');  $routeprovider  .when('/', {     templateurl: 'index.html'  })   .when('/home', {     templateurl: 'home.html'  })  .otherwise({     redirectto: '/'  }); });   app.controller('loginctrl', function($scope, $location){ $scope.submit = function(){     var username = $scope.username;     var password = $scope.password;      if($scope.username =='admin' && $scope.password == 'pwd'){         $location.path('/home');     }     else {         alert("invalid credentials");     }  }); 

you need abstract application , put in different files , include reference these files in index.html

index.html

 <main class="container" ng-app="myapp">          <div class="row" ng-controller="mainctrl">           <div ng-view></div>         </div>    </main> 

login.html

<div class="login-page">     <div class="form">       <form class="login-form">         <input type="text" placeholder="username" ng-model="username"/>         <input type="password" placeholder="password" ng-model="password"/>         <button type="submit" ng-click="submit()">login</button>         <p class="message">not registered? <a href="#">create account</a></p>       </form>     </div>   </div> 

config file

 var app = angular.module('myapp', ['ngroute']);   app.config(function ($routeprovider, $locationprovider){  $locationprovider.hashprefix('');  $routeprovider  .when('/', {     templateurl: 'login.html',     controller:'loginctrl'  })   .when('/home', {     templateurl: 'home.html',     controller: 'homectrl'  })  .otherwise({     redirectto: '/'  }); }); 

main controller

app.controller('mainctrl', function($scope, $location){      }); 

home controller

app.controller('homectrl', function($scope, $location){      }); 

login controller

app.controller('loginctrl', function($scope, $location){ $scope.submit = function(){     var username = $scope.username;     var password = $scope.password;      if($scope.username =='admin' && $scope.password == 'pwd'){         $location.path('/home');     }     else {         alert("invalid credentials");     }  });