I can't navigate to it another template
its shows me error above
and i also tried ui-sref to go signup templete
Here My Starter app Structure--
I have templates of
Login.html
Signup.html
dash.html
Here my index page
<body ng-app="starter">
<ion-tab title="Home" >
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-tab>
<ion-nav-bar >
<ion-nav-back-button class="button-icon ion-ios7-arrow-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view > </ion-nav-view> -->
<ion-header-bar class="bar-stable">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
and my app.js is
.state('login', {
url: '/',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('Fourm' ,{
url : '/SignUp',
templateUrl: 'templates/SignUp.html',
controller :'SignCtrl'
})
$urlRouterProvider.otherwise('/');
and my Controller.js
.controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state) {
$scope.data = {};
$scope.Login = (function() {
LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
//var Popup = $ionicPopup.alert({title : 'Login success'})
alert("Welcome User")
$state.go('tab');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
});
})
)
.controller('SignCtrl' , function($scope, $ionicPopup, $state) {
console.log("in cotrl")
$scope.SignUp = (function()
{
alert("user")
$state.go('Fourm');
});
})
and my LoginTemplate
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset" >
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="Login()">Login</button>
<<button class="button button-block button-assertive" ng-click="SignUp()" >SignUp</button>
</ion-content>
</ion-view>
1) Not a good way to put ion-tab in index.html unless you want tab in all page in your app.
2) ion-tab define single tab which should be in ion-tabs container.
3) In angular ui router for tab container we have to define route with abstarct true.
For mor information you can see here
I had created simple codepen. Which will help you.
So in templates/index.html
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
templates/login.html
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset" >
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="Login()">Login</button>
</ion-content>
</ion-view>
templates/tabs.html
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Login" icon="ion-home" ui-sref="tabs.login">
<ion-nav-view name="login-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Signup" icon="ion-ios-information" ui-sref="tabs.signup">
<ion-nav-view name="signup-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
//instead of ui-sref we can use ng-click => $state.go('tabs.signup')
too.
and in app.js
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.login', {
url: "/login",
views: {
'login-tab': {
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
}
}
})
.state('tabs.signup', {
url: "/signup",
views: {
'signup-tab': {
templateUrl: "templates/signup.html"
}
}
})
$urlRouterProvider.otherwise("/tab/login");
Related
I have an ionic app with side-menu. My requirement is to have a Login Page before side-menu page.
By clicking on login button first time application gets reload, on clicking second time navigates to the side Menu page.
Here is my code
app.ts
config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
cache: true,
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: "homeController"
}
}
})
<ion-view>
<ion-content>
<div class="login-main-heading">
<h3 class="all-elements-center login-heading">Welcome</h3>
<div class="form-elements responsive-sm">
<h5 class="all-elements-center login-heading">Login</h5>
<form action="">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-person placeholder-icon"></i>
<input type="text" placeholder="User Name">
</label>
<label class="item item-input">
<i class="icon ion-lock-combination placeholder-icon"></i>
<input type="password" placeholder="Password">
</label>
<div class="responsive-sm">
<button class="button button-large button-assertive button-login">
Login
</button>
<button class="button button-large button-assertive button-signup">
Sign Up
</button>
</div>
<div>
<button class="button button-block button-positive button-facebook- login" ng-click="login()">
Login
</button>
</div>
</div>
</form>
</div>
</ion-content>
</ion-view>
login-controller.js
angular.module('starter')
.controller('loginCtrl', function ($scope, $state,$ionicSideMenuDelegate) {
$scope.login = function () {
$state.go('app.home');
}
});
app-controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function ($scope, $state) {
});
Hi Developing an Mobile app using Ionic Framework.
I know its very basic question but i m new to this.
In the Index.html is having two buttons 1 is for Login and other for SignUp
index.html
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/routes.js"></script>
</head>
<body ng-app="starter" ng-controller="MainCtrl">
<ion-pane>
<div class="bar bar-header bar-calm">
<h1 class="title">Heading</h1>
</div>
<ion-content paging="true" class="has-header" >
<div>
<img src="img/Logo.jpg" width="100%" height="auto" style="display:block;margin-left:auto;margin-right:auto;" />
<img src="img/Team.jpg" width="70%" height="auto" style="display:block;margin-left:auto;margin-right:auto;" />
</div>
<div ng-cntroller="loginCtrl">
<button id="btnLogin" class="icon icon-right ion-log-in left button button-positive button-block " style="border-radius:15px 15px 15px 15px;" ng-click="login()">Login</button>
</div>
<div ng-cntroller="signupCtrl">
<button id="btnSignUp" class="button button-positive button-block icon icon-right ion-person left" style="border-radius:15px 15px 15px 15px;">SignUp</button>
</div>
<div class="bar bar-footer bar-calm">
<div class="title">Copyright <strong>#</strong></label>
</div>
</ion-content>
</ion-pane>
On login click it open the Login.html page similar way click on sign up it open Signup.html
app.js
angular.module('starter', ['ionic','starter.controllers','starter.routes','starter.services','starter.directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
routes.js
var app = angular.module('starter', [])
app.config(function($stateProvider,$urlRouteProvider){
$stateProvider
.state('text', {
url: '/page1',
templateUrl: 'templates/text.html',
controller: 'textCtrl'
});
.state('login', {
url: '/page2',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
});
.state('signUp', {
url: '/page3',
templateUrl: 'templates/signup.html',
controller: 'signupCtrl'
});
.state('chats', {
url: '/page4',
templateUrl: 'templates/chats.html',
controller: 'chatsCtrl'
});
$urlRouteProvider.otherwise('/page1')
});
controllers.js
var app = angular.module('starter')
app.controller('textCtrl',function($scope){
});
app.controller('loginCtrl', function ($scope) {
$scope.login = function(){
alert("Hi")};
});
app.controller('signUpCtrl', function ($scope) {
});
app.controller('chatsCtrl', function ($scope) {
});
login.html
<ion-view title="Login" id="page2" class=" ">
<ion-content padding="true" class="has-header">
<form id="login-form1" class="list ">
<ion-list id="login-list1" class=" ">
<label class="item item-input " id="login-input1">
<span class="input-label">Username</span>
<input type="text" placeholder="">
</label>
<label class="item item-input " id="login-input2">
<span class="input-label">Password</span>
<input type="password" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a ui-sref="chats" id="login-button3" style="border-radius:15px 15px 15px 15px;" class=" button button-calm button-block ">Log in</a>
<a ui-sref="signup" id="login-button4" class=" button button-positive button-block button-clear ">Or create an account</a>
</form>
</ion-content>
</ion-view>
You need to define what the login button should do. Two ways to go
Either do
<button id="btnLogin" ui-sref="login">Login</button>
or do this on ng-click of the button like
$scope.login = function(){
$state.go('login');
};
Make sure $state is injected into your controller.
using this link will help to solve my issue
http://www.joshmorony.com/user-authentication-with-ionic-and-parse-part-1-email-login/
I have a footer bar I want to add to most of my templates, so I added it in the index.html file.
<ion-nav-view ></ion-nav-view>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
The problem is that in some templates I want to hide this footer, so I tried inside the template to put an empty <ion-footer-bar></ion-footer-bar> after ion-content, but still the footer is showing.
How can I hide it or override it in my template ?
Thanks
Here below is an example in which the second view (tab) has no ion-footer-bar.
I've used $stateChangeStart event to change the property $scope.showFooter to which is bound the visibility of footer (via ng-if).
The state change handler is in a 'mainCtrl' (and also showFooter property) which works as parent controller of all other "view" controllers.
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
}
}
})
.state('tabs.map', {
url: "/map",
views: {
'map-tab': {
templateUrl: "templates/map.html",
controller: 'MapCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('mainCtrl', function($scope, $state, $rootScope) {
console.log('mainCtrl');
$scope.showFooter = true;
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
console.log('>'+toState.name);
if (toState.name=="tabs.home") $scope.showFooter = false;
else $scope.showFooter = true;
});
})
.controller('HomeCtrl', function($scope, $state, $ionicPopover) {
console.log('HomeCtrl');
})
.controller('MapCtrl', function($scope, $state, $ionicPopover) {
console.log('MapCtrl');
});
<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>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="mainCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<ion-footer-bar align-title="left" class="bar-assertive" ng-if="showFooter">
<div class="buttons">
<button class="button">AAA</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
</ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-top tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Map" icon="ion-ios-world" ui-sref="tabs.map">
<ion-nav-view name="map-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home" cache-view="false" >
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<ion-content class="padding" ng-class="{'has-footer': showFooter}">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/map">Go to Map</a>
</p>
<pre>showFooter = {{showFooter}}</pre>
</ion-content>
</ion-view>
</script>
<script id="templates/map.html" type="text/ng-template">
<ion-view title="" cache-view="false" >
<ion-nav-buttons side="left">
<input id="places" class="controls" type="text" autocomplete placeholder="Enter a location" />
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<ion-content ng-class="{'has-footer': showFooter}">
<div id="map" data-tap-disabled="true" style="width: 500px;height: 500px"></div>
<pre>showFooter = {{showFooter}}</pre>
</ion-content>
</ion-view>
</script>
</body>
</html>
I want to use a side menu:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="300">
<ion-content>
<div class="list">
<a class="item item-icon-left left no-border" ui-sref="app.home" menu-close>
<i class="icon menu-icon ion-home"></i>
<h2>Hom</h2>
</a>
<a class="item item-icon-left left no-border" ui-sref="app.account" menu-close>
<i class="icon menu-icon ion-person"></i>
<h2>Item 1</h2>
</a>
<a class="item item-icon-left left no-border" ui-sref="app.orders" menu-close>
<i class="icon menu-icon ion-android-list"></i>
<h2>Item 2</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
As you can see im using the menu-close directive because i want the side menu to hide when i clicked on an item. The problem is that using this menu-close directive the state of the selected item is set to be the root. That means if i press the back button i wont get navigated back.
How can i close the menu when i click on an item without setting the selected view to be the root of the state?
I solve this doing the following in my menu item controllers:
angular.module("App.Home", [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("app.home", {
url: "/home",
views: {
"menuContent": {
templateUrl: "templates/menu_home.html",
controller: "HomeController"
}
}
});
})
.controller("HomeController", function($scope, $ionicSideMenuDelegate) {
$ionicSideMenuDelegate.toggleLeft(false);
});
EDIT
The following is an even better solution:
Just add a controller to your side menu:
<ion-side-menu side="left" width="300" ng-controller="MenuController">
And this to your controller:
angular.module("App.Menu")
.controller("MenuController", function($scope, $ionicSideMenuDelegate) {
$scope.toggleMenu = function() {
if($ionicSideMenuDelegate.isOpenLeft()) {
$ionicSideMenuDelegate.toggleLeft(false);
} else {
$ionicSideMenuDelegate.toggleLeft(true);
}
}
});
In your menu items you just need to call:
<a class="item item-icon-left item-left item-no-border" ui-sref="app.home" ng-click="toggleMenu()">
and everything is working like a charm.
I have a tabs.html setup with four page-tabs in it. One of these pages contains six items and upon selecting an item I want a new page to slide into view but it won't be one of the other tab items.
Is it better have the new page as a hidden tab or to have it be a page outside of the tabs? I need to pass the existing page's $scope data to transfer to new page (for data of the item tapped on) and I need the new page to animate the new page in.
You want the other page to be outside of the tabs. If you try to make a 'fake' tab, I can only imagine that will be the source of much pain and many bugs. It is best to use things as intended instead of hacking on top of them. You may want to consider a side menu to expose navigation that doesn't fit into normal tabs interactions.
See my codepen here for one quickly hacked together example. http://codepen.io/gnomeontherun/pen/OVLQYL?editors=101
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomeCtrl',
templateUrl: 'home.html'
})
.state('item', {
url: '/:item',
controller: 'ItemCtrl',
templateUrl: 'item.html'
});
$urlRouterProvider.otherwise('/');
})
.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
$scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
$ionicModal.fromTemplateUrl('modal.html', {
animation: 'slide-in-up',
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
});
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
}
$scope.openModal = function () {
$scope.modal.show();
}
$scope.form = {};
$scope.addStooge = function () {
console.log($scope);
$scope.stooges.push({name: $scope.form.name});
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
.controller('ItemCtrl', function ($scope, $stateParams) {
$scope.item = $stateParams.item;
});
<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>Ionic Modal</title>
<link href="http://code.ionicframework.com/1.0.0-rc.3/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.js"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon"><span class="icon ion-ios-arrow-left"></span></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
<ion-content>
<ion-list>
<ion-item href="#/" menu-toggle="left">Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right" >
<ion-header-bar class="bar-header bar-dark">
<h1 class="title">Search</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-plus" ng-click="openModal()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-positive">
<ion-tab title="Stooges">
<ion-content class="has-header">
<h4>The Stooges</h4>
<ion-list>
<ion-item ng-repeat="stooge in stooges" href="#/{{stooge.name}}">{{stooge.name}}</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2">
<ion-content class="has-header">
<h2>Just another tab, for another reason</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar class="bar-header bar-positive">
<h1 class="title">New Stooge</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content>
<div class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input ng-model="form.name" type="text" name="name" />
</label>
<button class="button button-full button-positive" ng-click="addStooge()">Create</button>
</div>
</div>
</ion-content>
</div>
</script>
<script id="item.html" type="text/ng-template">
<ion-view title="{{item}}">
<ion-content>
<h1>{{item}}</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>