Skip to content

Instantly share code, notes, and snippets.

@biapar

biapar/Login-and-Sidemenu-with-IONIC-Framework.markdown

Forked from anonymous/Login-and-Sidemenu-with-IONIC-Framework.markdown
Created May 10, 2014 12:44
Show Gist options
  • Save biapar/719e7b6241e178ce3918 to your computer and use it in GitHub Desktop.
Save biapar/719e7b6241e178ce3918 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Sign-in, Then Tabs Example</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="http://code.ionicframework.com/1.0.0-beta.4/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.4/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="login.html" type="text/ng-template">
<ion-view title="Sign-In">
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
</div>
<div class="padding">
<button nav-clear class="button button-block button-positive" ng-click="LogIn(user)">
Sign-In
</button>
</div>
</ion-content>
</ion-view>
</script>
<script id="forgot-password.html" type="text/ng-template">
<ion-view title="Forgot Password">
<ion-content padding="true">
<p>
Yeah this is just a demo showing how views can be shown without tabs, then you can navigate
to views within tabs. Additionally, only one set of tabs needs to be written for all of the different views that should go inside the tabs. (Compared to written the same tab links in the footer of every view that's in a tab.)
</p>
<p>
There's no username/password, just click
the Sign-In button back a the sign-in view.
</p>
<p>
Return to <a href="#/sign-in">Sign-In</a>.
</p>
</ion-content>
</ion-view>
</script>
<script id="menu.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
<ion-item nav-clear menu-close href="#/app/login">
Login
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="playlists.html" type="text/ng-template">
<ion-view title="Playlists">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="browse.html" type="text/ng-template">
<ion-view title="About">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
script.js
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu.html",
controller: 'AppCtrl'
})
.state('app.splash', {
url: '/',
templateUrl: 'splash.html',
controller: 'SplashController'
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "search.html"
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent' :{
templateUrl: "browse.html"
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent' :{
templateUrl: "playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: "/playlists/:playlistId",
views: {
'menuContent' :{
templateUrl: "playlist.html",
controller: 'PlaylistCtrl'
}
}
})
.state('app.login-into-menucontent', {
url: "/login-into-menucontent",
views: {
'menuContent' :{
templateUrl: "login.html",
controller: 'LoginCtrl'
}
}
})
.state('login', {
url: "/login",
templateUrl: "login.html",
controller: 'LoginCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
})
.controller('AppCtrl', function($scope) {
})
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
})
.controller('SplashController', function($scope, $stateParams) {
})
.controller('LoginCtrl', function($scope, $state) {
$scope.LogIn = function(user) {
$state.go('app.playlists');
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment