I encounter a problem with an angular app that I want to migrate in ionic
I used ui-router for angular and here is my app.js(taken here : https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend/blob/master/src/app/app.js ). I haven't made any changes on this file for my project
Now I want to reuse this file for my project so I replace app.js given by ionic by this one and added
$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();
}});
inside app.run
here's my 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>
I just replace the name of ng-app by frontend and ionic theme isn't charged properly.
I don't know if the problem comes from ui-retour dependencies or something else? I think I'm missing something
Note: I know that I will have to change my html and css files for the project , but for index.html I just have what is provided by ionic and I don't have the ionic tab with 'ionic blank starter' as if I begin a blank ionic project
here's my router changed :
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();
}
});
}
])
;
}());
