javascriptangularjsangularjs-ng-route

InternalError: too much recursion <div ng-view="" class="ng-scope">

I am new to angularJS . I am stuck on above error.here is my index.html

<body ng-app="myApp">
    <div ng-view></div>
    <a href="table">click</a>

    <script src="./libs/angular.js"></script>
    <script src="./libs/angular-route.js"></script>
    <script src="./scripts/myscript.js"></script>
</body>

here is my script file 

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

app.config(['$routeProvider',function($routeProvider){
    console.log("i am routeprovider");
    $routeProvider.when('/',{
        templateUrl:"index.html"
    }).when('/table',{
        templateUrl:"..//views//firstview.html"
    }).otherwise({
        redirectTo: 'google.com'
    })

}])

after running index.html on my local server i am getting following error in console

InternalError: too much recursion Stack trace: [object Object] <div ng-view="" class="ng-scope">

see attached image.

enter image description here

please help me sort this issue .

Solution

  • This error occurs because you've set the templateUrl to index.html which is actually also your parent template.

    When resolving the route '/' angular will inject the template index.html into the container <div ng-view></div>. The injected template also has the ng-view container. So angular will do this over and over again and is stuck in an endless recursion.

    You can fix this by defining another partial view for this templateUrl e.g. defaultview.html.

    Code

    $routeProvider.when('/',{
    templateUrl:"..//views//defaultview.html"
}).when('/table',{
    templateUrl:"..//views//firstview.html"
}).otherwise({
    redirectTo: '/'
})