When ionic application launched appearance of default page - angularjs

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.

Related

Ionic v1 $state.go not working

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';
};
})

Ionic State.go is not working

THIS IS MY LOGIN CONTROLLER
app.controller('lgctrl', function ($scope, $state) {
$scope.open = function () {
$state.go('home-menu');
}
});
THIS IS MY App.js
$stateProvider.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'lgctrl'
});
$stateProvider.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
});
$stateProvider.state('app.home-menu', {
url: '/home-menu',
views: {
'menuContent': {
templateUrl: "templates/home-menu.html"
}
}
});
$urlRouterProvider.otherwise('/login');
THIS IS MY Login.html
<ion-view view-title="Login">
<ion-content>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Password</span>
<input type="Password" placeholder="Password">
</label>
</div>
<button ng-click="open()" class="button button-block button-positive">
Login
</button >
Don't have an Account? Sign-Up | <a href="" >FAQ</a>
</ion-content>
</ion-view>
when i am clicking on login button i am getting this error my state.go is not redirecting to the home-menu page
Error: Could not resolve 'home-menu' from state 'login'
at Object.transitionTo (ionic.bundle.js:52013)
at Object.go (ionic.bundle.js:51946)
at Scope.$scope.open (Controller.js:38)
at fn (eval at compile (ionic.bundle.js:27638), <anonymous>:4:203)
at ionic.bundle.js:65427
at Scope.$eval (ionic.bundle.js:30395)
at Scope.$apply (ionic.bundle.js:30495)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:65426)
at defaultHandlerWrapper (ionic.bundle.js:16787)
at HTMLButtonElement.eventHandler (ionic.bundle.js:16775)
In your route config, you've defined your state as 'app.home-menu', but try to access it as 'home-menu' in the controller. As such, ui-router can't find a matching state definition for 'home-menu'
Try $state.go('app.home-menu'); instead
try updating the below code.
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller : 'lgctrl'
});
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
});
.state('app.home-menu', {
url: '/home-menu',
views: {
'menuContent' :{
templateUrl: "templates/home-menu.html"
}
}
});
$urlRouterProvider.otherwise('/login');

how to set a starting page in a ionic project

