Javascript 角度：未注册具有此名称的控制器_Javascript_Angularjs_Angular Routing_Angular Controller

Javascript 角度：未注册具有此名称的控制器

javascript angularjs

Javascript 角度：未注册具有此名称的控制器,javascript,angularjs,angular-routing,angular-controller,Javascript,Angularjs,Angular Routing,Angular Controller,我已经想了几个小时了，但我似乎找不到问题所在。我读过一些其他类似问题的问题，但它们没有任何对我有效的解决方案我注册控制器时遇到问题。我无法在声明应用程序的文件之外注册控制器。最初，我在一个单独的文件中设置了“MainController”，但失败了。我收到一个错误，说“名为‘MainController’的控制器未注册”。一旦我将MainController放入声明应用程序的同一个文件中，就没有问题了。然而，当我有很多代码时，我不希望所有的控制器都在同一个文件中，因为它会变得太难读取。以下是我

我已经想了几个小时了，但我似乎找不到问题所在。我读过一些其他类似问题的问题，但它们没有任何对我有效的解决方案

我注册控制器时遇到问题。我无法在声明应用程序的文件之外注册控制器。最初，我在一个单独的文件中设置了“MainController”，但失败了。我收到一个错误，说“名为‘MainController’的控制器未注册”。一旦我将MainController放入声明应用程序的同一个文件中，就没有问题了。然而，当我有很多代码时，我不希望所有的控制器都在同一个文件中，因为它会变得太难读取。以下是我的代码示例：

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

angular.module('myApp')
  .controller('MainController', MainController);

我将其他控制器保存在不同的文件中，但它们没有注册。例如，在home.controller.js中：

angular.module('myApp')
  .controller('HomeController', HomeController);

function HomeController(HomeService) {

}

这个控制器不会注册，我不知道为什么。ng视图中的每个HTML部分都有自己的控制器，ng视图位于MainController中。以下是app.config.js文件：

angular.module('myApp')
  .config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/home', {
      templateUrl: 'views/home.html',
      controller: 'HomeController as home'
    }).when('/profile', {
      templateUrl: 'views/profile.html',
      controller: 'ProfileController as profile'
    });

    $locationProvider.html5Mode(true);
  });

以下是index.html：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <script src="vendors/angular.min.js"></script>
    <script src="vendors/angular-route.min.js"></script>

    <script src="scripts/app.module.js"></script>
    <script src="scripts/app.config.js"></script>

    <scripts src="scripts/home.controller.js"></scripts>
    <scripts src="scripts/profile.controller.js"></scripts>

    <script src="scripts/main.service.js"></script>
    <script src="scripts/home.service.js"></script>
    <script src="scripts/profile.service.js"></script>

    <base href="/" />
  </head>
  <body ng-controller="MainController as main">
    <header>
      <h1>My App</h1>
    </header>
    <!-- Content varies -->
    <div class="container">
      <ng-view></ng-view>
    </div>
  </body>
</html>


我的应用程序
我的应用程序

我过去成功地构建了这样的项目，没有任何问题，但与这些项目相比，我找不到任何问题。感谢您的帮助

我以前遇到过这个问题，它与脚本加载顺序有关，特别是使用异步脚本加载。你似乎没有那样做

要排除故障，请执行以下操作：

在控制器的函数体中触发控制台日志语句（

console.log（'registing controller x'）

）。此语句要么不显示，要么在错误后显示

Angular过去（我认为现在仍然如此）尝试在运行代码之前等待应用程序加载和所有控制器注册到应用程序。Angular未在此控制器上等待，或者此控制器未运行

从那里，您将验证对该文件的引用是否正确（在文件顶部放置一个console.log），或者确定Angular在何时相信所有控制器都已加载以及为什么不等待控制器

我从1.2开始就没有处理过Angular，因为我认为它是一个非常糟糕的框架。但那是我当时的经历，这似乎是相同的基本架构。当时它依赖于Document.ready。我真的希望他们不要再这样做了（这就是我遇到异步脚本加载程序问题的地方）

祝你好运。

如果你真的想分开你的文件，我建议为每个逻辑部分创建模块，即

angular.module（'myApp.home'，[]）.controller（'HomeController'，…

和在你的主应用中，

angular.module（'myApp'），['ngRoute'、'myApp.home'、…

此外，在任何

或

标记之前，都应该包含您的

标记。我（有点）在Plunker上复制您的应用，我看不出您有什么问题~