我遇到了一个问题，我想要在ionic中迁移一个angular应用程序。我在angular中使用了ui-router，这是我的app.js文件（来自这里：https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend/blob/master/src/app/app.js）。对于我的项目，我没有修改过此文件。现在我想要重复使用这个文件，所以我用ionic提供的app.js替换了它，并添加了一些内容。
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}});
在app.run内部
这是我的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="frontend">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
我只是用frontend替换了ng-app的名称，结果ionic主题无法正常加载。
我不知道问题是来自ui-retour依赖还是其他什么原因？我觉得我漏掉了某些东西。
注意：我知道我将不得不更改项目中的html和css文件，但对于index.html，我只有ionic提供的内容，并且我没有带有'ionic blank starter'的ionic选项卡，就像我开始一个空白的ionic项目一样。
这是我的路由器改变：
enter code here
(function() {
'use strict';
angular.module('frontend', [
'ionic',
'frontend-templates',
'frontend.core',
'frontend.myportfolio',
'frontend.mysocial',
'frontend.myleads',
'frontend.admin'
]);
angular.module('frontend')
.config([
'$stateProvider', '$locationProvider', '$urlRouterProvider', '$httpProvider', '$sailsSocketProvider',
'$tooltipProvider', 'cfpLoadingBarProvider',
'toastrConfig',
'AccessLevels',
function config(
$stateProvider, $locationProvider, $urlRouterProvider, $httpProvider, $sailsSocketProvider,
$tooltipProvider, cfpLoadingBarProvider,
toastrConfig,
AccessLevels
) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
// Add interceptors for $httpProvider and $sailsSocketProvider
$httpProvider.interceptors.push('AuthInterceptor');
$httpProvider.interceptors.push('ErrorInterceptor');
// Iterate $httpProvider interceptors and add those to $sailsSocketProvider
angular.forEach($httpProvider.interceptors, function iterator(interceptor) {
$sailsSocketProvider.interceptors.push(interceptor);
});
// Set tooltip options
$tooltipProvider.options({
appendToBody: true
});
// Disable spinner from cfpLoadingBar
cfpLoadingBarProvider.includeSpinner = false;
cfpLoadingBarProvider.latencyThreshold = 200;
// Extend default toastr configuration with application specified configuration
angular.extend(
toastrConfig,
{
allowHtml: true,
closeButton: true,
extendedTimeOut: 3000
}
);
// Yeah we wanna to use HTML5 urls!
$locationProvider
.html5Mode({
enabled: true,
requireBase: false
})
.hashPrefix('!')
;
// Routes that needs authenticated user
$stateProvider
.state('profile', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.user
}
})
$urlRouterProvider.otherwise('/myportfolio/mydatabase');
}
])
;
angular.module('frontend')
.run([
'$rootScope', '$state', '$injector','$ionicPlatform',
'editableOptions',
'AuthService',
function run(
$rootScope, $state, $injector,$ionicPlatform,
editableOptions,
AuthService
) {
$rootScope.$on('$stateChangeStart', function stateChangeStart(event, toState) {
if (toState.url=='/login' || toState.url=='/register' ) {
$rootScope.myStyle = {'background-color':'#333'}
$rootScope.headerIsloaded = false;
$rootScope.sidebarIsloaded = false;
}else{
$rootScope.myStyle = {};
$rootScope.headerIsloaded = true;
$rootScope.sidebarIsloaded = true
};
if (!AuthService.authorize(toState.data.access)) {
event.preventDefault();
console.log(toState.data.access)
$state.go('auth.login');
}
});
// Check for state change errors.
$rootScope.$on('$stateChangeError', function stateChangeError(event, toState, toParams, fromState, fromParams, error) {
event.preventDefault();
$injector.get('MessageService')
.error('Error loading the page');
$state.get('error').error = {
event: event,
toState: toState,
toParams: toParams,
fromState: fromState,
fromParams: fromParams,
error: error
};
return $state.go('error');
});
//bout de code ionic
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
}
])
;
}());