Skip to content

Instantly share code, notes, and snippets.

@bp4151

bp4151/Ionic-Angular-Cordova-Seed.markdown

Created November 5, 2014 23:29
Show Gist options
  • Save bp4151/ca7a9c751383384841ec to your computer and use it in GitHub Desktop.
Save bp4151/ca7a9c751383384841ec to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Justin Noel.
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Seed App</title>
<!-- ionic/angularjs scripts -->
<link href="http://code.ionicframework.com/0.9.26/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.26/js/ionic.bundle.js"></script>
</head>
<!--
'starter' is the name of this angular module (js/app.js)
-->
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views
Additional attributes set its look, ion-nav-bar animation and icons
Icons provided by Ionicons: http://ionicons.com/
-->
<ion-nav-bar type="bar-positive"
animation="nav-title-slide-ios7"
back-button-type="button-icon button-clear"
back-button-icon="ion-ios7-arrow-back"></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>
<script id="tabs.html" type="text/ng-template">
<!--
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 tabs-style="tabs-icon-top" tabs-type="tabs-default">
<!-- Pets Tab -->
<ion-tab title="Pets" icon="icon ion-home" href="#/tab/pets">
<ion-nav-view name="pets-tab"></ion-nav-view>
</ion-tab>
<!-- Adopt Tab -->
<ion-tab title="Adopt" icon="icon ion-heart" href="#/tab/adopt">
<ion-nav-view name="adopt-tab"></ion-nav-view>
</ion-tab>
<!-- About Tab -->
<ion-tab title="About" icon="icon ion-search" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="pet-index.html" type="text/ng-template">
<ion-view title="'Pet Information'">
<ion-content has-header="true" has-tabs="true">
<ion-list>
<ion-item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
<h3>{{pet.title}}</h3>
<p>{{pet.description}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="pet-detail.html" type="text/ng-template">
<!--
This template loads for the 'tab.pet-detail' state (app.js)
'pet' is a $scope variable created in the PetCtrl controller (controllers.js)
The PetCtrl pulls data from the Pets service (service.js)
The Pets service returns an array of pet data
-->
<ion-view title="pet.title">
<ion-content has-header="true" padding="true">
<p>{{ pet.description }}</p>
<p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> All Pets</a></p>
</ion-content>
</ion-view>
</script>
<script id="adopt.html" type="text/ng-template">
<!--
This template loads for the 'tab.adopt' state (app.js)
-->
<ion-view title="'Adopt A Pet'">
<ion-content has-header="true" has-tabs="true">
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Your name</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Your email</span>
<input type="email">
</label>
<ion-toggle>Subscribe To Newsletter</ion-toggle>
<button class="button button-positive button-block">Adopt</button>
</div>
</ion-content>
</ion-view>
</script>
<script id="about.html" type="text/ng-template">
<!--
This template loads for the 'tab.about' state (app.js)
-->
<ion-view title="'About Ionic'">
<ion-content has-header="true" has-tabs="true" padding="true">
<img src="img/ionic.png" class="ionic-logo">
<p>
This is a sample seed project for the Ionic Framework. Please cut it up and make it your own.
Check out the <a href="http://ionicframework.com/docs/" target="_blank">docs</a>
for more info.
</p>
<p>
Questions? Hit up the
<a href="http://forum.ionicframework.com/" target="_blank">forum</a>.
</p>
<p>
Find a bug? Create an
<a href="https://github.com/driftyco/ionic/issues?state=open" target="_blank">issue</a>.
</p>
<p>
What to help improve Ionic?
<a href="http://ionicframework.com/contribute/" target="_blank">Contribute</a>.
</p>
<p>
Stay up-to-date with the Ionic
<a href="http://ionicframework.com/subscribe/" target="_blank">newsletter</a> and
<a href="https://twitter.com/Ionicframework" target="_blank">twitter</a> account.
</p>
<p>
MIT Licensed. Happy coding.
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
script.js
angular.module('starter.controllers', [])
// A simple controller that fetches a list of data from a service
.controller('PetIndexCtrl', function($scope, PetService) {
// "Pets" is a service returning mock data (services.js)
$scope.pets = PetService.all();
})
// A simple controller that shows a tapped item's data
.controller('PetDetailCtrl', function($scope, $stateParams, PetService) {
// "Pets" is a service returning mock data (services.js)
$scope.pet = PetService.get($stateParams.petId);
});
angular.module('starter.services', [])
/**
* A simple example service that returns some data.
*/
.factory('PetService', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var pets = [
{ id: 0, title: 'Cats', description: 'Furry little creatures. Obsessed with plotting assassination, but never following through on it.' },
{ id: 1, title: 'Dogs', description: 'Lovable. Loyal almost to a fault. Smarter than they let on.' },
{ id: 2, title: 'Turtles', description: 'Everyone likes turtles.' },
{ id: 3, title: 'Sharks', description: 'An advanced pet. Needs millions of gallons of salt water. Will happily eat you.' }
];
return {
all: function() {
return pets;
},
get: function(petId) {
// Simple index lookup
return pets[petId];
}
}
});
// 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.services', 'starter.controllers'])
.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: "tabs.html"
})
// the pet tab has its own child nav-view and history
.state('tab.pet-index', {
url: '/pets',
views: {
'pets-tab': {
templateUrl: 'pet-index.html',
controller: 'PetIndexCtrl'
}
}
})
.state('tab.pet-detail', {
url: '/pet/:petId',
views: {
'pets-tab': {
templateUrl: 'pet-detail.html',
controller: 'PetDetailCtrl'
}
}
})
.state('tab.adopt', {
url: '/adopt',
views: {
'adopt-tab': {
templateUrl: 'adopt.html'
}
}
})
.state('tab.about', {
url: '/about',
views: {
'about-tab': {
templateUrl: 'about.html'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/pets');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment