I'm trying to go to a page(template) using $state.go.
Controller
.controller('NavCtrl', function($scope, $location, $state) {
$scope.openDaily = function() {
$state.go('daily');
};
})
It works but for only a millisecond or something as it's redirected BACK to the '/select' page because the $state.otherwise says so.
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('select', {
url: '/select',
templateUrl: 'templates/select.html',
controller: 'selectController'
})
.state('daily', {
url: '/daily',
templateUrl: 'templates/daily.html',
controller: 'dailyController'
});
$urlRouterProvider.otherwise('/select');
})
What is causing this please?
UPDATE
index.html
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-view>
</ion-nav-view>
</body>
select.html
<ion-view title="Select" ng-controller="NavCtrl">
<ion-content>
<div class="list-card" ng-click="openDaily()">
<a href='#' class="item item-icon-left">
<i class="icon ion-home"></i>
Personal
</a>
</div>
</ion-content>
<div class="bar bar-footer bar-balanced">
<div class="title">Add File/Folder</div>
</div>
</ion-view>
and daily.html(template):
<ion-view title="Select" ng-controller="NavCtrl">
</ion-view>
Using Ionic Framework.
Please remove href='#' from <a> tag. Because this will call default state(Here it is select state).
Looks like a cache problem, because everything looks correct, make sure the file is changed on you browser inspector and anything is broken on the console.
P.S: You can use also ui-sref="daily", if you just want go to the page.
Related
this is my first post, I hope I'm clear enough, I can't get $state.go to work, I've been searching all over but I don't seem to find the answer, not too sure what I'm doing wrong because I'm new to this technology which I think is actually really good. Maybe I have to declare index.html in the app.js but I do not want this page to be accessible once the app is started, only for the beginning, once the users have logged in, this screen will not be seen anymore unless they restart the app.
This is my app.js
angular.module('starter', ['ionic','starter.controllers', 'starter.services'])
.config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.appointments', {
url: '/appointments',
views: {
'tab-appointments': {
templateUrl: 'templates/tab-appointments.html',
controller: 'appointmentsCtrl'
}
}
})
.state('tab.findPatient', {
url: '/findPatient',
views: {
'tab-findPatient': {
templateUrl: 'templates/tab-findPatient.html',
controller: 'FindPatientCtrl'
}
}
})
.state('tab.findSlot', {
url: '/findSlot',
views: {
'tab-findPatient': {
templateUrl: 'templates/tab-findSlot.html',
controller: 'FindPatientCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'settingsCtrl'
}
}
});
$urlRouterProvider.otherwise('/tab/appointments');
});
This is my index.html
<body ng-app="starter">
<ion-header-bar class="bar-calm" align-title="center"></ion-header-bar>
<ion-pane>
<ion-content scroll="false">
<form ng-controller="loginCtrl" name="loginCredentialsForm">
<div class="list list-inset">
<label class="item item-input">
<input class="text-center" type="text" placeholder="Username" ng-model="username" required="true">
</label>
<label class="item item-input">
<input class="text-center" type="password" placeholder="Password" ng-model="password" required="true">
</label>
<label class="item item-input">
<input class="text-center" type="password" maxlength=4 placeholder="PIN" ng-model="practicePin" required="true">
</label>
</div>
<div class="text-center">
<button class="button button-block button-calm small_button" ng-disabled="loginCredentialsForm.$invalid" ng-click="login()" type="submit">Login</button>
</div>
</form>
</ion-content>
</ion-pane>
</body>
And this is my controllers.js
angular.module('starter.controllers', [])
.controller('loginCtrl', function($scope, $state) {
$scope.login = function() {
$state.go('tab.appointments');
};
})
Thanks in advance, I do apologize for any syntax mistakes.
Edited - added
This is what tabs.html looks like
<ion-tabs class="tabs-icon-bottom tabs-calm">
<ion-tab title="Appointments" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/appointments">
<ion-nav-view name="tab-appointments">
</ion-nav-view>
</ion-tab>
</ion-tabs>
And then there's home.html which I'm pretty sure is the one that redirects to tabs.html and then been loaded by the rest.
<body ng-app="starter">
<ion-nav-bar class="bar-calm" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
If I change the name of home.html to index.html and don't use the actual index.html that I want for people to log in everything works fine, but I really need that people logs in so they have their own records.
This is what home.html actually looks like
As I said, I'm new to this kind of technology, trying to do my best to understand how this works. Really appreciate any help.
you can also use $window for redirect to a page.
$window.location.href = 'templates/tab-appointments.html';
your controller can be changed like this
angular.module('starter.controllers', [])
.controller('loginCtrl', function($scope, $state,$window) {
$scope.login = function() {
$window.location.href = 'templates/tab-appointments.html';
};
})
I know this question might be stupid,but after searching through all over the stackoverflow and other blogs,and video tutorials,I have no other choice left than to ask this on stackoverflow.
I have been learning Angular.js through online tutorials.
I have 2 files.
index.html and app.js
Here is some snaps of my code.
States Configuration Part inside app.js
angular.module('flapperNews', ['ui.router']).config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
})
$urlRouterProvider.otherwise('home')}]);
Inline templates inside index.html (1-home.html , 2-posts.html)
<ui-view></ui-view>
<script type="text/ng-template" id="/home.html">
<!--home.html part-->
</script>
<script type="text/ng-template" id="/posts.html">
<!--posts.html part-->
</script>
inside home.html I have a hyperlink on Comments.
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
<span>
<a ui-sref="/posts/{{$index}}">Comments</a>
</span>
</span>
</div>
Now when I run this WebApp on my localhost it is showing this rendered html of my Comment hyperlink,but it is not providing me any navigation(Hyperlink is not working).
<span>
<a ui-sref="/posts/0">Comments</a>
</span>
Now,I have two questions:
What went wrong with ui-sref part.When I use href instead of ui-sref then it is working perfectly fine.Why is this happening?
I have been using inline templates for home.html and posts.html,but if I make them into separate files then my entire app gets broken.Why?
Any help would be appreciative.
1)The way you have used ui-sref is what is causing it to break.Try this in your application,
<a ui-sref="posts({ id: $index })">Comments</a>
2)Assuming your new template files are as same level as your index.html and app.js you need not mention as templateUrl: '/posts.html',just use templateUrl: 'posts.html'.
I am trying to get my dashboard view from template folder when I am loading my app. I am using Ionic frame work.
My index
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar bar-header bar-dark main-header">
<h1 class="title main-header-title"><strong>Recharge Plans</strong></h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
My app.js
angular.module('starter', ['ionic','starter.controller','starter.service'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dash', {
url: '/dash',
views: {
'dash': {
templateUrl: '/templates/dash.html',
controller: 'DashCtrl'
}
}
});
$urlRouterProvider.otherwise('/dash');
});
My controller.js
angular.module('starter.controller',[])
.controller('DashCtrl', function($scope) {
alert("ok");
})
In 'www\templates' I have a file named dash.html.
My dash.html is
<ion-view ng-controller="DashCtrl">
<ion-content>
<div class="list searc-panel">
<label class="item item-input item-select">
<div class="input-label">
Select Operator
</div>
<select>
<option>Select</option>
<option>Airtel</option>
<option>Vodafone</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">
Select State
</div>
<select>
<option>Select</option>
<option>West bengal</option>
<option>Kolkata</option>
</select>
</label>
<button class="button button-full button-positive">
Search My Plans
</button>
</div>
</ion-content>
</ion-view>
But when i hit 'file:///C:/Users/Sanjeev/RechargePlans/www/index.html' in browser then it renders me to 'file:///C:/Users/Sanjeev/RechargePlans/www/index.html#/dash' with a blank view .
What I miss??
If you are going to name your views with Ionic then your ion-view tab HTML needs to look like this:
<ion-nav-view name="you-view-name"></ion-nav-view>
Usually with Ionic apps you have a root state and everything stems off that, so:
app.js file:
angular.module('starter', ['ionic','starter.controller','starter.service'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('root', {
url: '/',
templateUrl: '/templates/tabs.html',
controller: 'rootCtrl'
}
});
.state('root.dash', {
url: '/dash',
views: {
'dash': {
templateUrl: '/templates/dash.html',
controller: 'DashCtrl'
}
}
});
$urlRouterProvider.otherwise('/dash');
});
index.html:
<ion-nav-view></ion-nav-view>
tabs.html:
<ion-nav-view name="dash"></ion-nav-view>
In any case, if you are naming your views them your ion-view HTML tag needs to have a name attribute with the name of the view in it.
Hope this helps
you should not run ionic app by "file:///C:/Users/Sanjeev/RechargePlans/www/index.html". you should be using ionic cli tool to run your ionic project. Go to cmd > navigate to your project folder and than run ionic serve and you will be able to see output.
I'm so early for ionic framework, and i'm trying to make mobile apps with ionic.
I was wondering how to change the overall look, if it makes the website quite by < a href="#">, but in ionic how it works (?)
I'm trying to add some code app.js :
config(function($stateProvider) {
$stateProvider
.state('expense', {
url: "/app/expense",
templateUrl: 'templates/add-expense.html'
})
});
this my code index.html :
<body ng-app="starter">
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-header bar-dark">
<button class="button button-clear button-positive">Edit</button>
<div class="h1 title">23 Desember 20014</div>
<button class="button button-icon icon ion-navicon" menu-toggle="right"> </button>
</ion-header-bar>
<ion-content>
<div class="row green">
<div class="col">Income</div>
<div class="col price">3,550,000</div>
</div>
<div class="row expense orange">
<a class="col" href="#/app/expense">New Expense</a> <!-- try to link templates/add-expense.html -->
</div>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="right">
<a menu-close href="#" class="item">Home</a>
</ion-side-menu>
</ion-side-menus>
<body>
Anyone can help me? Thanks in advance.
There is updated working plunker. I am not expert of the ionic, so just basics are fixed/improved.
One issue is, that the config should be a method of something:
// wrong
config(function($stateProvider) {
...
The app is having config method
var app = angular.module('starter', ['ionic'])
...
app.config(function($stateProvider) {
$stateProvider
.state('expense', {
url: "/app/expense",
templateUrl: 'add-expense.html',
})
});
Also, I wrapped the content with <ion-nav-view>, as a placeholder for the state expenses (it must be injected into some ui-view="" - unnamed anchor)
But these are few adjustments just to make it running, you should investigate the ionic more, read about it, to understand the concept, because e.g. the add-expsenses.html is not the way...
Check it here
You have problem with config section , should use this way.
And use also in html. And remove unused code on "add-expense.html" Use need to add template which you need to show.
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider) {
$stateProvider
.state('expense', {
url: "/app/expense",
templateUrl: 'add-expense.html'
})
});
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
I need to remove sidemenu only on my login page. Otherwise remain. How it can be done? I'm using command ionic ionic start myApp sidemenu to create the project.
app.js
.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.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html"
}
}
})
login page
<ion-view title="Login">
<ion-content>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="login()">Log in</button>
</label>
</div>
</ion-content>
</div>
You can disable/enable sidemenu at any time at any page by calling
$ionicSideMenuDelegate.canDragContent(false)
e.g:
angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {
$ionicSideMenuDelegate.canDragContent(false)
});
**Ionic 2**
import { MenuController } from 'ionic-angular';
export class LoginPage {
constructor(public menuCtrl: MenuController) {
}
ionViewWillEnter() {
this.menuCtrl.swipeEnable( false )
}
ionViewDidLeave() {
this.menuCtrl.swipeEnable( true )
}
}
IONIC 4: Sept2019
try this code to in your login.page.ts
Step1: import { MenuController } from '#ionic/angular';
Step2: constructor(public menuCtrl: MenuController) { }
(below constructo)
Step3: ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionViewDidLeave() {
this.menuCtrl.enable(true);
}
this code will help you to work with side menu flawlessly on any screen, if you login & re-login and try it will work now.
same issue here. just add hide-nav-bar="true" to the ion-view
<ion-view hide-nav-bar="true">
Hope it helps!
What you can do is define the login page without a sidemenu. Check your login page HTML template. Make sure you do not have the <ion-side-menus> and <ion-side-menu> elements in it. These are used on pages that need to have a sidemenu.
Your login page should look like this:
<ion-view>
<ion-content>
<!--your page content goes in here-->
</ion-content>
</ion-view>
To have sidemenu on other pages, just put the sidemenu content in a parent state which in your code is the app state.
Your menu.html file:
<ion-view>
<ion-side-menus>
<ion-side-menu>
<!--put your side menu content here-->
<!--any child state of app will inherit this sidemenu-->
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</ion-view>
A little late to the game but this is another option for those (like me) who need to keep their login view within the side-menu layout but need to hide the side menu button while keeping the view title.
Inside the login.html view use the ion-header-bar directive to create a new header with a title and then hide the ion-nav-bar in the side-menu layout via the ion-view tag.
Example (login.html)
<ion-header-bar class="bar-positive" align-title="center">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-view hide-nav-bar="true">
<!-- Login content goes here -->
</ion-view>
Then if you need to disable any drag gestures do so in the controller like #waqas suggests.
I have made a small demo for the question.
Plunker Demo
If you want a page differently from sidemenu.Create a new Parent state.
For example
$stateProvider
.state('landing', {
url: '/landing',
controller: 'landingCtrl',
templateUrl: 'landing.html'
});
Html :
<ion-view class="view-bg-blue" >
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h3 class="text-center">Welcome To Landing Page</h3>
<div class="row">
<div class="col">
<div class="text-center">
<h4>My App</h4>
<div class="row">
<div class="col">
<input placeholder="User">
</div>
</div>
<div class="row">
<div class="col">
<input placeholder="password">
</div>
</div>
<a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Then call this state using /landing when ever you want.
I know this is late but here is a quick and easy solution.
Add this in your login Controller
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
<ion-side-menus>
bcn
<ion-tab title="ALL" href="#/dashbord/all" class="bgorange">
<ion-nav-view name="all"></ion-nav-view>
</ion-tab>
<ion-tab title="INFO" class="bgorange" href="#/dashbord/info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
<ion-tab title="EVENTS" class="bgorange" href="#/dashbord/events">
<ion-nav-view name="events"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-nav-view></ion-nav-view>
</ion-pane>
<div ng-include src="calender.html"></div>
<ion-side-menu side="left">
<ion-content has-header="true">
<ion-list>
<ion-item menu-close class="item-icon-left bottombordernone" href="#/dashbord">
<i class="icon ion-home"></i>
What's New
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone">
<i class="icon ion-chatbox-working"></i>
Feedback
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone" ng-click="logout()">
<i class="icon ion-power"></i>
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
#Zulu here's my full code.
I hope this Ex. work for you.
// index.html
<body>
<section ui-view></section>
</body>
// routes.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html'
})
$urlRouterProvider.otherwise('/login')
it's work, see more here: angular-ui/ui-router
You have to watch the slide menu.
If it is open, you have to toggle it and close.
.controller('kayTOlCtrl', function($scope,$ionicSideMenuDelegate) {
//
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
if (ratio != 0) {
$ionicSideMenuDelegate.toggleRight();
}
});
})
Calling $ionicSideMenuDelegate.canDragContent(false) does disable the ability to swipe to access the menu, but does not hide the hamburger toggle button in the navbar (if you have one). To do that, you can use ng-show with $root binding in your ion-side-menu-content element like this:
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"
ng-show="$root.showMenuIcon">
</button>
</ion-nav-buttons>
Then in your login controller:
$scope.$on('$ionicView.beforeEnter', function (event) {
$scope.$root.showMenuIcon = false;
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.beforeLeave', function (event) {
$scope.$root.showMenuIcon = true;
$ionicSideMenuDelegate.canDragContent(true);
});
you can also add this to your main app controller:
$scope.$root.enableLeft = true;
$scope.$root.showMenuIcon = true;
and simply switch it to false in every controller you dont want your side menu appear in:
$scope.$root.enableLeft = false;
$scope.$root.showMenuIcon = false;
add is-enabled="$root.enableLeft" to your html tag and ng-show="$root.showMenuIcon" to the button inside html tag.
Based on various answers here from everyone and 15 minutes of trying, here is my working example of it, and it should work as simply doing copy-paste
Your view, like login.html
<ion-view hide-nav-bar="true">
<ion-header-bar class="bar-light title-image" align-title="center">
<h1 class="title">Title</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-view>
Your related controller, like LoginCtrl
function LoginCtrl($scope, $ionicSideMenuDelegate) {
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
}
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/loginpage.html'
})
.state('app.account', {
url: '/account',
views: {
'menuContent': {
templateUrl: 'templates/account.html',
controller: 'AccountCtrl'
}
}
})
import {IonicApp, Page, NavController, MenuController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';
#Page({
templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
constructor(nav: NavController, userData: UserData, menu: MenuController) {
this.nav = nav;
this.userData = userData;
this.login = {};
this.submitted = false;
this.menu = menu;
}
onLogin(form) {
this.submitted = true;
if (form.valid) {
this.userData.login();
this.nav.push(TabsPage);
}
}
onSignup() {
this.nav.push(SignupPage);
}
onPageDidEnter() {
// the left menu should be disabled on the login page
this.menu.enable(false);
}
onPageDidLeave() {
// enable the left menu when leaving the login page
this.menu.enable(true);
}
}
<ion-pane ion-side-menu-content drag-content="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Cards</h1>
</ion-header-bar>
<ion-content scroll="true">
</ion-content>
</ion-pane>
This is works for me ...
I think the simplest solution in opening the login page in a modal view, checkout $ionicModal