Sorry if this is a stupid question I am still fairly new to this. I have a basic understanding of how the navigation works with angular js but I cant figure out how to set a starting page. I want to set my login page as my start page the url shows that the login page is open ("http://localhost:8100/#/template/login") but it only displays a blank header which I suspect is from my index (ion-nav-bar).
thank you.
index.html
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view class="slide-left-right"></ion-nav-view>
</body>
</html>
login.html
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<h1>lalalalala</h1>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.projects', {
url: '/projects',
views: {
'tab-projects': {
templateUrl: 'templates/tab-projects.html',
controller: 'projectsCtrl'
}
}
})
.state('tab.projects-detail', {
url: '/projects/:projectsId',
views: {
'tab-projects': {
templateUrl: 'templates/projects-detail.html',
controller: 'projectsDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('login');
});
controllers.js
angular.module('starter.controllers', [])
.controller('loginCtrl', function($scope) {})
.controller('DashCtrl', function($scope) {})
.controller('projectsCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
I guess the problems is in your default route:
$urlRouterProvider.otherwise('/tab/login');
You have defined it depending from the abastract tab:
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
and this is your login:
.state('tab.login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
the state name is tab.login which means it inherits from tab.
so your root is /tab/login.
this should be your tabs.html:
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Login" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/login">
<ion-nav-view name="login"></ion-nav-view>
</ion-tab>
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
</ion-tabs>
as you can see your ion-nav-view name:
<ion-nav-view name="login"></ion-nav-view>
must match the one defined in your state:
.state('tab.login', {
url: '/login',
views: {
'login': {
templateUrl: 'login.html',
controller: 'loginCtrl'
}
}
})
You don't need to set the view's name here (login.html):
<ion-view view-title="Login" name="login-view">
Another thing I've noticed, you use the same name for two different views: tab-projects:
.state('tab.projects', {
url: '/projects',
views: {
'tab-projects': {
templateUrl: 'templates/tab-projects.html',
controller: 'projectsCtrl'
}
}
})
.state('tab.projects-detail', {
url: '/projects/:projectsId',
views: {
'tab-projects': {
templateUrl: 'templates/projects-detail.html',
controller: 'projectsDetailCtrl'
}
}
})
another thing has more to do with conventions. If you use for your views names starting with tab-, probably you should do the same for the login.
Here is a plunker with some of your code.
I've been putting comments regarding your code, so let me formulate an answer with some steps you would like to follow
1:
You have a mess once you declare your controllers, try to follow a guide like this, at least declare your controllers/services/directives and so on in the same way, LoginCtrl and not loginCtrl and the other stuff with no capital as a first letter. It is just an advise my friend.
2:
.state('tab.login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
here something you need to check, the name of your view, you have login but
<ion-view view-title="Login" name="login-view">
...
</ion-view>
so change it to login only. And do the same in your abstract route.
like this
<ion-view view-title="Login" name="login">
And this so important
$urlRouterProvider.otherwise('/login');
which goes at the end of the $stateProvider. The otherwise method will always redirect to /login in case that any other route it's been matched
Change your app.js to
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
and $urlRouterProvider.otherwise('/login');
If you place your login.html in correct folder then there is not going to be any problem.
You should give a name to your <ion-nav-view> in your index.html template.
e.g. <ion-nav-view name="viewContent"></ion-nav-view>
Then, in your routes, you specify into which part of your app you want your template to be rendered, e.g.:
.state('login', {
url: '/login',
views: {
'viewContent': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
this will render templates/login.html into the viewContent area.
That's why UI-router is so flexible, because you can tell it exactly which parts should be replaced when routing.
If you don't need that flexibility, just write your routes without the views part and add controller and templateUrl directly to each state.
also your fallback probably should be $urlRouterProvider.otherwise('/login');
If you want to evaluate a success at login to show certain views should not be in the same state.
This should be true:
.state('login',{
url: "/login",
views : {
'menuContent' : {
templateUrl : "login.html",
controller : "LoginCtrl"
}
}
})
$urlRouterProvider.otherwise("/login");
Follow the order as advice or guide on how to write their app.js
<script id="login.html" type="text/ng-template">
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<h1>lalalalala</h1>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
</script>
I had a similar problem..simply open your app.js file..then right at the bottom you will find $urlRouterProvider.otherwise('/app/tabs'); so for instance if the page thats currently loading is "tabs"
simply change the value tabs to your prefered page name inorder for that page to load as the first default page.
There is config.xml file. Open it and and you will see 'Start Page' Option. Then enter any page you want to start.

AngularJS $scope values from ng-model lost from page to page in same controller - Ionic Framework

I have this page which links the input.countNum scope variable to the input with ng-model. The value which is displayed on the button shows fine. When you click the button on the first page, it navigates to the second page which also displays the scope variable. But the variable is reset to the default declaration value in the controller code.
How do I maintain the scope value from ng-model between pages within the same controller?
tab-dash.html
<ion-view view-title="Test">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Count</span>
<input class="text-right" type="number" pattern="[0-9]*" ng-model="input.countNum">
</label>
</div>
<button class="button button-full button-positive" ng-click="create()" ui-sref="tab.count">
Count is ({{input.countNum}})
</button>
</ion-content>
</ion-view>
controller.js
.controller('DashCtrl', function($scope) {
$scope.input = {
countNum: 1
};
$scope.create = function() {
// Logic here
};
})
count.html
<ion-view view-title="Count">
<ion-nav-bar class="bar-energized">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
<button class="button button-full button-positive">
({{input.countNum}})
</button>
</ion-content>
</ion-view>
app.js
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.count', {
url: '/count',
views: {
'tab-dash': {
templateUrl: 'templates/count.html',
controller: 'DashCtrl'
}
}
})
Controllers are not shared between pages - a new instance is created each time the controller is used. You should not expect to be able to share data from a controller with anything outside the scope of that controller either. If you need to share data between pages or controllers, you should use a service or "value" object to maintain that state. Another option would be passing the data between the pages using the state params:
ui-sref="tab.count({ input: input })"
Note that Ionic uses the Angular UI Router project for its navigation logic, so the documentation there also applies to using Ionic.

Dynamic links and "could not resolve from state" error in AngularJS

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.

Resources