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';
};
})
Related
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.
I'm new in ionic
I'm trying to do a simple switch between two views in a login app:
index.html
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Login App</h1>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Email" ng-model="data.email">
</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="postLogin()">Login</button>
</ion-content>
</ion-pane>
logincontroller.js
app.controller('loginCtrl', function ($scope,$http,$location)
{
$scope.data = {};
$scope.postLogin = function ()
{
var data =
{
email: $scope.data.email,
password: $scope.data.password
};
console.log('bonjour');
$http.post("http://localhost/authproject/public/api/auth/login", data)
.then(
function(response){
// success callback
console.log('success');
$location.path('/map');
},
function(response){
// failure callback
console.log('error');
$location.path('/index');
}
);
}
When I click on a button Login the url change but the page doesn't change
Could someone tell me how do I solve this ? Thanks in advance :)
In your app.js add a state for map like this (with your own templateUrl and controller value). Make sure to add $stateProvider in the config(). Also, include ui.router to your dependencies. Something like this:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider){
$stateProvider
.state('map', {
url: '/map',
templateUrl: 'app/views/map.html',
controller: 'MapController'
});
...
And in your index.html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
Try this
app.controller('loginCtrl', function ($scope,$http,$location,$state) {
$scope.data = {};
$scope.postLogin = function ()
{
var data =
{
email: $scope.data.email,
password: $scope.data.password
};
console.log('bonjour');
$http.post("http://localhost/authproject/public/api/auth/login", data)
.then(
function(response){
// success callback
console.log('success');
$location.path('/map');
},
function(response){
// failure callback
console.log('error');
$state.go('main');
});
})
Add a state in app.js
.config(function($stateProvider,$urlRouterProvider){
.state('main', {
url:'/main',
templateUrl:'templates/main.html',
controller:'yourCtrl'
})
$urlRouterProvider.otherwise('/index');
})
Now make in template folder make a page for named main.html
I want to make default my dashboard page.So write following code in app.js
$urlRouterProvider.otherwise('/app/dashboard')
But when ionic application launch in mobil device,login page before show,dashboard page is appearing afterward disappearing.I want to dashboard page never be show before from login page How can i solve this problem.
Login Page:
<ion-view view-title="Kayıt Ol" hide-back-button="true">
<ion-content class="padding ">
<div style="padding:40px 0 40px 0; text-align:center;font-size:45px;color:#ff6707">
Login
</div>
<div class="card list-inset">
<form novalidate >
<label class="item item-input">
<input type="email" placeholder="Email" required ng-model="user.email">
</label>
<label class="item item-input">
<input type="password" placeholder="Email" required ng-model="user.password">
</label>
</form>
</div>
<button class="button button-block button-positive icon-button icon-center ion-person-add" ng-disabled="!user.email && !user.password" ng-click="Login()">Login</button>
</ion-content>
</ion-view>
app.js
.state('app', {
url: "/app",
cache: false,
abstract: true,
templateUrl: "templates/app.html",
controller: 'AppCtrl'
})
.state('login', {
url: "/login",
cache: false,
abstract: true,
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('app.dashboard', {
url: '/dashboard',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/dashboard.html',
controller: 'DashboardCtrl'
}
}
})
$urlRouterProvider.otherwise('/app/dashboard');
Why don't use $urlRouterProvider.otherwise('/login')? then in LoginCtrl controller, you should check if the user is logged and then you can use $state.go('app.dashboard').
But, maybe this is not the best idea. I am not sure about this but here you have a good answer with another method: https://stackoverflow.com/a/32734632/2012904
And i think you are wrong with the use of the abstract property. Check this: https://stackoverflow.com/a/24969722/2012904
But like others said, post your code in controllers so we can understand your issue at all.
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 am trying give dynamic link from my models which names are "aracData.planlama".
There is no problem on this. But when I click the link I get "could not resolve from state" error on console.
<div class="form-group">
<div class="radio">
<label>
<input type="radio" ng-model="aracData.planlama" value="sifirmi">
Araç satın alınmış durumda
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="aracData.planlama" value="satin-alinacak">
Satın alınması planlanıyor
</label>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.{{aracData.planlama}}" class="btn btn-block btn-info" ng-class="{disabled:aracData.planlama == undefined}">
Sonraki adım <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
And theese are my routing codes:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
.state('form.sifirmi', {
url: '/sifirmi',
templateUrl: 'sifir-mi-ikinci-el-mi.html'
})
.state('form.alindimi', {
url: '/alindimi',
templateUrl: 'alindi-mi.html'
})
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
$urlRouterProvider.otherwise('/form/profile');
})
How can I fix this?
You can't pass an expression to ui-sref for the state name. Instead, you can do this in the controller.
<a ng-click="go(aracData.planlama)">
Inject the $state service into your controller, then do:
$scope.go = function(sub) {
$state.go('form.'+sub);
};
This will probably also work:
$scope.go = $state.go; // may need to do $state.go.bind($state);
<a ng-click="go('form'+aracData.planlama)">
Click here for GitHub discussion about dynamic state name for ui-sref.