happenask happenask - 3 months ago 12
AngularJS Question

Angularjs $stateProvider and singleton service issue

I am using angular-ui-router to make my app organized by routing but I am little confused. as I know I have to add 'ui-router' dependencie in module to use $stateProvider. but even though I do not add 'ui-router' dependencie, It is working well.

I know angular service is singleton object so if I add 'ui-router' dependencie only once. can I use $stateProvider service in any module?

below code is angular code defined in my app.

angular.module('app', ['ui-router','app.pages']);

angular.module('app.pages', ['app.pages.core']);


angular.module('app.pages.core',[])
.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider
.state('common.default', {
abstract: true,
views: {
header: {
templateUrl: '/public/app/common/components/header/header.html',
controller: 'headerController'

},
content: {
template: '<div ui-view></div>'
}
}
})
.state('common.default.core', {
url: "/goongles/",
templateUrl: "/public/app/pages/core.html",
controller: 'coreController'
});
});


view code

<div ui-view="header"></div>
<div ui-view="content" class ='view ng-scope openm'></div>


please give me any idea. thanks

Answer

Think of it as a tree. The root of your tree is whatever module you set in the ng-app directive. When Angular it's bootstraping, it starts from there, and loads all of the module components and its dependencies' components. Once the bootstrap its finished, the lifecycle continues (creating constants, then providers, then running config blocks, etc).

Since somewhere in your app you have a dependency to ui-router, all of its services become available after bootstrap.

Regardless of that, you shouldn't rely on that for your modules to work. If you were to use your app.pages.core module in another application which doesn't have a dependency to ui-router, then it wouldn't work.