// Ionic Starter App
// 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', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
<!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 href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css" rel="stylesheet">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://rawgit.com/delta98/ionic-material-design-lite/master/dist/css/ionic.material-design-lite.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/delta98/ionic-material-design-lite/master/dist/js/ionic.material-design-lite.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body use-material-icons ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
/* Put your css in here */
.platform-android .has-header.has-tabs-top, .platform-android .has-tabs-top.has-header {
top: 127px;
}
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatsCtrl', function($scope, Chats) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//
//$scope.$on('$ionicView.enter', function(e) {
//});
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
};
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
angular.module('starter.services', [])
.factory('Chats', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var chats = [{
id: 0,
name: 'Ben Sparrow',
lastText: 'You on your way?',
face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
}, {
id: 1,
name: 'Max Lynx',
lastText: 'Hey, it\'s me',
face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
}, {
id: 2,
name: 'Adam Bradleyson',
lastText: 'I should buy a boat',
face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
}, {
id: 3,
name: 'Perry Governor',
lastText: 'Look at my mukluks!',
face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
}, {
id: 4,
name: 'Mike Harrington',
lastText: 'This is wicked good ice cream.',
face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
}];
return {
all: function() {
return chats;
},
remove: function(chat) {
chats.splice(chats.indexOf(chat), 1);
},
get: function(chatId) {
for (var i = 0; i < chats.length; i++) {
if (chats[i].id === parseInt(chatId)) {
return chats[i];
}
}
return null;
}
};
});
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-assertive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Health</div>
<div class="item item-body">
<div>
You ate an apple today!
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Upcoming</div>
<div class="item item-body">
<div>
You have <b>29</b> meetings on your calendar tomorrow.
</div>
</div>
</div>
</ion-content>
</ion-view>
<ion-view view-title="Account">
<ion-content padding="true">
<ion-list>
<ion-toggle ng-model="settings.enableFriends">
Enable Friends
</ion-toggle>
</ion-list>
<br>
<p>
<button class="button">Default</button>
<button class="button" disabled>Default</button>
</p>
<p>
<button class="button icon ion-heart button-icon"></button>
</p>
<p>
<button class="button button-light">button-light</button>
<button class="button button-light" disabled>button-light</button>
</p>
<p>
<button class="button button-stable">button-stable</button>
<button class="button button-stable" disabled>button-stable</button>
</p>
<p>
<button class="button button-positive">button-positive</button>
<button class="button button-positive" disabled>button-positive</button>
</p>
<p>
<button class="button button-calm">button-calm</button>
<button class="button button-calm" disabled>button-calm</button>
</p>
<p>
<button class="button button-balanced">button-balanced</button>
<button class="button button-balanced" disabled>button-balanced</button>
</p>
<p>
<button class="button button-energized">button-energized</button>
<button class="button button-energized" disabled>button-energized</button>
</p>
<p>
<button class="button button-assertive">button-assertive</button>
<button class="button button-assertive" disabled>button-assertive</button>
</p>
<p>
<button class="button button-royal">button-royal</button>
<button class="button button-royal" disabled>button-royal</button>
</p>
<p>
<button class="button button-dark">button-dark</button>
<button class="button button-dark" disabled>button-dark</button>
</p>
<p>
<button class="button button-block">Default</button>
</p>
<p>
<button class="button button-block button-light">button-light</button>
</p>
<p>
<button class="button button-block button-stable">button-stable</button>
</p>
<p>
<button class="button button-block button-positive">button-positive</button>
</p>
<p>
<button class="button button-block button-calm">button-calm</button>
</p>
<p>
<button class="button button-block button-balanced">button-balanced</button>
</p>
<p>
<button class="button button-block button-energized">button-energized</button>
</p>
<p>
<button class="button button-block button-assertive">button-assertive</button>
</p>
<p>
<button class="button button-block button-royal">button-royal</button>
</p>
<p>
<button class="button button-block button-dark">button-dark</button>
</p>
<p>
<button class="button button-outline">Default</button>
</p>
<p>
<button class="button button-outline button-light">button-light</button>
</p>
<p>
<button class="button button-outline button-stable">button-stable</button>
</p>
<p>
<button class="button button-outline button-positive">button-positive</button>
</p>
<p>
<button class="button button-outline button-calm">button-calm</button>
</p>
<p>
<button class="button button-outline button-balanced">button-balanced</button>
</p>
<p>
<button class="button button-outline button-energized">button-energized</button>
</p>
<p>
<button class="button button-outline button-assertive">button-assertive</button>
</p>
<p>
<button class="button button-outline button-royal">button-royal</button>
</p>
<p>
<button class="button button-outline button-dark">button-dark</button>
</p>
<p>
<button class="button icon-left ion-home button-royal">home</button>
</p>
<p>
<button class="button icon-right ion-chevron-right button-positive">learn more</button>
</p>
</ion-content>
</ion-view>
<ion-view view-title="Chats">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
<!--
This template loads for the 'tab.friend-detail' state (app.js)
'friend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
The FriendsCtrl pulls data from the Friends service (service.js)
The Friends service returns an array of friend data
-->
<ion-view view-title="{{chat.name}}">
<ion-content class="padding">
<br>
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
<p>
{{chat.lastText}}
</p>
</ion-content>
</ion-view>