CODEWITHSUNDEEP
angularjsprovider
Maarten
Maarten

Reputation: 4671

App/provider circular dependency

I want to use a provider to set some configuration settings at starting up my AngularJs app, but I would like to have the app and the provider in 2 seperate files.

This is how I have it now:

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

myApp.config(function(myServiceProvider) {
....etc.

The provider is defined like this:

angular.module('myApp').provider('myService', function () {
...etc.

If I load the app first the provider is not there yet, and if I load the provider first the app is not there yet. What would be the best way to solve this?

Upvotes: 1

Views: 96

Answers (2)

Michael Kang
Michael Kang

Reputation: 52867

Your module definition includes module dependencies - not services or providers.

It should be:

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

The config block is always executed after your providers are initialized. There is no circular dependency issue.

File 1: Define module

angular.module('myApp', []);

File 2: Define providers

angular.module('myApp').provider('myService',function() {...});

File 3: Define config block

angular.module('myApp').config(function(myServiceProvider) { ... });

HTML:

<script src="/angular.js"></script>
<script src="/file1.js"></script>
<script src="/file2.js"></script>
<script src="/file3.js"></script>

Order of the files is important.

Upvotes: 2

Thomas
Thomas

Reputation: 1140

in your first file:

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

myApp.config(function(myServiceProvider) {
....etc.

and in your second file:

myApp.provider('myService', function () {
...etc.

The variable myApp is a global variable and you can access to this everywhere in your website. You can take a look at the Yeoman project, it's a generator which create your angularjs app structure and add lot of cool features.

Upvotes: 1

Related Questions