AngularJs 控制器代码运行无限期

Question

所以我正在设置一个网站以使用 Angular 路由，但我的行为非常奇怪。当我访问一条路线时，它似乎无限期地运行连接控制器中的代码，直到选项卡崩溃。这是我的路线：

angular.module(app.appName)
    .config([
        '$routeProvider', function($routeProvider) {
            $routeProvider
                .when('/', {
                    controller: 'homeController',
                    caseInsensitiveMatch: true
                })
                .when('/MyWishlists', {
                    templateUrl: 'assets/html/areas/MyWishlists/myWishlists.html',
                    controller: 'myWishlistsController',
                    caseInsensitiveMatch: true
                })
                .when('/Login', {
                    templateUrl: 'assets/html/areas/login/login.html',
                    controller: 'loginController',
                    caseInsensitiveMatch: true
                })
                .otherwise({ redirectTo: '/' });
        }
    ]);

这是我的 loginController:

angular.module(app.appName)
    .controller('loginController', ['$scope',
        function ($scope) {
            console.log('login');
        }]);

当我访问 http://localhost:50925/Login 时，它会运行一遍又一遍地 console.log('login'); 直到 Chrome 结束它。我在这是要干嘛这是造成这种情况的原因，我以前从未见过？

会不会和我的拼接文件有关？我正在使用 gulp 将所有控制器组合成 controllers.js。

编辑：我也刚刚尝试创建一个新控制器 homeController 并将其添加到我的路线中，并且它在它定义的任何路线上根本不使用 homeController。

angular.module(app.appName)
    .config([
        '$routeProvider', function($routeProvider) {
            $routeProvider
                .when('/', {
                    controller: 'homeController',
                    caseInsensitiveMatch: true
                })
                .when('/Home', {
                    controller: 'homeController',
                    caseInsensitiveMatch: true
                })
                .when('/MyWishlists', {
                    templateUrl: 'assets/html/areas/MyWishlists/myWishlists.html',
                    controller: 'myWishlistsController',
                    caseInsensitiveMatch: true
                })
                .when('/Login', {
                    templateUrl: 'assets/html/areas/login/login.html',
                    controller: 'loginController',
                    caseInsensitiveMatch: true
                })
                .otherwise({ redirectTo: '/' });
        }
    ]);

angular.module('wishlist')
    .controller('homeController', ['$scope',
        function ($scope) {
            console.log('home');
        }]);

Answer 1

您应该在定义 angular 模块时注入 ngRoute。这是 Link，它将帮助您定义 ngRoute，希望对您有所帮助。

Answer 2

您的控制器中的函数似乎没有名称，但存在一些错误。你可以检查一下。您需要添加类似这样的内容。

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

Angularjs需要注入你要使用的模块。所有的依赖都需要在使用前注入。

其他一切看起来都很好。

Answer 3

我已经解决了这个问题。我的问题是我使用的是 ASP.NET 但我使用的是一种完全绕过 MVC 管道的方法。为此，我需要创建一个 Index.cshtml 并告诉应用程序提供该文件。然而，此时，它 returns 所有未在 web.config 中明确列出的文件将规则重写为 HTML 给浏览器。我允许我的 assets/js 文件夹通过，但不允许我的 HTML 文件夹通过，因此它没有使用 Angular 提供 HTML 模板，而是检索整个重新编译的页面作为对浏览器，它反过来给浏览器一个完整的 HTML 页面来呈现新路由，并且它一遍又一遍地这样做，直到浏览器最终结束它。

简而言之，为了解决这个问题，我不得不将它添加到我的规则中 web.config。

<rewrite>
  <rules>
    <rule name="AngularJS Conditions" stopProcessing="true">
      <match url="(wwwroot/.*|assets/min.*|assets/html.*|bower_components/.*|api/.*)" />
      <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
      <action type="None" />
    </rule>
    <rule name="AngularJS Wildcard" enabled="true">
      <match url="(.*)" />
      <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
      <action type="Rewrite" url="index.cshtml" />
    </rule>
  </rules>
</rewrite>

AngularJs 控制器代码运行无限期

AngularJs Controller code running indefinitely

javascript

angularjs

angular-routing

AngularJs 控制器代码 运行 无限期

AngularJs Controller code running indefinitely

javascript

angularjs

angular-routing

AngularJs 控制器代码运行无限期