I am just getting started with Ionic framework to build an Android app. I was able to run the starter projects but I can't get my code to work.
I am trying to take the user to a login page when the app starts. Here's the code -
index.html
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
app.js
// Generated by CoffeeScript 1.9.0
(function() {
angular.module('starter', ['ionic', 'starter.controllers']).run(function($ionicPlatform) {
return $ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
return StatusBar.styleDefault();
}
});
}).config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('candidate.login', {
url: '/candidate_login',
views: {
'candidate-login': {
templateUrl: 'templates/candidate_login.html',
controller: 'CandidateLoginController'
}
}
});
return $urlRouterProvider.otherwise('/candidate_login');
});
}).call(this);
templates/candidate_login.html
<ion-view view-title="Candidate Sign Up">
<ion-content>
Hi This is Me
</ion-content>
</ion-view>
js/controllers.js
// Generated by CoffeeScript 1.9.0
(function() {
angular.module('starter.controllers', []).controller('CandidateLoginController', function(scope) {});
}).call(this);
When I visit localhost:8100 (ionic serve) I am taken to localhost:8100/#/candidate_login and I just see the header bar without the title or the text Hi This is Me.
Can someone please point to me what I am missing here and how to fix this?