<!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.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/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>
<script src="services.js"></script>
<script src="pistservices.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class='bar-dark'></ion-nav-bar>
<!--
<ion-header-bar align-title="center" class="bar-dark">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title"><img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" /></h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-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>
http://market.uzmankirala.com/aysegulyalcinw/profil/detay/
icon="fa fa-home"
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
var foo = {
"results": [{
"id": 1,
"name": "Test"
}, {
"id": 2,
"name": "Beispiel"
}, {
"id": 3,
"name": "Sample"
}]
};
var result = $filter('filter')(foo.results, {name:'Sample'})[0];
$scope.name = result.id;
});
</html>
/* Styles go here */
.list a {
border-bottom: 2px #ff8f1d solid !important;
}
// 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', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
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: "tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'tab-account.html',
controller: 'AccountCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/friends');
});
This is a blank ionic framework starter template.
https://github.com/driftyco/ionic-starter-tabs
angular.module('starter.controllers', [])
.controller('MainCtrl', function($scope, $http) {
$http.get('https://cors-test.appspot.com/test').then(function(resp) {
console.log('Success', resp);
// For JSON responses, resp.data contains the result
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
})
.controller('DashCtrl', function($scope) {
})
.controller('FriendsCtrl', function($scope, PistServis, $http) {
$http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/2013/drivers/vettel/results.json?callback=JSON_CALLBACK'
})
.then(function(response) {
console.log('Success', response);
// For JSON responses, resp.data contains the result
//alert(response.MRData.CircuitTable.Circuits[0].circuitId);
$scope.races = response.data.MRData.RaceTable.Races;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
})
.controller('FriendDetailCtrl', function($scope, $stateParams, PistServis, $http) {
$http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/2013/15/results.json?callback=JSON_CALLBACK'
})
.then(function(response) {
console.log('Success', response);
// For JSON responses, resp.data contains the result
debugger;
$scope.results = response.data.MRData.RaceTable.Races[0].Results;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
})
.controller('AccountCtrl', function($scope, $http, PistServis) {
$scope.circuitList = [];
$http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/2014/circuits.json?callback=JSON_CALLBACK'
})
.then(function(response) {
console.log('Success', response);
// For JSON responses, resp.data contains the result
//alert(response.MRData.CircuitTable.Circuits[0].circuitId);
$scope.circuitList = response.data.MRData.CircuitTable.Circuits;
}, function(err) {
console.error('ERR', err);
// err.status will contain the status code
})
})
;
angular.module('starter.services', [])
/**
* A simple example service that returns some data.
*/
.factory('Friends', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var friends = [
{ id: 0, name: 'Scruff McGruff' },
{ id: 1, name: 'G.I. Joe' },
{ id: 2, name: 'Miss Frizzle' },
{ id: 3, name: 'Ash Ketchum' }
];
return {
all: function() {
return friends;
},
get: function(friendId) {
// Simple index lookup
return friends[friendId];
}
}
});
<!--
This template loads for the 'tab.friend-detail' state (app.js)
'firend' 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 title="{{friend.name}}">
<ion-content has-header="true" padding="true">
<div class="list">
<span class="item item-avatar" href="#" ng-repeat="r in results">
<img src="venkman.jpg">
<p>{{r.Constructor.name}}</p>
{{r.Driver.familyName}}
<span class="badge badge-assertive">{{r.position}}</span>
</span>
</div>
</ion-content>
</ion-view>
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Pistler</h1>
<div class="row responsive-sm">
<div class="col">Tur</div>
<div class="col">Grand Prix</div>
<div class="col">Takim</div>
<div class="col">Pozisyon</div>
<div class="col">Sonuc</div>
</div>
<div class="row responsive-sm">
<div class="col">1</div>
<div class="col">Brazil Grand Prix</div>
<div class="col">Redbull</div>
<div class="col">2</div>
<div class="col">1</div>
</div>
<div class="list">
<a ng-repeat="item in circuitList"
href="#/tab/friend/{{item.circuitId}}"
class="item item-avatar">
<img ng-src="{{ item.image }}">
<h2>{{ item.circuitName }}</h2>
<h4>{{ item.Location.country }}</h4>
</a>
</div>
</ion-content>
</ion-view>
<ion-view title="Dashboard">
<ion-content class="has-header padding">
<h1>Dash</h1>
http://wegraphics.net/downloads/avenir-a-free-coming-soon-html-template/
google map http://codepen.io/ionic/pen/uzngt
http://ergast.com/api/f1/2013/results/1/qualifying.json?callback=myParser
https://dribbble.com/shots/1104725-HTC-One-and-Galaxy-S4-PSD
http://www.google.com/trends/hottrends/visualize?nrow=4&ncol=5&pn=p24 app
http://www.google.com/trends/hottrends
</ion-content>
</ion-view>
<ion-view title="Friends">
<ion-content class="has-header">
<div class="list">
<a class="item item-avatar" href="#/tab/friend/{{r.round}}" ng-repeat="r in races">
<img src="venkman.jpg">
<h2>{{r.raceName}}</h2>
<p>{{r.round}}.</p>
<span class="badge badge-assertive">{{r.Results[0].position}}</span>
</a>
</div>
</ion-content>
</ion-view>
<!--
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-striped has-tabs-top tabs-top tabs-background-dark tabs-color-energized">
<!-- Pets Tab -->
<ion-tab title="Dashboard" icon="icon ion-map" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Adopt Tab -->
<ion-tab title="Friends" icon="icon ion-ios-people" href="#/tab/friends">
<ion-nav-view name="tab-friends"></ion-nav-view>
</ion-tab>
<!-- About Tab -->
<ion-tab title="Account" icon="icon ion-earth" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
angular.module('starter.services', [])
/**
* A simple example service that returns some data.
*/
.factory('PistServis', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var Circuits = [
{
"circuitId": "albert_park",
"url": "http://en.wikipedia.org/wiki/Melbourne_Grand_Prix_Circuit",
"circuitName": "Albert Park Grand Prix Circuit",
"Location": {
"lat": "-37.8497",
"long": "144.968",
"locality": "Melbourne",
"country": "Australia"
}
},
{
"circuitId": "americas",
"url": "http://en.wikipedia.org/wiki/Circuit_of_the_Americas",
"circuitName": "Circuit of the Americas",
"Location": {
"lat": "30.1328",
"long": "-97.6411",
"locality": "Austin",
"country": "USA"
}
},
{
"circuitId": "bahrain",
"url": "http://en.wikipedia.org/wiki/Bahrain_International_Circuit",
"circuitName": "Bahrain International Circuit",
"Location": {
"lat": "26.0325",
"long": "50.5106",
"locality": "Sakhir",
"country": "Bahrain"
}
},
{
"circuitId": "catalunya",
"url": "http://en.wikipedia.org/wiki/Circuit_de_Catalunya",
"circuitName": "Circuit de Catalunya",
"Location": {
"lat": "41.57",
"long": "2.26111",
"locality": "Montmeló",
"country": "Spain"
}
},
{
"circuitId": "hockenheimring",
"url": "http://en.wikipedia.org/wiki/Hockenheimring",
"circuitName": "Hockenheimring",
"Location": {
"lat": "49.3278",
"long": "8.56583",
"locality": "Hockenheim",
"country": "Germany"
}
},
{
"circuitId": "hungaroring",
"url": "http://en.wikipedia.org/wiki/Hungaroring",
"circuitName": "Hungaroring",
"Location": {
"lat": "47.5789",
"long": "19.2486",
"locality": "Budapest",
"country": "Hungary"
}
},
{
"circuitId": "interlagos",
"url": "http://en.wikipedia.org/wiki/Aut%C3%B3dromo_Jos%C3%A9_Carlos_Pace",
"circuitName": "Autódromo José Carlos Pace",
"Location": {
"lat": "-23.7036",
"long": "-46.6997",
"locality": "São Paulo",
"country": "Brazil"
}
},
{
"circuitId": "marina_bay",
"url": "http://en.wikipedia.org/wiki/Marina_Bay_Street_Circuit",
"circuitName": "Marina Bay Street Circuit",
"Location": {
"lat": "1.2914",
"long": "103.864",
"locality": "Marina Bay",
"country": "Singapore"
}
},
{
"circuitId": "monaco",
"url": "http://en.wikipedia.org/wiki/Circuit_de_Monaco",
"circuitName": "Circuit de Monaco",
"Location": {
"lat": "43.7347",
"long": "7.42056",
"locality": "Monte-Carlo",
"country": "Monaco"
}
},
{
"circuitId": "monza",
"url": "http://en.wikipedia.org/wiki/Autodromo_Nazionale_Monza",
"circuitName": "Autodromo Nazionale di Monza",
"Location": {
"lat": "45.6156",
"long": "9.28111",
"locality": "Monza",
"country": "Italy"
}
},
{
"circuitId": "red_bull_ring",
"url": "http://en.wikipedia.org/wiki/Red_Bull_Ring",
"circuitName": "Red Bull Ring",
"Location": {
"lat": "47.2197",
"long": "14.7647",
"locality": "Spielburg",
"country": "Austria"
}
},
{
"circuitId": "sepang",
"url": "http://en.wikipedia.org/wiki/Sepang_International_Circuit",
"circuitName": "Sepang International Circuit",
"Location": {
"lat": "2.76083",
"long": "101.738",
"locality": "Kuala Lumpur",
"country": "Malaysia"
}
},
{
"circuitId": "shanghai",
"url": "http://en.wikipedia.org/wiki/Shanghai_International_Circuit",
"circuitName": "Shanghai International Circuit",
"Location": {
"lat": "31.3389",
"long": "121.22",
"locality": "Shanghai",
"country": "China"
}
},
{
"circuitId": "silverstone",
"url": "http://en.wikipedia.org/wiki/Silverstone_Circuit",
"circuitName": "Silverstone Circuit",
"Location": {
"lat": "52.0786",
"long": "-1.01694",
"locality": "Silverstone",
"country": "UK"
}
},
{
"circuitId": "sochi",
"url": "http://en.wikipedia.org/wiki/Sochi_International_Street_Circuit",
"circuitName": "Sochi International Street Circuit",
"Location": {
"lat": "43.4057",
"long": "39.9578",
"locality": "Sochi",
"country": "Russia"
}
},
{
"circuitId": "spa",
"url": "http://en.wikipedia.org/wiki/Circuit_de_Spa-Francorchamps",
"circuitName": "Circuit de Spa-Francorchamps",
"Location": {
"lat": "50.4372",
"long": "5.97139",
"locality": "Spa",
"country": "Belgium"
}
},
{
"circuitId": "suzuka",
"url": "http://en.wikipedia.org/wiki/Suzuka_Circuit",
"circuitName": "Suzuka Circuit",
"Location": {
"lat": "34.8431",
"long": "136.541",
"locality": "Suzuka",
"country": "Japan"
}
},
{
"circuitId": "villeneuve",
"url": "http://en.wikipedia.org/wiki/Circuit_Gilles_Villeneuve",
"circuitName": "Circuit Gilles Villeneuve",
"Location": {
"lat": "45.5",
"long": "-73.5228",
"locality": "Montreal",
"country": "Canada"
}
},
{
"circuitId": "yas_marina",
"url": "http://en.wikipedia.org/wiki/Yas_Marina_Circuit",
"circuitName": "Yas Marina Circuit",
"Location": {
"lat": "24.4672",
"long": "54.6031",
"locality": "Abu Dhabi",
"country": "United Arab Emirates"
}
}
]
;
return {
all: function() {
return Circuits;
},
get: function(friendId) {
// Simple index lookup
var result = Circuits[1];
// var result = $filter('filter')(Circuits, {circuitId:friendId })[0];
return result;
}
}
}
);