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');
Related
I am trying to put on my app 3 page content in one .html file but I cant figure it out to do that. My .html page code is here:
<script id="templates/topList.html" type="text/ng-template">
<ion-view>
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/topList2.html" type="text/ng-template">
<ion-view>
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
And my app.js is this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html'
})
.state('registration', {
url: '/registration',
templateUrl: 'templates/registration.html',
controller: 'RegistrationCtrl'
})
.state('code_entery_page', {
url: '/code_entery_page',
templateUrl: 'templates/code_entery_page.html',
controller: 'code_entery_pageCtrl'
})
.state('registration-create-profile', {
url: '/registration-create-profile',
templateUrl: 'templates/registration-create-profile.html',
controller: 'registration-create-profileCtrl'
})
.state('app.main-traveler-page', {
url: '/main-traveler-page',
templateUrl: 'templates/main-traveler-page.html',
controller: 'main-traveler-pageCtrl'
})
.state('pinko.main-pinko-page', {
url: '/main-pinko-page',
templateUrl: 'templates/main-pinko-page.html',
controller: 'main-pinko-pageCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/directives/traveler-navigation.html',
controller: 'AppCtrl'
})
.state('pinko', {
url: '/pinko',
abstract: true,
templateUrl: 'templates/directives/pinko-navigation.html',
controller: 'AppCtrl'
})
$urlRouterProvider.otherwise('/');
});
but I dont know how to connect to toplist.html and toplist2.html in app.js to work when my page is open?
In app.js - .state('pinko.main-pinko-page') is the page where i want to show toplist.html and toplist2.html
Add your both template in single html file like common-template.html.
And include this common-template in main-pinko-page.html as you mentioned in your question that's needed in .state('pinko.main-pinko-page').
If this one required in only one place use above case otherwise include this common-template in your main html file from where all the navigation initiates.
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 have the following states:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.myClients', {
url: '/myClients',
//templateUrl: 'templates/myClients/myClients.html',
views: {
'menuContent': {
templateUrl: 'templates/myClients/myClients.html',
controller: 'clientController'
}
}
})
.state('app.myClients.rapida', {
url: '/rapida',
//templateUrl: 'templates/myClients/myClients.html',
views: {
'content_rapida#menuContent#app': {
templateUrl: 'templates/myClients/partials/rapida.html',
// controller: 'qSearchController'
}
}
})
menu.html
<ion-side-menus hide-back-button="true" enable-menu-with-back-views="true" ng-controller="menuCtrl">
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
myClients.html
<div class="div_clients" ng-controller="clientController">
<ion-nav-view name="content_rapida"></ion-nav-view>
<ion-nav-view name="content_lenta"></ion-nav-view>
<div class="clientFilter">
<h1 class="searchTitle">
FILTROS
</h1>
<div class="filtereRow">
Filtros (0)
<div class="executeBt">
<button class="execute" ng-click="">Ejecutar<i class="ion-ios-loop execute-icon"></i></button>
</div>
</div>
</div>
</div>
rapida.html
<h1>HI guys!</h1>
This works
/app/myClients
This doesn't works
/app/myClients/rapida
Hace you tried with
'content_rapida'
instead of
'content_rapida#menuContent#app'
at state definition?
Your view should already identify 'content_rapida' inside the parent view...
I finally did it!
I changed this
.state('app.myClients.rapida', {
url: '/rapida',
//templateUrl: 'templates/myClients/myClients.html',
views: {
'content_rapida#menuContent#app': {
templateUrl: 'templates/myClients/partials/rapida.html',
controller: 'qSearchController'
}
}
})
To this
.state('app.myClients.rapida', {
url: '/rapida',
templateUrl: 'templates/myClients/myClients.html',
views: {
'content_rapida': {
templateUrl: 'templates/myClients/partials/rapida.html',
controller: 'qSearchController'
}
}
})
Note that I have to use templateUrl twice.
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.
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.