CODEWITHSUNDEEP
javascripthtmlangularjsangular-routing
rex
rex

Reputation: 339

ng-view causes page to crash

Trying to replicate a simple routing example w3schools, but it keeps crashing with "RangeError: Maximum call stack size exceeded" in the console, when accessing index.html.

I tried to add/remove parts of the code to isolate the problem, and the crash seems to happen at <div ng-view></div>. Why is that? The changes I made from the original example are not that drastic.

Here is the code

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="app.js"></script>

</head>

<body ng-app="myApp">

<a href="#!red">Red</a>
<a href="#!green">Green</a>

<div ng-view></div>

</body>
</html>

app.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "index.html"
    })
    .when("/red", {
        templateUrl : "red.html"
    })
    .when("/green", {
        templateUrl : "green.html"
    });
});

red.html

This is red

green.html

This is green

Upvotes: 0

Views: 157

Answers (2)

masterpreenz
masterpreenz

Reputation: 2290

You are looping the app with this statement.

$routeProvider
.when("/", {
    templateUrl : "index.html"
})

You should another separate template that stands as your main template not index.html

Upvotes: 1

zameb
zameb

Reputation: 840

Yes, index is a container for other views. You should put a partial view instead of index. The problem is here:

$routeProvider
    .when("/", {
        templateUrl : "index.html"
    })

That template url will load the complete index.html inside ng-view, which will load another index.html with a new ng-view to the infinite and Secula Seculorum.

The easy fix: create a new view (like the other routes you have) and put it in the templateUrl

Upvotes: 2

Related Questions