Repository: driftyco/ionic-starter-tabs
Branch: master
Commit: 49e7cc7de515
Files: 13
Total size: 9.3 KB
Directory structure:
gitextract_h1t6bon_/
├── README.md
├── css/
│ └── style.css
├── index.html
├── js/
│ ├── app.js
│ ├── controllers.js
│ └── services.js
├── manifest.json
├── service-worker.js
└── templates/
├── chat-detail.html
├── tab-account.html
├── tab-chats.html
├── tab-dash.html
└── tabs.html
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
### :point_right: This starter repo has moved to the [ionic-team/starters](https://github.com/ionic-team/starters/tree/master/ionic1/official/tabs) repo! :point_left:
================================================
FILE: css/style.css
================================================
/* Empty. Add your own CSS if you like */
================================================
FILE: index.html
================================================
<!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 rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/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="lib/ionic/js/ionic.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 ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<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>
================================================
FILE: js/app.js
================================================
// 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.styleDefault();
}
});
})
.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');
});
================================================
FILE: js/controllers.js
================================================
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
};
});
================================================
FILE: js/services.js
================================================
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: 'img/ben.png'
}, {
id: 1,
name: 'Max Lynx',
lastText: 'Hey, it\'s me',
face: 'img/max.png'
}, {
id: 2,
name: 'Adam Bradleyson',
lastText: 'I should buy a boat',
face: 'img/adam.jpg'
}, {
id: 3,
name: 'Perry Governor',
lastText: 'Look at my mukluks!',
face: 'img/perry.png'
}, {
id: 4,
name: 'Mike Harrington',
lastText: 'This is wicked good ice cream.',
face: 'img/mike.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;
}
};
});
================================================
FILE: manifest.json
================================================
{
"name": "My Ionic App",
"short_name": "My Ionic App",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "icon.png",
"sizes": "512x512",
"type": "image/png"
}]
}
================================================
FILE: service-worker.js
================================================
self.addEventListener('activate', function (event) {
});
self.addEventListener('fetch', function (event) {
});
self.addEventListener('push', function (event) {
});
================================================
FILE: templates/chat-detail.html
================================================
<!--
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">
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
<p>
{{chat.lastText}}
</p>
</ion-content>
</ion-view>
================================================
FILE: templates/tab-account.html
================================================
<ion-view view-title="Account">
<ion-content>
<ion-list>
<ion-toggle ng-model="settings.enableFriends">
Enable Friends
</ion-toggle>
</ion-list>
</ion-content>
</ion-view>
================================================
FILE: templates/tab-chats.html
================================================
<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>
================================================
FILE: templates/tab-dash.html
================================================
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h2>Welcome to Ionic</h2>
<p>
This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
</p>
<p>
To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
</p>
<p>
If you need help with your app, join the Ionic Community on the <a href="http://forum.ionicframework.com" target="_blank">Ionic Forum</a>. Make sure to <a href="http://twitter.com/ionicframework" target="_blank">follow us</a> on Twitter to get important updates and announcements for Ionic developers.
</p>
<p>
<b>Psst!</b> - Try <a href="http://view.ionic.io/">Ionic View</a> to easily share and test your app with clients and co-workers.
</p>
</ion-content>
</ion-view>
================================================
FILE: templates/tabs.html
================================================
<!--
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-active-positive">
<!-- 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>
gitextract_h1t6bon_/
├── README.md
├── css/
│ └── style.css
├── index.html
├── js/
│ ├── app.js
│ ├── controllers.js
│ └── services.js
├── manifest.json
├── service-worker.js
└── templates/
├── chat-detail.html
├── tab-account.html
├── tab-chats.html
├── tab-dash.html
└── tabs.html
Condensed preview — 13 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (11K chars).
[
{
"path": "README.md",
"chars": 167,
"preview": "### :point_right: This starter repo has moved to the [ionic-team/starters](https://github.com/ionic-team/starters/tree/m"
},
{
"path": "css/style.css",
"chars": 42,
"preview": "/* Empty. Add your own CSS if you like */\n"
},
{
"path": "index.html",
"chars": 1675,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"initial-scale=1, maximum-s"
},
{
"path": "js/app.js",
"chars": 2378,
"preview": "// Ionic Starter App\n\n// angular.module is a global place for creating, registering and retrieving Angular modules\n// 's"
},
{
"path": "js/controllers.js",
"chars": 789,
"preview": "angular.module('starter.controllers', [])\n\n.controller('DashCtrl', function($scope) {})\n\n.controller('ChatsCtrl', functi"
},
{
"path": "js/services.js",
"chars": 1050,
"preview": "angular.module('starter.services', [])\n\n.factory('Chats', function() {\n // Might use a resource here that returns a JSO"
},
{
"path": "manifest.json",
"chars": 207,
"preview": "{\n \"name\": \"My Ionic App\",\n \"short_name\": \"My Ionic App\",\n \"start_url\": \"index.html\",\n \"display\": \"standalone\",\n \"i"
},
{
"path": "service-worker.js",
"chars": 168,
"preview": "self.addEventListener('activate', function (event) {\n\n});\n\nself.addEventListener('fetch', function (event) {\n\n});\n\nself."
},
{
"path": "templates/chat-detail.html",
"chars": 489,
"preview": "<!--\n This template loads for the 'tab.friend-detail' state (app.js)\n 'friend' is a $scope variable created in the Fri"
},
{
"path": "templates/tab-account.html",
"chars": 201,
"preview": "<ion-view view-title=\"Account\">\n <ion-content>\n <ion-list>\n <ion-toggle ng-model=\"settings.enableFriends\">\n "
},
{
"path": "templates/tab-chats.html",
"chars": 563,
"preview": "<ion-view view-title=\"Chats\">\n <ion-content>\n <ion-list>\n <ion-item class=\"item-remove-animate item-avatar item"
},
{
"path": "templates/tab-dash.html",
"chars": 986,
"preview": "<ion-view view-title=\"Dashboard\">\n <ion-content class=\"padding\">\n <h2>Welcome to Ionic</h2>\n <p>\n This is the "
},
{
"path": "templates/tabs.html",
"chars": 853,
"preview": "<!--\nCreate tabs with an icon and label, using the tabs-positive style.\nEach tab's child <ion-nav-view> directive will h"
}
]
About this extraction
This page contains the full source code of the driftyco/ionic-starter-tabs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 13 files (9.3 KB), approximately 2.8k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.