javascript - ng-app 使脚本运行到无穷大

Question

我正在使用 asp.net Web 应用程序空模板开发一个 Angular 应用程序，并且在使用 ng-app 时遇到问题，当我使用它并将其留空时，$routeProvider 不会被实例化，但是当我将 ng-app="myApp"指定为我的模块名称，主体的内容开始重复无限循环。 我确信我错过了一些基本的东西，但这个问题让我发疯 谢谢

这是我的 html 代码

这是主要的

<a href="#/view1">view1</a>

<div>
    <div ng-view></div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>

这是 myApp 代码

(function () {
    'use strict';

    var app = angular.module('myApp', ['ngRoute']);

    app.config([
        '$routeProvider', function ($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'index.html',
                controller: 'main'
            }).when('/view1', {
                templateUrl: 'view1.html',
                controller: 'main'
            }).otherwise({
                redirectTo: '/'
            });
        }
    ]);

    app.controller('main', function ($scope) {
        setTimeout(function() {
            alert("from set");
        },10000);
    });
})();

Answer 1

这里的问题是 index.html 不是应该加载到 ng-app 中的模板，它是外壳页面。您会一遍又一遍地加载整个应用程序，产生如下所示的内容:

<a href="#/view1">view1</a>

<div>
  <a href="#/view1">view1</a>

  <div>
    <a href="#/view1">view1</a>

    <div>
      <a href="#/view1">view1</a>

      <div>
        //...  more and more loaded here
      </div>
      <script src="Scripts/angular.js"></script>
      <script src="Scripts/angular-route.js"></script>
      <script src="app.js"></script>
    </div>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="app.js"></script>
  </div>
  <script src="Scripts/angular.js"></script>
  <script src="Scripts/angular-route.js"></script>
  <script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>

...基本上是永远的。

您应该只在 route 加载模板。