Maximum call stack size exceeded in angularjs using ng-view

Question

I am new to angular and using routing in my code. In index file i have a menu bar in which i am using concept of routing.

    <div class="menuBar">
        <a href="#!home" class="menuBarItems">Home</a> <a href="#!about"
            class="menuBarItems">About</a> <a href="#!services"
            class="menuBarItems">Services</a> <a href="#!contact"
            class="menuBarItems">Contact Us</a>
    </div>
    <div ng-view></div>
<script>
        var app = angular.module("myApp", [ "ngRoute" ]);
        app.config(function($routeProvider) {
            $routeProvider.when("/home", {
                templateUrl : "home.html"
            }).when("/about", {
                templateUrl : "about.html"
            }).when("/services", {
                templateUrl : "services.html"
            }).when("/contact", {
                templateUrl : "contactus.html"
            });
        });
    </script>

From this i am routing to four different html pages, but with in the home page i want nested routing. Code for home.html is as follows:

    <div>
        <section class="section1">
            <div class="section1Element"
                style="border-bottom: 2px solid rgba(0, 0, 0, 0.16);">
                <a href="#!london" class="link">London</a><br>
            </div>
            <div class="section1Element">
                <a href="#!paris" class="link">Paris</a>
            </div>
        </section>
        <section class="section2" ng-view></section>
    </div>
</div>


<script>
    var app = angular.module("myHome", [ "ngRoute" ]);
    app.config(function($routeProvider) {
        $routeProvider.when("/london", {
            templateUrl : "london.html"
        }).when("/paris", {
            templateUrl : "paris.html"
        });
    });
</script>

Here when I am using ng-view in section element it is showing an error of maximum call stack exceeded. I don't know how to fix it. Can anyone help me out in this please?

Lalit Sachdeva · Accepted Answer · 2017-11-15 12:12:17Z

0

Hey you are doing it somewhat wrong way, you should not have 2 routes defined, you need to work on nested routes, as far i can infer from your above example. so your code must be modified in a way like this

<script>
        var app = angular.module("myApp", [ "ngRoute" ]);
        app.config(function($routeProvider) {
            $routeProvider.when("/home", {
                templateUrl : "home.html"
            }).when("/home/london", {
                templateUrl : "london.html"
            }).when("/home/paris", {
                templateUrl : "paris.html"
            }).when("/about", {
                templateUrl : "about.html"
            }).when("/services", {
                templateUrl : "services.html"
            }).when("/contact", {
                templateUrl : "contactus.html"
            });
        });
    </script>

and then things will work as expected.

answered Nov 15, 2017 at 12:12

Lalit Sachdeva

6,6612 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sagar Mohnani Over a year ago

As they both are two different html files and london.html and paris.html are need to placed in section part of home.html. This is not working.

Lalit Sachdeva Over a year ago

just for reference please see this link bennadel.com/blog/…

Sagar Mohnani Over a year ago

actually what happening is london.html and paris.html files are being placed in ng-view of index.html, but what i want is these pages should be placed in "section2" div of home.html.

Sagar Mohnani · Accepted Answer · 2017-11-16 12:32:54Z

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(['$stateProvider', '$urlRouterProvider',function 
($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/Home/London");

$stateProvider
.state("Home", {
    url: "/Home",
    templateUrl: "Home.html"
})
.state("Home.Paris", {
    url: "/Paris",
    templateUrl: "Paris.html"
})
.state("Home.London", {
    url: "/London",
    templateUrl: "London.html"
})
.state("About", {
    url: "/About",
    templateUrl: "About.html"
})
.state("services", {
    url: "/services",
    templateUrl: "services.html"
})
.state("contactus", {
    url: "/contactus",
    templateUrl: "contactus.html"
});
}]);

This is the required js file that is need to be done.

Collectives™ on Stack Overflow

Maximum call stack size exceeded in angularjs using ng-view

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related