Routing Reason Maximum Call Stack Size

I am new to angularJS. I tried and practiced some examples and met a very tricky error. I spent a couple of hours to figure out a RangeError, but I could not overcome it. Can someone help me out of 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 the folder in which js and html files are stored, causes a RangeError?

This is the error that appears in the Chrome console. enter image description here

+4
source share
4 answers

, /, , , index.html, app.js, index.html - , app.js .. , /template html ( home.html) /home.html

+4

. 'script' 'head'. .

<!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>
0

.

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
        });
  }]);
Hide result

:

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

.

0

/. , #. app.js

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

Source: https://habr.com/ru/post/1653816/


All Articles