I tried to create 3-view app without using the Ionic menu component. So i modified my previous app with sidebar menu by this way:
app.js
.run(function($ionicPlatform, $rootScope) {
$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();
}
// PROXIMITY SENSOR
function onSuccess(state) {
console.log('Proximity state: ' + (state ? 'near' : 'far'));
};
if(navigator.proximity != null)
{
navigator.proximity.enableSensor();
setInterval(function(){
navigator.proximity.getProximityState(onSuccess);
}, 100);
}
// END PROXIMITY SENSOR
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('app.game', {
url: '/game',
templateUrl: 'templates/game.html',
controller: 'GameCtrl'
})
.state('app.about', {
url: '/about',
templateUrl: 'templates/about_app.html'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
From example above is app/home is default state but if i started app no content of template templates/home.html is displayed and controller seems to be not initialized and only content which is visible is text defined in index.html file..
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>
<script src="js/controllers/home.js"></script>
<script src="js/controllers/game.js"></script>
</head>
<body ng-app="starter">
<a href="#/app/game">TEST LINK</a>
</body>
</html>
Console output in Chrome gives me no error, but content of the template file and manually redirection to another URL is not working.
What i'm doing wrong please?
Many thanks for any advice.
PLUNKER: http://plnkr.co/edit/AP5GIs9JQZkkOBZ2ywbR?p=preview
Sorry if my previous answer wasn't clear.
The way i understand in ionic, view hierarchy root element is
<ion-nav-view></ion-nav-view>
either add it into body of index.html or create a route state with for url:'/' with inline template.
Solution is following:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('game', {
url: "/game",
templateUrl: "templates/game.html",
})
.state('home', {
url: "/home",
templateUrl: "templates/home.html",
controller: "HomeCtrl"
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});