Hello I'm trying to implement a listview application for mobile devices via cordova angularjs and ionic framework.
The application should show a clickable list view for example for cars. If the user clicks one of the items of the list, a details view with details of the specific car should be opened.
My index.html looks like this:
<!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">
<!-- 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="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Order spare parts:</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a href="#detailsView:1">
<div class="item item-button-right">
Audi A4
</div>
</a>
<a href="#detailsView:2">
<div class="item item-button-right">
BMW 320
</div>
</a>
<a href="#detailsView:3">
<div class="item item-button-right">
Mercedes CLA
</div>
</a>
</div>
</ion-content>
</ion-pane>
</body>
</html>
My app.js:
var app = angular.module('starter', ['ionic']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
In the detailsview it should show up a checkboxlist similar to this:
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Wheels
</li>
</ul>
The data is for example given in json format:
var cars = [
{"id":"1", "name":"Audi", "spareParts":[{"id":"1", "name": "wheel"}, {"id":"2", "name": "Steuergerät"}]},
...
];
My problem is that some page navigation things that are working on the browser simulation are not working in my iOS simulator. I tried the recommend way with <script id="detailsView.html" type="text/ng-template"> tags and routing configurations in the controller but couldn't get it to work on the iOS simulator.
I tried a lot of codepen examples to bring the routing to work but it always fails hard. For example the codepen: http://codepen.io/mhartington/pen/CAxFG only shows my a white screen on my browser simulation and iOS simulator. I copied the code one on one but it seems that I am doing something wrong. The only code that I could bring to work in the iOS simulator is the index.html above.
So how to do this the right way if the app should be a native application build with ionic in the end?
you are missing the ui-router code here.
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.html"
})
.state('details', {
url: "/details/:id",
templateUrl: "details.html",
controller :function($stateParams, $scope) {
$scope.params = $stateParams;
}
});
$urlRouterProvider.otherwise("/home");
})
A complete sample is posted here