Recently I followed an instruction about navigation use in ionic, however I test it but no use, and I really can't find where I went wrong. Bellow is source file, just two, one is index.html, one is app.js. content of index.js:
<!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">
<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-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script type="text/ng-template" id="todos.html">
<ion-view title="Todos">
<ion-content>
<ion-list>
<ion-item ng-repeat="todo in todos" class="item item-icon-right" ui-sref="app.todos.detail({todo: $index})">
<span ng-class="{done: todo.done}">{{todo.title}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="todo.html">
<ion-content>
<div class="item">
<p>{{todo.title}}</p>
</div>
<div class="item item-checkbox">
<div>
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
</label>
Done
</div>
</div>
</ion-content>
</script>
</body>
</html>
content of 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();
}
});
})
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.todos', {
abstract: true,
url: '/todos',
template: '<ion-nav-view></ion-nav-view>'
})
$stateProvider.state('app.todos.index', {
url: '',
templateUrl: 'todos.html',
controller: 'TodosCtrl'
})
$stateProvider.state('app.todos.detail', {
url: '/:todo',
templateUrl: 'todo.html',
controller: 'TodoCtrl'
})
})
app.factory('TodosService', function() {
var todos = [{
title: "Take out the trash",
done: true
}, {
title: "Do laundry",
done: false
}, {
title: "Start cooking dinner",
done: false
}]
return {
todos: todos,
getTodo: function(index) {
return todos[index]
}
}
})
app.controller('TodosCtrl', function($scope, TodosService) {
$scope.todos = TodosService.todos
});
app.controller('TodoCtrl', function($scope, todo) {
$scope.todo = todo
})
When I type the ionic serve command in commandline, and I type the url 'http://xxxx/todos', I see nothing, but it should be supposed to see todos.html, so why this could happen?
