Angular:未注册具有此名称的控制器

时间:2017-05-16 05:04:41

标签: javascript angularjs angular-routing angular-controller

我一直试图解决这个问题几个小时,我似乎无法找到问题所在。我已经阅读了其他一些有类似问题的问题,但他们没有任何对我有用的解决方案。

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

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

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

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

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

function HomeController(HomeService) {

}

这个控制器不会注册,我不知道为什么。 ng-view中的每个HTML部分都有自己的控制器,ng-view在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>

我过去成功地建立了这样的项目没有问题,但是与这些项目相比,我找不到任何问题。任何帮助表示赞赏!

1 个答案:

答案 0 :(得分:1)

当我过去遇到此问题时,它与脚本加载顺序有关,尤其是使用异步脚本加载时。你似乎没有这样做。

进行问题排查:

在控制器的函数体(console.log('registering controller x'))内触发控制台日志语句。 错误之后,此语句将不会显示或显示

Angular曾经(并且我认为它仍然存在)尝试等待app加载并且所有控制器在运行代码之前注册到app。 Angular没有在这个控制器上等待,或者这个控制器没有运行。

从那里,您将验证对文件的引用是否正确(将console.log放在文件顶部),或确定Angular如何确定何时认为所有控制器都已加载以及为何不等待在你的控制器上。

我从1.2开始就没有处理Angular,因为我认为这是一个非常糟糕的框架。但那是我的经历,而且它看起来像是相同的基本架构。那时它依赖于Document.ready。我真的希望他们不再这样做了(这就是我遇到异步脚本加载器问题的地方)。

祝你好运。