25

I'm trying to get my head around AngularJS and ran into a problem.

var myApp = angular.module('myApp', ['myApp.services']);

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    console.log('Configuring module "myApp"');

    $routeProvider.when('/dashboard', {templateUrl: 'partial/dashboard', controller: DashboardController});
    $routeProvider.when('/menu', {templateUrl: 'partial/other', controller: OtherController});
    $routeProvider.otherwise({redirectTo: '/dashboard'});

    $locationProvider.html5Mode(true);
 }]);

To my understanding the configuration function should be called when the module gets loaded. But it does not!

I have the ng-app="myApp" directive on the <body> tag. And scripts loaded just before the body closing tag in the correct order (as far as that matters).

    <script src="angular.js"></script>      
    <script src="app.js"></script>
    <script src="services.js"></script>
    <script src="controllers.js"></script>
</body>

I'm pretty sure I must be overlooking something trivial here. There should be a message printed to the console. But it remains empty with no errors or warnings whatsoever.

The parts of the app not depending on the routes runs just fine.

Update: simplified version of my service.js

'use strict';

angular.module('myApp', function ($provide) {
    $provide.factory('myService', function ($http) {
        var service = function () {
            ...
            service implementation
            ...
        };

        return new service();
    });
});
Bart
  • 17,070
  • 5
  • 61
  • 80
  • Yeah... it should. Are you sure all scripts are getting loaded? Are there any errors in console? I just posted your code to a [Plunkr](http://plnkr.co/edit/fciVIcCWGtV4HG8rM4fh?p=preview) to check for any typo, and it works as expected. I can only suspect on your `myApp.services`, would you post it? – Caio Cunha Apr 08 '13 at 11:53
  • @CaioToOn - It was indeed a coding error in my services. Thanks for the pointer. – Bart Apr 08 '13 at 15:04
  • I see you posted the correct answer below; one tiny correction to above however is *when* the `config` runs. Unlike services, which run the first time they are injected, `config` blocks are run at a specified point in the AngularJS bootstrap. In other words, the `config` will *always* run and will always run *prior* to your app executing. – Josh David Miller Apr 08 '13 at 16:54
  • @JoshDavidMiller - Does that count for all modules or only the modules instantiated by the injector? – Bart Apr 08 '13 at 19:55
  • 1
    Modules don't get instantiated by the injector; services do. The `config`, though will execute for your app module and any modules it declares as dependencies, plus all of their dependencies, etc. – Josh David Miller Apr 08 '13 at 22:14
  • got the same problem and got scratching my head for hours. But after reading your question, I realized that my problem is just the missing ng-app directive ahahha. thanks for this question. – Alex Coroza Aug 28 '15 at 10:12
  • I got the same problem. My code is not working because method `.run` is not being called. When I open chrome's debugger, `.run` are called correctly (i'm running Ionic app by `ionic serve` command) – m.rufca Oct 25 '16 at 02:00

3 Answers3

31

It seems that the method I used for defining the service was overriding my myApp module.

This is the overriding line

angular.module('myApp', function ($provide) ...

This code simply redefines the myApp module and adds a function to configure that one.

I refactored service.js to this simplified version and it started to work.

var myApp = angular.module('myApp');

myApp.factory('securityService', function () {
    return SomeFancyServiceObject();
});
Bart
  • 17,070
  • 5
  • 61
  • 80
  • 1
    Thanks, this really saved me a lot of hours! – acme Jul 11 '13 at 15:04
  • Ran into this today. I'm usually pretty careful, but I'm dealing with multiple modules and I couldn't figure it out until I came here....and then it was so obvious. Good catch! –  Nov 08 '14 at 00:03
  • 1
    Thank you.. In my case, I was using the same module name for app.js and MyControllers.js. I added an empty [] to my MyControllers.js and realized it was overriding the main module.. Trick is to use distinct names for your modules. – Shailen Sukul Apr 22 '15 at 03:52
  • Same thing. I was too nervous during the hackathon trying to understand why my almost hello world app doesn't work. – ivkremer Oct 31 '15 at 03:24
  • 5 years later and your question and answer just saved my ***. I've been hitting my head against a wall for like 4+ hours over this and never would've figured that out on my own. I had some empty brackets sitting on a controller's .module() declaration that I must've added absent mindedly and completely forgot had existed. I never would've noticed without this answer. THANK YOU – Chris Apr 18 '18 at 21:53
11

I was missing ng-app="myApp" inside my html tag - and I realized this while reading your question :-)

Illidan
  • 4,047
  • 3
  • 39
  • 49
  • 3
    sigh. what a small mistake made that cost me an hour of debugging – mauris Jul 12 '16 at 14:15
  • Wasted a while - zero error messages.. and realizing that app.config is not even getting called on created a new app.... all because i fat fingered `np-app=` instead of `ng-app` I was about to rip out ngroute and pull in ui-router ! Geez. I must need an angular code spellchecker.. thx for your answer – Tom Stickel Feb 14 '17 at 22:34
0

I usually see routing applied by chaining them together:

$routeProvider
    .when('/dashboard', {templateUrl: 'partial/dashboard', controller: DashboardController})
    .when('/menu', {templateUrl: 'partial/other', controller: OtherController})
    .otherwise({redirectTo: '/dashboard'});

Can't see why yours would not work, but might be worth a go.

Nick
  • 6,366
  • 5
  • 43
  • 62
  • 3
    The problem is that the config(fn) never gets called. So the code in the function is never executed. – Bart Apr 08 '13 at 12:17