路由原因超出最大调用堆栈大小答案

【问题标题】：Routing cause Maximum call stack size exceeded路由原因超出最大调用堆栈大小
【发布时间】：2017-01-14 04:04:52
【问题描述】：

我是 angularJS 的新手。我尝试并练习了一些示例，但遇到了一个非常棘手的错误。我花了几个小时来弄清楚 RangeError，但我没能克服它。谁能帮我摆脱这个陷阱？

在 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';

});

在 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>

在 add_order.html 中

<h2>Add New Order</h2>

{{ message }}

在 show_order.html 中

<h2>Show Orders</h2>

{{ message }}

另外，存放js和html文件的文件夹源目录错误导致RangeError？

这是在 chrome 控制台中显示的错误

【问题讨论】：

你能发布完整的错误信息吗？
@SteamDev 我添加了我的错误截图。除非杀死它，否则我无法停止程序。
您正在递归调用某个函数。在您发布更多代码之前，我们无法确定问题所在。对你来说最简单的事情是开始剥离部分，直到你有一个可重现的测试用例。很有可能，您在进行此练习时会遇到递归。
@Adam 我使用 Django 作为我的后端服务器。 index.html 由 Django 模板呈现。会不会是疑似目标？

标签： angularjs

【解决方案1】：

我认为您正在浏览到 /，这可能是 index.html，其中包括 app.js，由于路由，这将需要 index.html，这将需要 app.js 等...您可能需要将 / 模板放入另一个 html 文件（我们称之为 home.html），并将 / 的模板更改为 home.html

【讨论】：

【解决方案2】：

我也有同样的问题。然后我尝试将“脚本”标签放在“头”标签上。现在可以正常使用了。

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

【讨论】：

【解决方案3】：

将路由脚本拆分到不同的文件中。

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

然后在你的索引文件中引用它可能是这样的：

&lt;script src="static/router.js"&gt;&lt;/script&gt;

应该可以解决它。

【讨论】：

很抱歉在更正路由器对索引文件的引用时错误地发布了整个代码：P

【解决方案4】：

我遇到了类似的问题/错误。对我有用的是我使用了 # 的路线。即我从app.js中删除了这部分

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

【讨论】：