AngularJS controller not being loaded

Question

I have a simple app.js that is supposed to load a controller. The controller isn't being loaded though. Would appreciate some help.

Here is my app.js:

/* globals APP, angular */
angular.module('templates-outlook', []);

angular.module(APP, [
     'templates-outlook',
     'ui.router'
])
.config[(
     '$stateProvider',
     function ($stateProvider) {
          console.log("Loaded app.js");

          $stateProvider
          .state('outlook', {
               url: '/extension',
               templateUrl: 'templates/outlook/outlook_main.html',
               controller: 'OutlookMainController'
          })

     }
])

Here is outlookmain.js . It's really simple.

/* global angular, APP */


angular.module(APP).controller('OutlookMainController', [
     console.log('lion king'),
     function () {
          console.log('blah blah');
     }
]);

When I navigate to localhost/extension, I only see lion king Loaded app.js

Why am I not seeing "blah blah"?

Note: The reason I'm seeing lion king ( i think ) is that in the header i'm loading

<script src="/load.php?f=outlook/app.js"></script>
<script src="/load.php?f=outlook/outlookmain.js"></script>

its because you are not invoking the function, blah blah logged inside the function so if you want invoke a function after its creation make the function IIFE see https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript but i have no idea what you are going to acheive with this! — Ravikumar Rajendran, Oct 02 '18 at 13:49
Are you getting eny error(s) in devtools console? (F12 in your browser) — lealceldeiro, Oct 02 '18 at 14:03
is it possible that you putt your code online, its easy to compile and check it — Uahmed, Oct 02 '18 at 14:17

Shankar kota · Answer 1 · 2018-10-02T14:04:23.610

1

Below is one of the example to declare the function.

 function nameOfFunction() {
      console.log('some text to print');
 }

For your requirement it should be like below.`

angular.module(APP).controller('OutlookMainController', [
     console.log('lion king');
     // Function declaration here
     function testFunction() {
          console.log('blah blah');
     }
     // Call the function here
     testFunction();
]);

`

edited Oct 02 '18 at 14:04

answered Oct 02 '18 at 13:50

Shankar kota

111
6

1

I don't think that's the problem – lealceldeiro Oct 02 '18 at 14:04
yeah thats not the problem :( – Asool Oct 02 '18 at 14:14
1

@Asool Ummm, yes this is the problem (or part of the problem anyway).. A function does not run unless you call it, or define it as self-executing. You have done neither here. – Pop-A-Stash Oct 02 '18 at 20:17

Pop-A-Stash · Answer 2 · 2018-10-02T20:37:57.803

Your controller definition is incorrect:

angular.module(APP).controller('OutlookMainController', [
     console.log('lion king'),
     function () {
          console.log('blah blah');
     }
]);

When you change the formatting, it's easy to see that you are passing an array as the second argument.

angular.module(APP).controller('OutlookMainController', 
  [console.log('lion king'), function () { console.log('blah blah'); }]
);

angular.module(APP).controller('OutlookMainController', [console.log('lion king'), function() { console.log('blah blah'); }]
);

BUT, the array is supposed to contain injected services and providers, with the final element of the array being the function for your controller. Here, you are inserting a console.log statement. That does not make sense.

And, as you can see from this controller definition in Plunker, this code throws an error in the console: https://next.plnkr.co/edit/cHQjFsx3q0oHvkxC

Error: [$injector:itkn] Incorrect injection token! Expected service name as string, got undefined

I think what you meant to do was this:

angular.module(APP).controller('OutlookMainController', [function() {
     console.log('lion king'),
     function () {
          console.log('blah blah');
     }
}]);

However, the anonymous function will still not be called unless you call it explicitly, take it out of the function, or define it as self-executing:

angular.module(APP).controller('OutlookMainController', [function() {
     console.log('lion king');

     console.log("blah blah blah");

     (function () {
          console.log('blah blah');
     })();

     function logBlah() {
          console.log('blah blah');
     }
     logBlah();
}]);

AngularJS does not change the basic principles of Javascript.

AngularJS controller not being loaded

2 Answers2