Can someone please tell me why my views aren't showing? Here's the relevant code
index.html
<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/custom.js"></script>
<ion-pane>
<ion-header-bar class="bar-stable">
Ionic Blank Starter
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('home', {
url: '/homePage',
views: {
'homePageContent': {
templateUrl: 'homePage.html',
controller: 'homeCtrl'
}
}
});
$stateProvider.state('editExpense', {
url: '/editExpense',
views: {
'editExpenseContent': {
templateUrl: 'editExpense.html',
controller: 'editExpenseCtrl'
}
}
});
$urlRouterProvider.otherwise('/homePage');
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
homePage.html
<div id="currentMonthExpenses">
Current Month Expenses
<table>
<tr>
<th>Date</td>
<th>Detail</td>
<th>Amount</td>
</tr>
<tr ng-repeat="item in list" >
<td>{{item.date}}</td>
<td>{{item.detail}}</td>
<td>{{item.amount}}</td>
<td><a class="noUnderline" href="#/editExpense/{{$index}}/{{item.date}}/{{item.detail}}/{{item.amount}}"><button>Edit</button></a></td>
<td><button ng-click="deleteExpense($index)">Delete</button></td>
</tr>
</table>
editExpense.html
Edit expense
expenseID = {{expenseID}}
expenseDate = {{expenseDate}}
expenseDetail = {{expenseDetail}}
expenseAmount = {{expenseAmount}}
<p>
<label for="expenseDate">Enter New Date</label>
<input type="date" name="expenseDate" ng-model="editExpense.expenseDate" ng-init="editExpense.expenseDate=expenseDate" ng-min="minDate" ng-max="maxDate" required>
</p>
<span class="red" ng-show="editExpenseForm.expenseDate.$error.required">A date is required</span>
<span class="red" ng-show="editExpenseForm.expenseDate.$error.min">You can't enter a date later than a year ago</span>
<span class="red" ng-show="editExpenseForm.expenseDate.$error.max">You can't enter a date more than a year ahead</span>
<p>
<label for="expenseDetail">Enter expense detail</label>
<input type="text" name="expenseDetail" ng-init="editExpense.expenseDetail=expenseDetail" ng-model="editExpense.expenseDetail" required>
</p>
<span class="red" ng-show="editExpenseForm.expenseDetail.$error.required">Field cannot be blank</span>
<p>
<label for="expenseAmount">Enter expense amount</label>
<input type="number" step="any" name="expenseAmount" ng-model="editExpense.expenseAmount" ng-init="editExpense.expenseAmount=expenseAmount" ng-pattern="/^\d+(\.\d{1,2})?$/" ng-maxlength="8" required>
</p>
<span class="red" ng-show="editExpenseForm.expenseAmount.$error.maxlength">A maximum of 8 digits are allowed</span>
<span class="red" ng-show="editExpenseForm.expenseAmount.$error.required">Please enter an amount</span>
<span class="red" ng-show="editExpenseForm.expenseAmount.$dirty && editExpenseForm.expenseAmount.$error.pattern || editExpenseForm.expenseAmount.$error.number || editExpenseForm.expenseAmount.$invlaid">Please enter a valid amount</span>
<p>
<button ng-disabled="editExpenseForm.$invalid" ng-click="updateExpense(editExpense)">Update expense</button>
<a href="#/homePage"><button>(Cancel) Back to homePage.html</button></a>
</p>