Angular controller injected into app is undefined

Question

I am trying to make this simple Angular app I made more modular. I broke the controller out into its own file, in its own directory. I am using dependency injection to make the controller available in the app module. I am linking both files in the html, through concatenation/minification. I have the dependencies for the controller set correctly, and as far as I can tell that part is working fine.

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);

I tried version 2 because I thought maybe the problem was I hadn't explicitly set the controller on the application, but that only produced the error: "Uncaught TypeError: HelloController is not defined."

Could someone explain what I'm doing wrong? Thank you

I've also tried injecting the service from the controller into the app to see if that would help, and it did not. — redeagle47
– redeagle47, Commented May 3, 2016 at 20:58
['HelloService', '$scope', function($scope, HelloService) - Sholdn't it be: ['HelloService', '$scope', function(HelloService, $scope) ? — Bruno Garcia
– Bruno Garcia, Commented May 3, 2016 at 21:01
What error message do you get for v.1 in the browser console? Is the javascript file for your helloController module correctly loaded into your html file? — AWolf
– AWolf, Commented May 3, 2016 at 21:03
@BrunoGarcia please add that as an answer and I'll accept it. I made sure the order the of the dependencies matched the order of the params to the controller function, and that, along with changing my app.js back to v.1, fixed the issue. — redeagle47
– redeagle47, Commented May 3, 2016 at 21:08

Bruno Garcia · Accepted Answer · 2016-05-03 21:09:04Z

1

The order of the dependencies, as you declare and take as argument, must match:

Try Changing:

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

To

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

answered May 3, 2016 at 21:09

Bruno Garcia

6,4733 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

redeagle47 Over a year ago

Thanks, I knew it had to be something out in plain sight. I had already checked over all of the syntax for my controller, my service and my app, as well as the html. I appreciate you helping me out.

akirashimosoeda · Accepted Answer · 2016-05-03 22:16:36Z

First of all, controller injection order, matters. Maybe This snippet can solve your problem.

/**
 * QUICKFIX
 */
angular
  .module('helloTesterApp', ['helloService']) 
  .controller('HelloController', HelloController);

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

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

But you can do better with...

(function() {
  'use strict';

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

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

and

(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
  } 
})();

Maybe this can help you https://github.com/johnpapa/angular-styleguide/tree/master/a1 Hope it solves your problem.

update Forgot to mention that you're not supposed to be depending on controllers, you should be depending on another module. What's why your module definition is wrong.

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

What you can do to separate the HelloController from app.js you can do this

(function() {
  'use strict';

  angular
    .module('app', [
      'app.hello'
    ]);
})();

and define a new module, say app.hello on hello.module.js file.

(function() {
  'use strict'

  angular
    .module('app.hello', []);
})();

and last, create your controller on hello.controller.js

(function() {
  'use strict';

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

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

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

Collectives™ on Stack Overflow

Angular controller injected into app is undefined

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related