162

The following file "works" (the sense that it does not throw any errors):

<!doctype html> <html ng-app="modx"> <script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script> <script> angular.module("modx", [], function($routeProvider) { }); </script> </html>

but this

<!doctype html> <html ng-app="modx"> <script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script> <script> angular.module("modx", [], function($routeProvider, $rootScope) { }); </script> </html>

gives the error:

Error: Unknown provider: $rootScope from modx
Source File: http://code.angularjs.org/angular-1.0.0rc7.js
Line: 2491

WTF?

Improve this question
1
  • 114
    +1 for WTF as the bottom line. Commented Jul 9, 2013 at 17:31

3 Answers 3

Reset to default
306

You can not ask for instance during configuration phase - you can ask only for providers.

var app = angular.module('modx', []); // configure stuff app.config(function($routeProvider, $locationProvider) { // you can inject any provider here }); // run blocks app.run(function($rootScope) { // you can inject any instance here });

See http://docs.angularjs.org/guide/module for more info.

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

8 Comments

Thanks, it makes perfect sense, but how did you know that? Was it in the docs?
@Mavolio No, he is one the 3 core developers.
Well, FWIW, it is in the docs now, under the "Module Loading & Dependencies" section.
@vojta But what if I need to pass parameter from outside and use it in config ? say root path within asp.net app ? I just don't want to use global variables and wanted to use ng-init='root:<%= myroot %>' and use root value into module.config.
@vittore I think, putting this "outside" config into the global window is fine. Or having one module that defines all this stuff and then you load it in your app - eg. angular.module('config', []).constant('appRoot', '/local/js/app'); (this code would be generated by your server (you could even generate it as a JS file, rather then inlining into the html file). Then, your app loads this module and therefore has access to appRoot.
|
7

I've found the following "pattern" to be very useful:

MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...]; function MainCtrl (scope, rootscope, location, thesocket, ...) {

where, MainCtrl is a controller. I am uncomfortable relying on the parameter names of the Controller function doing a one-for-one mimic of the instances for fear that I might change names and muck things up. I much prefer explicitly using $inject for this purpose.

Improve this answer

2 Comments

That's neat; but how do you access MainCtrl like that?
I know your comment is old but it is worth responding to questions for future's sake. Modules/controllers can be defined like this so you can access them in this way: angular.module('myMod', []).controller('theController', controllerFunction); controllerFunction.$inject = []; function controllerFunction() { }
1

I don't suggest you to use syntax like you did. AngularJs lets you to have different functionalities as you want (run, config, service, factory, etc..), which are more professional.In this function you don't even have to inject that by yourself like

MainCtrl.$inject = ['$scope', '$rootScope', '$location', 'socket', ...];

you can use it, as you know.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.