What is the difference between $state and $stateProvider?

Question

I'm currently reading through an AngularJS 1.4.8-based application that uses AngularUI Router 0.2.15.

I noticed that this application sometimes uses a dependency $state and sometimes a dependency $stateProvider.

Are there any differences between injecting and working with $state and $stateProvider?

Answer 1

There are two types of singleton instances in angularjs.

One is the service instance we are always using, like $state.

The other one is called the 'provider', like $stateProvider.

'Providers' hold the factory function for the common service and is responsible for creating the corresponding service.

In other word, $stateProvider creates $state.

From the angular documentation:

An Angular service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called $get, which holds the service factory function.

When angular is instantiating a module, it will first create the providers, and after that it will run the 'module.config' functions.

However, services like $state are not instantiated by that time. They will be instantiated by their providers when needed (e.g. injected into other services) after 'module.config' is finished. So u cannot put a service in a module.config.

Both module.service and module.factory are creating providers in fact.They are shortcuts so we can always create services easily.