Skip to content

Instantly share code, notes, and snippets.

@zeuxisoo

zeuxisoo/app.js

Created April 26, 2015 04:07
Show Gist options
  • Save zeuxisoo/1df59c69a958a5fc51be to your computer and use it in GitHub Desktop.
Save zeuxisoo/1df59c69a958a5fc51be to your computer and use it in GitHub Desktop.
Download ZIP
A simple ionic sign in test app
Raw
app.js
;(function() {
angular.module('zzzApp', ['ionic']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/signin',
templateUrl: 'template/signin.html',
controller: SignInController
})
.state('home', {
url: '/home',
templateUrl: 'template/home.html',
controller: HomeController
});
$urlRouterProvider.otherwise('/signin');
});
var SignInController = window.SignInController = ['$scope', '$state', '$http', function($scope, $state, $http) {
console.log('SignInController loaded');
$scope.signIn = function() {
console.log('-> Clicked sign in button');
$state.go('home');
$http.post("http://localhost:8000/api/auth/login", {
username: 'test',
password: 'testtest'
}).success(function(data, status, headers, config) {
console.log('-> OK', data);
}).error(function(data, status, headers, config) {
console.log('-> Error', data);
});
};
}];
var HmeController = window.HomeController = ['$scope', function($scope) {
console.log('HmeController loaded');
}];
})();
Raw
home.html
<ion-view view-title="Home" hide-back-button="true">
<ion-content>
<ul class="list">
<div class="item item-divider">
Program
</div>
<a class="item" href="#">Perl</a>
<a class="item" href="#">Python</a>
<a class="item" href="#">PHP</a>
</ul>
<ul class="list">
<div class="item item-divider">
OS
</div>
<a class="item" href="#">Linux</a>
<a class="item" href="#">Mac</a>
<a class="item" href="#">Windows</a>
</ul>
</ion-content>
</ion-view>
Raw
index.html
<!DOCTYPE html>
<html ng-app="zzzApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>zzzApp</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
Raw
signin.html
<ion-view view-title="Sign In">
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username">
</label>
<label class="item item-input">
<input type="text" placeholder="Password">
</label>
</div>
<div class="padding">
<button class="button button-block button-balanced" ng-click="signIn()">
Sign-In
</button>
</div>
</ion-content>
</ion-view>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment