app.js

angular.module('suapraia', ['ionic', 'ngCordova', 'suapraia.controllers', 'suapraia.beaches'])

.run(function($ionicPlatform) {
	$ionicPlatform.ready(function() {
		if (window.cordova && window.cordova.plugins.Keyboard) {
			cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
			cordova.plugins.Keyboard.disableScroll(true);

		}
		if (window.StatusBar) {
			StatusBar.styleDefault();
		}
	});
})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

	$ionicConfigProvider.backButton.text('Voltar').previousTitleText(false);
	$ionicConfigProvider.navBar.alignTitle('center');

	$stateProvider
	.state('app', {
		url: '/app',
		abstract: true,
		templateUrl: 'templates/menu.html',
		controller: 'AppCtrl'
	})

	.state('app.home', {
		url: '/home',
		views: {
			'menuContent': {
				templateUrl: 'templates/home.html'
			}
		}
	})

	.state('app.trends', {
		url: '/trends',
		views: {
			'menuContent': {
				templateUrl: 'templates/trends.html'
			}
		}
	})

	.state('app.activities', {
		url: '/activities',
		views: {
			'menuContent': {
				templateUrl: 'templates/activities.html'
			}
		}
	})

	.state('app.beaches', {
		url: '/beaches',
		views: {
			'menuContent': {
				templateUrl: 'templates/beaches/menu.html'
			}
		}
	})

	.state('app.beaches.list', {
		url: '/list',
		views: {
			'listView': {
				templateUrl: 'templates/beaches/list.html'
			}
		}
	})

	.state('app.beaches.map', {
		url: '/map',
		views: {
			'mapView': {
				templateUrl: 'templates/beaches/map.html'
			}
		}
	});

	$urlRouterProvider.otherwise('/app/home');
});

templates.beaches.list.html

<ion-view view-title="<img src='img/logo.png'>">
	<ion-content has-bouncing="false" class="has-tabs beaches-list">
		<div class="search-box list list-inset">
			<label class="item item-input">
				<i class="icon ion-search placeholder-icon"></i>
				<input type="text" placeholder="Busque por Praia">
			</label>
		</div>
		<ion-slide-box class="slide-beaches" >
			<ion-slide class="slide-beach" ng-repeat="beach in vm.beaches">
				<div class="card card-green">
					<div class="card-picture">
						<img src="" style="background-color: grey;">
						<div class="smile"></div>
					</div>
					<h2>{{beach.name}}</h2>
					<ul class="activities activities-preview">
						<li class="activity activity-sup" ng-repeat="activity in beach.activities" ng-class="'activity-' + activity">
						</li>
					</ul>
				</div>
			</ion-slide>
		</ion-slide-box>
	</ion-content>
</ion-view>

templates.beaches.map.html

<ion-view>
	<ion-content class="has-tabs">
		<map></map>
	</ion-content>
</ion-view>

templates.beaches.menu.html

<ion-tabs tabs-type="tabs-icon-only" class="tabs-orange">
	<ion-tab title="Mapa" icon-on="ion-location" icon-off="ion-location" ui-sref="app.beaches.map({ beachFilter: vm.activity })">
		<ion-nav-view name="mapView"></ion-nav-view>
	</ion-tab>
	<ion-tab title="Lista" icon-on="ion-navicon-round" icon-off="ion-navicon-round" ui-sref="app.beaches.list({ beachFilter: vm.activity })">
		<ion-nav-view name="listView"></ion-nav-view>
	</ion-tab>
</ion-tabs>