Question

我正在努力使这个简单的Angular应用程序更加模块化。我将控制器分解到自己的文件中，在自己的目录中。我正在使用依赖注入来使控制器在app模块中可用。我通过连接/缩小链接html中的两个文件。我正确地设置了控制器的依赖关系，据我所知，该部分工作正常。

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello Tester Application</title>
    <link rel="stylesheet" href="css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.min.css">
</head>

<body ng-app="helloTesterApp">

    <header>
        <h1>Hello Tester App</h1>
    </header>

    <p class="description">This application calls the DropWizard example project to say hello to the user using that API.</p>

    <main ng-controller="HelloController">
        <div class="content-container">
            <input class="input-sm" type="text" name="name" placeholder="Enter your name here" ng-model="user.name">
            <button class="btn" type="button" ng-click="sayHello()">Get Greeting</button>
            <p class="response">Response Message: {{response.message}}</p>
        </div>

        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sapiente facilis ea harum, nostrum doloribus pariatur totam beatae vero nemo. Assumenda ad qui a rerum reiciendis cumque optio commodi facere.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div>
            <p>Current request Port: {{config.port}}</p>
            <p>If you would like to send the request to a different port, enter it here: <input class="input-sm" type="text" name="port" placeholder="alternative port" ng-model="config.altPort"></p>

        </div>
    </main>

    <footer>
      <script src="js/vendor/angular.min.js"></script>
      <script src="js/vendor/angular-route.min.js" charset="utf-8"></script>
      <script src="js/vendor/jquery-2.2.3.min.js" charset="utf-8"></script>
      <script src="js/app.min.js"></script>
    </footer>
</body>
</html>

helloController.js

angular.module('helloController', ['helloService'])
    .controller("HelloController", ['HelloService', '$scope', function($scope, HelloService) {
    $scope.user = {
        name: ""
    };

    $scope.response = {
      message: ""
    };

    $scope.config = {
      port: 9000,
      altPort: 0
    };

    $scope.sayHello = function() {
        $scope.response.message = HelloService.sayHello($scope.user.name, $scope.config.port);
    };
}]);

app.js（v.1）

angular.module('helloTesterApp', ['helloController']);

app.js（v.2）

angular.module('helloTesterApp', ['helloController'])
    .controller('HelloController', HelloController);

我尝试了第2版，因为我认为问题可能是我没有在应用程序上显式设置控制器，但这只会产生错误：＆＃34;未捕获的TypeError：HelloController未定义。＆＃34 ;

有人可以解释我做错了什么吗？谢谢

Answer 1

当您声明并作为参数时，依赖项的顺序必须匹配：

尝试更改：

['HelloService', '$scope', function($scope, HelloService)

要

['HelloService', '$scope', function(HelloService, $scope)

Answer 2

首先，控制器注入顺序，重要。也许这个片段可以解决您的问题。

(function() {
  'use strict';

  /**
   * hello.module.js
   */
  angular
    .module('helloTesterApp', [
      /* Shared modules */
      'app.mySharedModule',

      /* Feature areas*/
      'helloService'
    ]);
})();

但你可以用...做得更好。

(function() {
  'use strict';

  /**
   * hello.controller.js
   */
  angular
    .module('helloTesterApp') // <-- DIFF HERE
    .controller('HelloController', HelloController);

  HelloController.$inject = ['HelloService', '$scope'];

  function HelloController(HelloService, $scope) {
    ... // insert controller's code here
  } 
})();

和

angular.module('helloTesterApp', ['helloController'] /* <- This isn't a module */);

也许这可以帮到你 https://github.com/johnpapa/angular-styleguide/tree/master/a1 希望它能解决你的问题。

<强>更新忘了提到你不应该依赖控制器，你应该依赖另一个模块。什么是你的模块定义错误的原因。

HelloController

如何将(function() { 'use strict'; angular .module('app', [ 'app.hello' ]); })();与app.js区分开来

app.hello

并在hello.module.js文件中定义一个新模块，例如(function() { 'use strict' angular .module('app.hello', []); })();。

(function() {
  'use strict';

  angular
    .module('app.hello')
    .controller('HelloController', HelloController);

  HelloController.$inject = ['HelloService', '$scope'];

  function HelloController(HelloService, $scope) {
    // your code
  }
})();

最后，在hello.controller.js上创建控制器

  ADODataSet1.ConnectionString := 'Provider=ADsDSOObject';
  ADODataSet1.CommandText := 'select cn, distinguishedname from ''LDAP://HOME'' where objectClass=''*''';
  ADODataSet1.Open;
  ADODataSet1.Recordset.PageSize :=40; // << Edit
  FDMemTable1.CopyDataSet(ADODataSet1, [coStructure, coRestart, coAppend]);
  FDMemTable1.Open;

注入app的角度控制器未定义

2 个答案: