AngularJS无限循环与ng-view答案

【问题标题】：AngularJS infinite loop with ng-viewAngularJS无限循环与ng-view
【发布时间】：2014-09-11 14:38:19
【问题描述】：

我刚刚开始将 AngularJS 用于我正在考虑整合的新应用程序，但在使用路由和视图时遇到了问题。

我已将这个示例精简到最低限度，但问题仍然存在。这个例子所做的只是访问服务器并返回 index.html 页面，然后获取 Angular 等。

index.html

<!doctype html>
<html lang="en" ng-app="main">
    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" type="text/css" src="css/style.css" />

        <script type="text/javascript" src="js/ext/angular.min.js"></script>
        <script type="text/javascript" src="js/ext/angular-route.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/test.js"></script>

        <base href="/ui/">
    </head>
    <body>
        <div ng-view></div>
    </body>
</html>

main.js

(function() {
    var app = angular.module('main', ['ngRoute', 'test']);

    app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

        $routeProvider
            .when('/test', {
                templateUrl: 'html/test.html',
                controller: 'TestCtrl'
            })
            .otherwise({
                redirectTo: '/test'
            });

        $locationProvider.html5Mode(true);
    }]);
})();

test.js

(function() {
    var app = angular.module('test', []);

    // get hierarchy
    app.controller('TestCtrl', ['$scope', function($scope) {

        alert('here');

    }]);
})();

test.html

<div>FooBar!</div>

警报被无限触发，但我只是不知道为什么。我见过其他例子，其中 ng-view 和 routing 的使用方式似乎完全相同，所以我不确定我做错了什么......

【问题讨论】：

你在控制台有什么信息吗（比如 html/test.html not found）？您也可以尝试删除并将您的 html 放在根目录中吗？最后一件事：将您的重定向路由到 /test 的其他内容。
我将把它放在小提琴中。看看会发生什么，看不到任何明显的因素。

标签： javascript angularjs infinite-loop

【解决方案1】：

前段时间我也遇到过同样的问题。请在开发者工具面板的同一浏览器中使用 firebug 或某些网络控件，您可以在其中查看对服务器的资源请求，然后检查是否请求了 test.html 文件并正确检索。似乎唯一检索到的是 index.html ，因此，循环。

可能你必须使用这个templateUrl值“/html/test.html”和“/”之前。本地化此资源。

这就是我向你提出的想法。以正确的方式本地化 test.html 资源。我希望这可以帮助你。

【讨论】：

【解决方案2】：

我在 2016 年 3 月的今天遇到了这个问题。我刚刚发现当 ng-view 出现在 html 中时导致无限循环的原因（在我的例子中是 index.html，它是在开始时加载的初始 html）。

好吧，问题毕竟是非常简单的一个。我的 app.js 中有这个路由提供程序设置

angular.module('myapp',['ngRoute'])
    .config(function($routeProvider) {
      $routeProvider
      .when('/', {
          templateUrl:'/index.html',
          controller:'MyAppCtrl'
      })

由于初始加载的html是index.html，此时的url是'/'，并且routeProvider调用'/'时的代码。是的，它再次加载 index.html，一次又一次……直到它死掉。解决方案是不要将 index.html 设置为 '/' 路由的 templateUrl。 html（模板）不应包含<div ng-view></div>。

【讨论】：

【解决方案3】：

这是我的做法，例如here

代码

.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$routeProvider
    .when('/test', {
        template: '<div>test</div>',
        controller: 'testCtrl'
    })
    .when('/other', {
        template: '<div>Delete</div>',
        controller: 'otherCtrl'
    })
    .otherwise({
        redirectTo: '/test'
    });

    $locationProvider.html5Mode(true);

}]);

【讨论】：

【解决方案4】：

好的，我解决了我的问题。我已经接受了 sergio，因为它最接近我意识到问题所在的方式——我的应用程序正在从应用程序服务器请求 html 文件，该服务器设置为将 index.html 文件作为默认操作返回。由于 html 请求没有关联的操作，因此默认返回 index.html 响应而不是 test.html 文件。

一旦我更改了网址，以便从 Web 服务器获取 html 文件，一切正常。如果我早一点真正思考发生了什么，那就很明显了。

感谢您的回复！

【讨论】：