Angular UI Router 单独的文件答案

【问题标题】：Angular UI Router separate filesAngular UI Router 单独的文件
【发布时间】：2015-12-08 17:49:54
【问题描述】：

我正在尝试将我的路线分成单独的文件，但在加载它时遇到问题，但没有收到任何错误信息。这是在使用 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 文件中拥有所有路由时，它可以正常工作，但是当我尝试将它们分开时，屏幕不会呈现，不幸的是我在控制台中没有收到任何错误。我正在为控制器使用类似的结构，效果很好，但我遇到了路由问题。有什么想法吗？

【问题讨论】：

标签： angularjs ionic-framework angular-ui-router

【解决方案1】：

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

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

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

确保您创建了一次模块，然后您应该使用angular.module('myproj.routes') 模块将states 附加到其config 块中。

【讨论】：