Master detail with sidemenu ionic - angularjs

Question

I'm trying to understand the master detail (MD) pattern in ionic with a sidemenu. The example code has 'Playlists' as master, and 'Playlist' as detail.
The states looks like this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/playlists');
});
But first off all, I don't understand why the Playlist state is called 'app.single'. I don't see the word 'single' anywhere else in the code. What if I would want to have a master detail pattern on page 1, and another different master detail pattern on page 2 (selected through the menu)? How would I call the detail state there?
And then my other question is related, I can't seem to get my own MD pattern to work. These are the codes that matter:
app.js:
.state('app.master', {
url: '/master',
templateUrl: 'templates/master.html',
controller: 'MasterCtrl'
})
.state('app.detail', {
url: '/master/:id',
templateUrl: 'templates/detail.html',
controller: 'DetailCtrl'
})
master.html:
<ion-view title="Master">
<ion-content>
<ion-list>
<ion-item class="item" ng-repeat="person in people">
{{person.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
menu.html:
....
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
<ion-item menu-close href="#/app/master">
Master
</ion-item>
....
The Playlists MD works all the way, but my own MD doesn't. I do get the Master list with items (controller and services work fine), but when I click an item in the list, nothing happens. Then when I swipe back (this should open the sidemenu), the detail page 'sort of' shows up without css or data. So somewhere there's a glitch. I just don't seem to understand the whole state/url thing, while I read enough documentation..

Answer 1

I guess, you are new to Ionic without any knowledge of AngularJS and Angular UI Router.
First, the dot-notation in state is to mark some children which will inherit from one specified parent view. As you read in the www/js/app.js, you will see a state .state('app'), and this is the parent view, menu.html, and the children views will be replaced in this tag, or so called Angular directive,
<ion-nav-view name="menuContent"></ion-nav-view>
The children or detail views needs to specify two things,
first, parent name, the word before the dot, as in example of sidemenu, app.[child_name]
second, the child view should specify which part of parent view to be fit in, through the views property, as in example above,
you see this menuContent,
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
Let's talk about Master-Detail Pattern, it is just a concept of how to display a list of items and the ability to access a single item from the list.
The sidemenu is an a complicated example for beginner.
The simple example is to have only two pages with no tie of anything (no sidemenu, no tabs...).
.state('cats', {
url: '/cats',
templateUrl: 'templates/catlist.html',
controller: 'CatListCtrl'
})
.state('cat', {
url: '/cats/:catId',
templateUrl: 'templates/catsingle.html',
controller: 'CatSingleCtrl'
})
About templates/catlist.html
<ion-view view-title="Cat Collection">
<ion-content>
<ion-list>
<ion-item ng-repeat="cat in cats" href="#/cats/{{cat.id}}">
{{cat.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
and templates/catsingle.html
<ion-view view-title="Cat">
<ion-content>
<h1>{{cat.name}}</h1>
<p>{{cat.description}}</p>
</ion-content>
</ion-view>
The point of accessing a single item from a list, is to specify the direction to the resource, in this case, the direction is via URL, #/cats/{{cat.id}}. So if the cat has id = 5 then the URL will be #/cats/5; ok cool, let's access the single page that displays information of the cat with ID is 5. That's how you interpret it in reality.
My suggestion for learning Ionic,
First, get to know basic AngularJS, https://angularjs.org/
Second, get in touch with Angular UI Router navigation system, http://angular-ui.github.io/ui-router/
Third, practice to create with very very small Ionic apps, make a complicated Hello Ionic.
Guess that my answer is what you're looking for.
The Playlists MD works all the way, but my own MD doesn't. I do get
the Master list with items (controller and services work fine), but
when I click an item in the list, nothing happens. Then when I swipe
back (this should open the sidemenu), the detail page 'sort of' shows
up without css or data. So somewhere there's a glitch. I just don't
seem to understand the whole state/url thing, while I read enough
documentation..
I can see that you read, but do you ask yourself if you know the stuff required for it?
On front page of Ionic framework, I can see AngularJS, I can see ngCordova, I also see SASS (which in case, you will ask the same questions as how your custom CSS won't work and reload)...Ooops, lots of pieces to know before getting your hand in Ionic, I guess.
One thing worth to point out that if you're not coming from Angular background, you might not know about the navigation system in Ionic since the Ionic docs don't tell developers about Angular UI Router, you only get to know about it from the Ionic Learn page, which looks more advanced for beginners.
I know, it is hard; I was in your situation before, I felt the same way.
Anyway, have fun learning Ionic :)

Answer 2

#ekussberg:
My final setup included:
.state('app.playlists', {
url: '/playlists',
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
})
.state('app.playlist', {
url: '/playlists/:playlistId',
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
});
Notice how the playlist state is called and the url differs from yours.

Answer 3

#Cake:
i have already tried like this and it works, but the transition on iOS and Web are not same smooth master-detaul as in the default way. I think it depends on the "views" element of the routing.
This code for example works, but transition not:
.state('app.todo', {
url: '/todo',
views: {
'menuContent': {
templateUrl: 'templates/todo-list.html',
controller: 'TodoListCtrl'
}
}
})
.state('app.todo.single', {
url: '/:todoId',
views: {
'menuContent#app': {
templateUrl: 'templates/todo-single.html',
controller: 'TodoSingleCtrl'
}
}
})