<!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 data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="https://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="https://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
/* Styles go here */
// Ionic Starter App, v0.9.20
// 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 <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.services', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "search.html",
controller: 'PlaylistsCtrl',
resolve: {
playlists: function(PlaylistsService) {
return PlaylistsService.getPlaylists()
}
}
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent' :{
templateUrl: "browse.html"
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent': {
templateUrl: "playlists.html",
controller: 'PlaylistsCtrl',
resolve: {
playlists: function(PlaylistsService) {
return PlaylistsService.getPlaylists()
}
}
}
}
})
.state('app.playlist', {
url: "/playlists/:playlistId",
views: {
'menuContent': {
templateUrl: "playlists.playlist.html",
controller: 'PlaylistCtrl',
resolve: {
playlist: function($stateParams, PlaylistsService) {
return PlaylistsService.getPlaylist($stateParams.playlistId)
}
}
}
}
})
.state('app.single', {
url: "/playlists/:playlistId/:singleId",
views: {
'menuContent': {
templateUrl: "playlists.playlist.single.html",
controller: 'SingleCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/search');
});
This is a side menu ionic framework starter template.
https://github.com/driftyco/ionic-starter-sidemenu
<ion-view title="Browse">
<ion-nav-buttons side="left">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<h1>Browse</h1>
</ion-content>
</ion-view>
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-view view-title="{{playlist.title}}">
<ion-content>
<ion-list>
<ion-item ng-repeat="single in playlist.singleCategory" ui-sref="app.single({playlistId: playlist.id, singleId: single.id})">
<span ng-bind="single.title"></span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
<ion-view title="Playlists">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists" ui-sref="app.playlist({playlistId: playlist.id})">
<span ng-bind="playlist.title"></span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
<ion-view title="Search">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<h1>Search</h1>
<label>Search: <input ng-model="searchText"></label>
<ion-list>
<div ng-repeat="playlist in playlists">
<ion-item ng-repeat="single in playlist.singleCategory | filter:searchText | orderBy:'-title'" ui-sref="app.single({playlistId: playlist.id, singleId: single.id})">
<span ng-bind="single.title"></span>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope) {
})
.controller('PlaylistsCtrl', function($scope, playlists) {
$scope.playlists = playlists
})
.controller('PlaylistCtrl', function($scope, playlist, $rootScope) {
$scope.playlist = playlist;
$rootScope.playlist = playlist;
})
.controller('SingleCtrl', function($scope, $stateParams, PlaylistsService) {
PlaylistsService.getSingle($stateParams.playlistId, $stateParams.singleId).then(function(data){
$scope.single = data;
})
});
angular.module('starter.services', [])
.service('PlaylistsService', function($q) {
return {
playlists: [
{ id: '1', title: 'Playlist1',
singleCategory: [
{ id: '1', title: 'Playlist1.singleCategory1' },
{ id: '2', title: 'Playlist1.singleCategory2' },
{ id: '3', title: 'Playlist1.singleCategory3' }
]
},
{ id: '2', title: 'Playlist2',
singleCategory: [
{ id: '1', title: 'Playlist2.singleCategory1' },
{ id: '2', title: 'Playlist2.singleCategory2' },
{ id: '3', title: 'Playlist2.singleCategory3' }
]
},
{ id: '3', title: 'Playlist3',
singleCategory: [
{ id: '1', title: 'Playlist3.singleCategory1' },
{ id: '2', title: 'Playlist3.singleCategory2' },
{ id: '3', title: 'Playlist3.singleCategory3' }
]
}
],
getPlaylists: function () {
return this.playlists
},
getPlaylist: function(playlistId) {
var dfd = $q.defer()
this.playlists.forEach(function(playlist) {
if (playlist.id === playlistId) dfd.resolve(playlist)
})
return dfd.promise
},
getSingle: function(playlistId, singleId) {
var dfd = $q.defer();
this.getPlaylist(playlistId).then(function(playlist) {
playlist.singleCategory.forEach(function(single) {
if(single.id==singleId) {
dfd.resolve(single);
}
});
});
return dfd.promise
}
}
})
<ion-view title="{{single.title}}">
<ion-content class="has-header">
<h1>{{single.title}}</h1>
<p>asdf</p>
</ion-content>
</ion-view>