Skip to content

Instantly share code, notes, and snippets.

@Ugarz

Ugarz/WIP-App-with-PhoneGap-+-Angular.markdown

Created June 5, 2014 08:38
Show Gist options
  • Save Ugarz/57fcbee3700016d14b18 to your computer and use it in GitHub Desktop.
Save Ugarz/57fcbee3700016d14b18 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Ugo.
Raw
index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
</head>
<body ng-app="sotlse" animation="slide-left-right-ios7">
<!-- My ion-header -->
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">beuleu !</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<!-- Place to content calling home and other pages -->
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
<!-- My Home Page called in the index in ion-nav-view-->
<script id="home.html" type="text/ng-template">
<ion-view title="Home" class="home_pane">
<ion-content ng-controller="HomeViewCtrl" scroll="false">
<!-- Spacer to pull down the index buttons on index -->
<div class="spacer_home"></div>
<div class="row row-center">
<div class="col col-center">
<a class="connexion_btn button-block" href="#/connexion">Se connecter</a>
</div>
</div>
<div class="row row-center">
<div class="col col-center">
<a class="inscription_btn button-block" href="#/inscription">Créer un compte</a>
</div>
</div>
</ion-content>
</ion-view>
</script>
<!-- My Connexion Page called in the index in ion-nav-view-->
<script id="connexion.html" type="text/ng-template">
<ion-view title="Connexion">
<ion-content scroll="false" padding="true" ng-controller="ConnexionViewCtrl" animation="slide-left-right" class="connexion_pane">
<h1>Se connecter</h1>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Email">
</label>
<label class="item item-input">
<input type="password" placeholder="Mot de passe">
</label>
</div>
<p>
<a href="#" target="_blank">Mot de passe oublié ?</a>
</p>
<a class="button button-block button-stable" href="#/listview">Entrer</a>
<a class="button button-block button-stable" href="#/home">Retour</a>
</ion-content>
</ion-view>
</script>
<!-- My Inscription Page called in the index in ion-nav-view-->
<script id="inscription.html" type="text/ng-template">
<ion-view>
<ion-content scroll="false" ng-controller="InscriptionViewCtrl" padding="true" class="inscription_pane" animation="slide-left-right">
<h1>Créer un compte</h1>
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Prénom">
</label>
<label class="item item-input">
<input type="text" placeholder="Nom">
</label>
<label class="item item-input">
<input type="email" placeholder="Email">
</label>
<label class="item item-input">
<input type="password" placeholder="Mot de passe">
</label>
<label class="item item-input">
<input type="text" placeholder="Identifiant">
</label>
<label class="item item-input">
<input type="password" placeholder="Confirmation du mot de passe">
</label>
</div>
<p>
J'accepte les
<a href="#" target="_blank">conditions d'utilisation</a></label>
<input type="checkbox" name="" id="" />
</p>
<a class="button button-block button-stable" href="#/home">Retour</a>
</ion-content>
</ion-view>
</script>
</body>
Raw
script.js
angular.module('sotlse', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// Home Ctrl
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeViewCtrl'
})
// Connexion Ctrl
.state('connexion', {
url: '/connexion',
templateUrl: 'templates/connexion.html',
controller: 'ConnexionViewCtrl'
})
// Inscription Ctrl
.state('inscription', {
url: '/inscription',
templateUrl: 'templates/inscription.html',
controller: 'InscriptionViewCtrl'
})
// ListView Ctrl
.state('listview', {
url: '/listview',
templateUrl: 'templates/listview.html',
controller: 'ListviewViewCtrl'
})
// Manifs Ctrl
.state('manifs', {
url: '/manifs',
templateUrl: 'templates/manifs.html',
controller: 'ManifsViewCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
function BackBtn($scope, $ionicNavBarDelegate) {
$scope.getPreviousTitle = function() {
return $ionicNavBarDelegate.getPreviousTitle();
};
}
})
/* Controllers */
angular.module('sotlse.controllers', [])
// Home Conrtoller
.controller('HomeViewCtrl', function($scope) {
})
// Connexion Controller
.controller('ConnexionViewCtrl', function($scope) {
})
// Inscription Controller
.controller('InscriptionViewCtrl', function($scope) {
})
// ListView Controller
.controller('ListviewViewCtrl', function($scope) {
})
// Manifs Controller
.controller('ManifsViewCtrl', function($scope) {
});
//Ng-repeat Listview
app.controller('repeatCtrl', ['$scope', function($scope){
//Creating Angular Project Title
$scope.title = "Blob";
//Initilal JSON Object
$scope.items= [
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 1', date:25, description:'Lorem ipsum dolor sit amet, consectetur.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 2', date:25, description:'Lorem ipsum dolor sit amet.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 3', date:25, description:'Lorem ipsum dolor sit amet.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 4', date:25, description:'Lorem ipsum dolor sit amet.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 5', date:25, description:'Lorem ipsum dolor sit amet.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 6', date:25, description:'Lorem ipsum dolor sit amet, consectetur.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 7', date:25, description:'Lorem ipsum dolor sit amet, consectetur.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 8', date:25, description:'Lorem ipsum dolor sit amet.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 9', date:25, description:'Lorem ipsum dolor sit amet, consectetur.'},
{logo:'../img/logo.png', lien:'href="#/manifs"' , name:' Titre de la manifestation 10', date:25, description:'Lorem ipsum dolor sit amet.'}
];
}]);
Raw
style.css
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
* {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
/*=======================
CUSTOM
* =====================*/
body {
/*cursor: url('http://ionicframework.com/img/finger.png'), auto;*/
}
/* GENERAL */
a{
color:#DD006B;
text-decoration:none;
}
.home_pane{
background: url('../img/splashcreenETbackground.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbarapp{
background-color: rgb(230,0,126);
background-color: #dd006b;
}
.connexion_pane,
.inscription_pane,
.listview_pane,
.program_pane,
.listview_pane{
background-color:#f1f1f1;
}
div.spacer_home{
height: 400px;
}
a.connexion_btn,
a.inscription_btn{
padding: 15px;
line-height:normal;
font-size: 25px;
font-family: Helvetica, sans-serif;
font-weight: 100;
text-align: center;
color: white;
text-decoration: none;
}
a.connexion_btn{
background-color:#DD006B;
color
}
a.inscription_btn{
background-color:#d46f2c;
}
h1{
color:#DD006B;
font-family: Helvetica, sans-serif;
font-weight: 100;
}
.entete_manif{
background-color: #DD006B;
}
.h1_manif{
color: white;
}
/*=======================
CUSTOM
* =====================*/
/* Portrait layout (default) */
.app {
background:url(../img/[email protected]) no-repeat center top; /* 170px x 200px */
position:absolute; /* position in the center of the screen */
left:50%;
top:50%;
height:50px; /* text area height */
width:225px; /* text area width */
text-align:center;
padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
/* offset horizontal: half of text area width */
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
background-position:left center;
padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
/* offset horizontal: half of image width and text area width */
}
}
h1 {
font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
padding:0px;
text-align:center;
}
.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}
.event.listening {
background-color:#333333;
display:block;
}
.event.received {
background-color:#4B946A;
display:none;
}
@keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
.blink {
animation:fade 2000ms infinite;
-webkit-animation:fade 2000ms infinite;
}
Raw
WIP-App-with-PhoneGap-+-Angular.markdown

WIP App with PhoneGap + Angular

Application PhoneGap + Angularjs. WIP and debug.

A Pen by Ugo on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment