angularjs - Angular UI Router 单独的文件

Question

我试图将我的路线分成单独的文件，但在加载它时遇到问题，但没有得到任何错误信息。这是在使用 Angular UI 路由器的 Ionic 选项卡应用程序中。

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

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', [])

.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');
});

我已按以下顺序将这些文件包含在我的 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 中的所有路线时文件它工作正常，但是当我尝试将它们分开时，屏幕不会呈现，不幸的是我在控制台中没有收到任何错误。我为 Controller 使用了类似的结构，效果很好，但是我遇到了路由问题。有任何想法吗？

Answer 1

您的 main-routes.js应该只有像 angular.module('myproj.routes', []) 这样的模块定义

在其他 *.route.js你应该 js 使用由 main-routes.js 创建的模块.无需一次又一次地创建新模块。

基本上你的问题是，你正在重新初始化你的 myproj.routes模块一次又一次地刷新注册到它的旧组件(这里是它的状态)。

确保你创建了一次模块然后你应该使用 angular.module('myproj.routes')附加 states 的模块到它的config堵塞。