My Ionic App runs smoothly in the browser when using ionic serve.
However, I encounter issues with routing when running the app in Ionic View (view.ionic.io) after uploading it with ionic upload. The index.html loads but nothing within
<div ui-view=""></div>The structure of my simple index.html is as follows:
<body ng-app="app">
my app!
<div ui-view=""></div>
</body>
In my app.js, I have defined routes using AngularUI Router like:
angular
.module("app", [
"ionic",
"ngCordova",
"ui.router"
])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("splash", {
url: "/splash",
templateUrl: "components/splash/splash.html",
controller: "SplashController"
}).state("login", {
url: "/login",
templateUrl: "components/login/login.html",
controller: "LoginController"
});
$urlRouterProvider.otherwise("/splash");
});
Additionally, I have a SplashController that initializes some variables and binds them to the view.
The content of my splash.html file is pretty straightforward:
<div class="padding">
<h4 class="title dark">splash.html</h4>
<h4 class="title dark">{{ vm.test }}</h4>
</div>
Although everything works fine in the browser, I encounter issues on devices with Ionic View app. Is this a problem with Ionic View or am I missing something? Has anyone else faced a similar situation?
A couple of other details worth mentioning:
- The JavaScript code is compiled from TypeScript.
- I tried using
instead of<ion-nav-view></ion-nav-view>ui.router, but the results were identical (works in the browser but not on the device). Personally, I prefer the standard ui-router over Ionic view animations.