我正在尝试将我的路由分成单独的文件,但是在加载它时遇到问题,但没有得到任何错误信息.这是在使用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',$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文件中有所有路由时,它工作正常,但是当我尝试将它们分开时,屏幕不会渲染,不幸的是我在控制台中没有出现任何错误.我正在使用类似的控制器结构,工作正常,但我遇到路线问题.有任何想法吗？
解决方法
你的main-routes.js应该只有像angular.module这样的模块定义(‘myproj.routes’,[])
在其他* .route.js中,你应该使用main-routes.js创建的模块.无需再次创建新模块.再次.
基本上你的问题是,你再次重新初始化你的myproj.routes模块&再次刷新了注册到它的旧组件(这里是它的状态).
确保创建模块一次&然后你应该使用angular.module(‘myproj.routes’)模块将状态附加到其配置块.
