angularjs – Angular UI路由器单独的文件

我的项目被拆分为单独的应用程序

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

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

这是我的路线JS路线文件.

// 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',$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',$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');
});

我按以下顺序将这些文件包含在index.html中：

<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>

当我在js / routes.js文件中有所有路由时,它工作正常,但是当我尝试将它们分开时,屏幕不会渲染,不幸的是我在控制台中没有出现任何错误.我正在使用类似的控制器结构,工作正常,但我遇到路线问题.有任何想法吗？