Angular UI Router separate files

Question

I'm trying to separate my routes into separate files but having problems getting it to load, but not getting any error information. This is in an Ionic tabs application which uses Angular UI Router.

My project is split into separate apps

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 the 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've 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 js/routes.js file it works fine, but when I try to separate them out the screens don't render and unfortunately I don't get any errors in the console. I'm using a similar struture for controllers, which works fine, but I'm having problems with the routes. Any ideas?

Answer 1

Your main-routes.js should only have the module definition like angular.module('myproj.routes', [])

In other *.route.js you should js used the module create by the main-routes.js. No need to create a new module again & again.

Basically your problem is, you are reinitializing your myproj.routes module again & again which is flushing out old component(here its states) registered to it.

Make sure you create module once & Then you should use angular.module('myproj.routes') module to append the states to its config block.