CODEWITHSUNDEEP
angularjs
pipi
pipi

Reputation: 725

Routing cause Maximum call stack size exceeded

I am new to angularJS. I tried to and practice some examples and met a very tricky error. I spent a couple of hours to figure out RangeError,but I failed to overcome it. Can anyone help me get out from this trap?

In app.js

var sampleApp = angular.module('phonecatApp', ['ngRoute']);

sampleApp .config(['$routeProvider','$locationProvider',
  function($routeProvider,$locationProvider)
  {
    $routeProvider.
      when('/', {
        templateUrl: 'index.html',
      }).
      when('/addOrder', {
        templateUrl: 'add-order.html',
        controller: 'AddOrderController'
      }).
      when('/showOrders', {
        templateUrl: 'show-orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/addOrder'
      });
      $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
        });
  }]);

sampleApp.controller('AddOrderController', function($scope) {

  $scope.message = 'This is Add new order screen';

});


sampleApp.controller('ShowOrdersController', function($scope) {

  $scope.message = 'This is Show orders screen';

});

In index.html

<!DOCTYPE html>
<head>
</head>
    <h1>weclome to test!</h1>
<body ng-app="phonecatApp" >
<div ng-view></div>

<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="static/app.js"></script>   
</body>


</html>

In add_order.html

<h2>Add New Order</h2>

{{ message }}

In show_order.html

<h2>Show Orders</h2>

{{ message }}

In addition, the wrong source directory of folder that store js and html files cause the RangeError?

This is error that shows in chrome console enter image description here

Upvotes: 5

Views: 4198

Answers (4)

pankaj
pankaj

Reputation: 21

I was facing similar problem/ error. What worked for me was I used the routes with # . i.e I removes this part from app.js

$locationProvider.html5Mode({
          enabled: true,
          requireBase: false
});

Upvotes: 0

Nikhil Biju
Nikhil Biju

Reputation: 26

Split the routing scripts in to a different file.

angular.module('phonecatApp').config(['$routeProvider','$locationProvider',
  function($routeProvider,$locationProvider)
  {
    $routeProvider.
      when('/', {
        templateUrl: 'index.html',
      }).
      when('/addOrder', {
        templateUrl: 'add-order.html',
        controller: 'AddOrderController'
      }).
      when('/showOrders', {
        templateUrl: 'show-orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/addOrder'
      });
      $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
        });
  }]);

then refer it in your index file may be like : 

<script src="static/router.js"></script>

that should fix it.

Upvotes: 0

Renuka
Renuka

Reputation: 146

I also had the same issue. Then I tried with putting 'script' tags to 'head' tag. It works fine now.

<!DOCTYPE html>
<html>
<head>
    <script src="//code.angularjs.org/1.2.20/angular.js"></script>
    <script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
    <script src="static/app.js"></script>
</head>
<body ng-app="phonecatApp" >
    <h1>weclome to test!</h1>
    <div ng-view></div>  
</body>

</html>

Upvotes: 0

Robin Thoni
Robin Thoni

Reputation: 1721

I think you are browsing to /, which is probably index.html, which includes app.js, which will need index.html due to the route, which will require app.js, etc... You may need to put your / template in another html file (let's call it home.html), and change the template for / to home.html

Upvotes: 5

Related Questions