<!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.13" data-semver="1.0.0-beta.13" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic@1.0.0-beta.13" data-semver="1.0.0-beta.13" src="http://code.ionicframework.com/1.0.0-beta.13/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>
</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.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"
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent' :{
templateUrl: "browse.html"
}
}
})
.state('app.form', {
url: "/form",
views: {
'menuContent' :{
templateUrl: "form.html",
controller: 'FormCtrl'
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent' :{
templateUrl: "playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: "/playlists/:playlistId",
views: {
'menuContent' :{
templateUrl: "playlist.html",
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/form');
});
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-item nav-clear menu-close href="#/app/form">
Form
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-view title="Playlist">
<ion-content class="has-header">
<h1>Playlist</h1>
</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 class="has-header">
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</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>
</ion-content>
</ion-view>
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope) {
})
.controller('PlaylistsCtrl', function($scope, MusicService) {
$scope.playlists = MusicService.genres();
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
})
.controller('FormCtrl', function($log, $scope, MusicService) {
// helper function(s)
var title = 'Form';
var toggleSelect = function() {
if ($scope.config.showSelect) {
$scope.config.showSelect = false;
$scope.config.title = title;
} else {
$scope.config.showSelect = true;
}
};
// scope init
$scope.config = {
title: title,
showSelect: false
};
$scope.user = {};
$scope.userForm = {};
// scope function(s)
$scope.selectMusicGenre = function() {
$scope.selectItems = MusicService.genres();
$scope.config.title = 'Favorite music genre';
$scope.config.desc = 'Choose';
toggleSelect();
};
$scope.chooseSelect = function(key) {
$scope.user.favoriteGenre = key;
toggleSelect();
};
$scope.toJSON = function(obj) {
return JSON.stringify(obj, null, 2);
};
$scope.toggleSelect = toggleSelect;
})
.factory('MusicService', function($log){
var genres = {
regga: { title: 'Reggae' },
chill: { title: 'Chill' },
dubstep: { title: 'Dubstep' },
indie: { title: 'Indie' },
rap: { title: 'Rap' },
cowbell: { title: 'Cowbell' }
};
var factory = {
genres: function() {
var result = [];
Object.getOwnPropertyNames(genres).sort().map(function(key) {
var obj = factory.genre(key);
obj.id = key;
result.push(obj);
});
return result;
},
genre: function(key) {
return genres[key];
}
};
return factory;
})
.filter('resolveMusicGenreTile', function(MusicService) {
return function(key) {
if (key === undefined) {
return 'Choose'; // or just null
} else {
return MusicService.genre(key).title;
}
};
})
;
<ion-view title="{{ config.title }}">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"
ng-hide="config.showSelect"></button>
<button class="button-clear button back-button"
ng-click="toggleSelect()"
ng-show="config.showSelect"> <i class="icon ion-chevron-left"></i> </button>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<div class="item item-divider" ng-show="config.showSelect">
{{ config.desc }}
</div>
<form name="userForm"
ng-hide="config.showSelect"
novalidate>
<label class="item item-input item-stacked-label">
<span class="input-label">Name</span>
<input type="text" name="name"
ng-model="user.name"
placeholder="Your name ?" required>
</label>
<ion-item class="item item-icon-right" ng-click="selectMusicGenre()">
Favorite music genre
<span class="item-note">
{{ user.favoriteGenre | resolveMusicGenreTile }}
</span>
<input type="hidden" name="favoriteGenre"
ng-model="user.favoriteGenre" required>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<button class="button button-block button-positive"
ng-disabled="userForm.$invalid">
OK
</button>
</form>
<ion-item ng-repeat="item in selectItems"
class="item item-icon-right"
ng-show="config.showSelect"
ng-click="chooseSelect(item.id)">
{{ item.title }}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
<div class="list card" ng-hide="showSelect">
<div class="item">
User model: <pre> {{ user | json }}</pre>
Form model: <pre ng-bind="toJSON(userForm)"></pre>
</div>
</div>
</ion-content>
</ion-view>