Maximum call stack size exceeded in angularjs using ng-view - angularjs

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">
Home <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);">
London<br>
</div>
<div class="section1Element">
Paris
</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?

Answer 1

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.

Answer 2

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.