How to call ui-router state declared in another angular module

Question

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

when I call state xin this way

$state.go('x') 

from module A, it was not 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. In this case, you have one parent module with 2 child modules. Child module services, controllers, and directives can be used through these 3 modules without any dependency injection.