Ionic state not work - angularjs

Question

I have problem with state (I don't understand how it works).
Ok my app.js code view this:
....
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
// $ionicConfigProvider.views.transition('none');
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'tpl/home.html',
controller: 'AppController',
abstract: true
})
.state('app.aquarium', {
url: '/aquarium/index',
views: {
'menuContent': {
templateUrl: 'tpl/aquarium/index.html',
controller: 'AquariumIndexCtrl',
}
}
})
....
$urlRouterProvider.otherwise('/app/aquarium/index');
....
app.controller('AppController', function($scope) {
console.log("App");
});
app.controller('AquariumIndexCtrl', function($scope) {
console.log("Akwaria");
});
....
and in index.html I have href to this states:
<a class="item item-icon-left" href="#/app/aquarium/index">
<i class="icon"><img src="img/aquarium.png" /></i>
Aq
</a>
But All the time I see the file from state "app" (tpl/home.html).
Why my link dont works and Why still load file tpl/home.html when on start app I use "redirect" to
$urlRouterProvider.otherwise('/app/aquarium/index');
? Thanks :)

Answer 1

First of all I suggest you to pass the dependencies as an array of strings when you inyect them. If not, by the time you uglify to production you will have problems with them.
app.config([
$stateProvider,
$urlRouterProvider,
$ionicConfigProvider,
function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
}])
Around the state problem:
The state depends directly to the ui-views you have stablished before, in this case i think you want to set them in your index.
Think about the ui-views as boxes you will fill with html calling them from the states or url depending you structure your app by states or urls.
Using states:
Assuming your index.html, you need to create the ui-views to fill with the html from the states.
<div ui-view="menuContent">
</div>
I don't know if you are declaring the ui-view, i suppose yes.
In the abstract state you should call as well to the ui-view using views and filling it with content that won't needed to be called again later, if not at least declare it empty.
app.config([
$stateProvider,
$urlRouterProvider,
$ionicConfigProvider,
function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
// $ionicConfigProvider.views.transition('none');
$stateProvider
.state('app', {
url: '/app',
views: {
'menuContent': {}
},
abstract: true
})
.state('app.aquarium', {
url: '/aquarium/index',
views: {
'menuContent': {
templateUrl: 'tpl/aquarium/index.html',
controller: 'AquariumIndexCtrl',
}
}
})
....
$urlRouterProvider.otherwise('/app/aquarium/index');
}])
Think about ui-view menuContent as a box that will be filled dinamically depending of the state you call, you can have as many ui-views as you want and load them one by one only if you set them in the views: {} state.
finally you should be using ui-sref instead of href to call the diferent states:
<a class="item item-icon-left" ui-sref="app.aquarium">
<i class="icon"><img src="img/aquarium.png" /></i>
</a>