how to call a ui-router state declared in another angular module

Question

I have created two angularjs module of the same application. How can I call from the module A the state x declared in the module B? Do you have any idea or workaround?

when I call the state x in this way

$state.go('x') 

from the module A, it isn't found

Answer 1

// This is your parent module

var app = angular.module('app', [
        'ui.router',
        // Application modules
        'moduleA',
        'moduleB'
    ]);

// This is your child module 1    
var moduleA = angular.module('moduleA', ['ui.router']);

moduleA.config(['$stateProvider', function($stateProvider) {


            $stateProvider
                .state('moduleA', {
                    url: '/route1',
                    controller: 'moduleAController',
                    template: "<div>Test</div>"
                });
            }]);



// This is your child module 2     
var moduleB = angular.module('moduleB', ['ui.router']);

moduleB.config(['$stateProvider', function($stateProvider) {


            $stateProvider
                .state('moduleB', {
                    url: '/route2',
                    controller: 'moduleBController',
                    template: "<div>Test</div>"
                });
            }]);

Explanation - With this you have one parent module with 2 child modules. Child modules services, controllers and directives can be used across these 3 modules without any dependency injection.