Angular Separate UI Router Interface Files

Question

I am trying to split my routes into separate files, but I have problems downloading, but not getting error information. This is in the Ionic tabs app that uses the Angular UI Router.

My project is divided into separate applications

main-routes.js
main-controllers.js
main-routes-end.js

app1
- routes.js
- controllers.js
app2
- routes.js
- controllers.js

Here are my routes JS files for routes.

// main-routes.js
angular.module('myproj.routes', [])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
});

// app1/routes.js
angular.module('myproj.routes', [])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('tab.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/tab-home.html',
        controller: 'HomeCtrl'
      }
    }
  })
  .state('tab.odometer', {
    url: '/home/odometer',
    views: {
      'tab-home': {
        templateUrl: 'templates/home/odometer.html',
        controller: 'OdometerCtrl'
      }
    }
  })
});


// app2.js
angular.module('myproj.routes', [])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('tab.messages', {
    url: '/messages',
    views: {
      'tab-messages': {
        templateUrl: 'templates/tab-messages.html',
        controller: 'MessagesCtrl'
      }
    }
  });
});

// main-routes-end.js
angular.module('myproj.routes', [])

.config(function($urlRouterProvider) {
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/home');
});

I have included these files in my index.html in the following order:

<script src="js/routes.js"></script>
<script src="js/app1/routes.js"></script>
<script src="js/app2/routes.js"></script>
<script src="js/routes-end.js"></script>

When I have all the routes in the file js/routes.js, it works fine, but when I try to separate them, the screens do not appear, and, unfortunately, I do not get any errors in the console. I use a similar scheme for controllers, which works fine, but I have problems with routes. Any ideas?

Answer 1

main-routes.js , angular.module('myproj.routes', [])

*.route.js , main-routes.js. .

, myproj.routes , ( ), .

, , angular.module('myproj.routes'), states config.