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();
    });
});
Improve this question
7
  • 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 to check for any typo, and it works as expected. I can only suspect on your myApp.services, would you post it? Commented Apr 8, 2013 at 11:53
  • @CaioToOn - It was indeed a coding error in my services. Thanks for the pointer. Commented Apr 8, 2013 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. Commented Apr 8, 2013 at 16:54
  • @JoshDavidMiller - Does that count for all modules or only the modules instantiated by the injector? Commented Apr 8, 2013 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. Commented Apr 8, 2013 at 22:14

3 Answers 3

Reset to default
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();
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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!
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.
Same thing. I was too nervous during the hackathon trying to understand why my almost hello world app doesn't work.
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
11

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

Improve this answer

2 Comments

sigh. what a small mistake made that cost me an hour of debugging
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
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.

Improve this answer

1 Comment

The problem is that the config(fn) never gets called. So the code in the function is never executed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.