Search code examples
angularjs-routing

angularjs routing is not working no error found

what seems to be wrong here i dont get any error but at the same time no progress in routing. .

index.html

<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>

</head>
<body ng-app="myApp">

<h1> this is index.html </h1>

<div ng-view></div>

</body>
</html>

mainpage.js // where my controller is

    var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);

app.config(function($routeProvider) { 
    $routeProvider
    .when('/', {
        templateUrl : 'index.html'
    })
    .when('/home', {
        templateUrl : 'homepage.html'
    })
    .otherwise({
        templateUrl : 'index.html'
    });

});

when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console

Solution

  • The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template