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>

Answer 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();
]);

`

Answer 2

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.