I am trying to link to a substate and can't figure out how to get it to work. Here is the link:
<a ui-sref="tab.communityDashboard" class="button button-block button-large"><i class="icon ion-home"></i><br />Community Directory</a>
and here is the route:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.communityDashboard', {
url: '/communitydashboard',
views: {
'tab-communityDashboard': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
and then eventually:
$urlRouterProvider.otherwise('/home');
Here is the content of the view:
<ion-view view-title="tab-communityDashboard">
<ion-content>
yolo yolo yolo
</ion-content>
</ion-view>
I tried also going to localhost:8100/#/communitydashboard but it just redirects me home. How do I fix this.
You need an <ion-nav-view> where you want your view to show up, and since you're using views with your states, you'll need to include the name attribute with the name of the view, so something like <ion-nav-view name="tab-communityDashboard">
http://ionicframework.com/docs/api/directive/ionNavView/
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
Related
Hi I am just new to AngularJS. I want to make my app route from cart view to checkout view when a checkout button is clicked. However I'm really struggling on how to make this supposed to be a simple task.. This is what I have so far. I'll cut some other codes.
$stateProvider.state("app", {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.cart', {
url: "/cart",
views: {
'tab-cart': {
templateUrl: "templates/cart.html",
controller: 'CartCtrl'
}
}
})
.state("app.checkout", {
url: "/checkout",
views: {
'tab-checkout': {
templateUrl: "templates/checkout.html",
controller: "CheckoutCtrl"
}
}
})
And this is the button in my cart.html
<a class="button button-block button-positive button-checkout"
href="#/tab/checkout">
Checkout
</a>
I'm just confused that it is working on tabs.
<ion-tab title="Cart" icon-off="ion-ios-cart" icon-on="ion-ios-cart" href="#/tab/cart">
<ion-nav-view name="tab-cart"></ion-nav-view>
</ion-tab>
I've searched and tried some other solutions but it's not working for me. I've tried:
href="#/app/checkout"
ui-sref="app.checkout"
$location.path("#/app/checkout"); //from the controller
From your CartCtrl controller, add this funciont to change the view (make sure to inject $state into your controller):
$scope.goToCheckOut = function(){
$state.go('app.checkout');
}
Then, change the button behavior in cart.html:
<a class="button button-block button-positive button-checkout"
ng-click="goToCheckOut()">
Checkout
</a>
I am new to UI router and new to Ionic as well.
I am simply looking to create a login page with just a form. Then dashboard and other views will contain a common menu and a header from thereafter in each view.
I am not sure how to proceed with the structuring of the same in config function and my index.html.
Note: I know about angularjs app constructions where I used to have the common header, menu and footer directives for the similar thing in each view.
Update after Anuj's answer
My menu.htm - Is this correct ?
<ion-view>
<ion-content>
<ion-side-menus>
<ion-side-menu side='right'>
<ion-nav-bar class="bar-positive">
<ion-nav-buttons side="right"
>
<button menu-toggle-right class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
</ion-side-menu>
<ion-side-menu-content>
</ion-side-menu-content>
</ion-side-menus>
</ion-content>
My Login view
<ion-view>
<ion-content>
<h3>{{msg}}</h3>
<h4>hflahfjasghf</h4>
</ion-content>
</ion-view>
After defining config function as
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.htm",
controller: "AppCtrl"
})
.state('app.login', {
url: "/login",
templateUrl: "templates/login.htm",
controller: "LoginCtrl"
})
.state('app.dashboard', {
url: "/dashboard",
templateUrl: "templates/dashboard.htm",
controller: "DashboardCtrl"
})
$urlRouterProvider.otherwise('/app/login');
})
.controller('AppCtrl', function($scope){
$scope.msg = "AppCtrl";
});
My app shows a blank login page
download ionic template. in it configure app.js with stateProvider like
.config(function($stateProvider){
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/social/menu.html",
controller: 'AppCtrl'
}).state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/social/login.html',
controller: 'LoginCtrl'
}
} $urlRouterProvider.otherwise('/app/login');
});
Hello I have a problem...
.state('tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.personal', {
url: '/personal',
views: {
'personalGoals-view': {
templateUrl: 'templates/personalGoals.html',
controller: 'personalCtrl'
}
}
})
.state('tabs.personal.personalview', {
url: 'tabs/personal/personalview',
views: {
'personalview-view': {
template: 'hello',
controller: 'personalViewCtrl'
}
}
})
and this is my link:
<ion-view view-title="PersonalGoals">
<ion-content class="has-footer">
<ion-item ng-repeat="goal in goals" href="#" ui-sref="tabs.personal.personalview">
<span class="goal-lists">{{goal.goaltitle}}</span>
</ion-item>
</ion-content>
</ion-view>
(pound sign)/tabs/personal/personalview doesn't show and goes back to my otherwise link... I don't know why... please help...
Try using ui-sref:
<ion-view view-title="PersonalGoals">
<ion-content class="has-footer">
<ion-item ng-repeat="goal in goals" ui-sref="tabs.personal.personalview">
<span class="goal-lists">{{goal.goaltitle}}</span>
</ion-item>
</ion-content>
</ion-view>
2 things :
When using ui-router use ui-sref="tabs.personal.personalview" it's way better than href.
2nd Your state is a grand children of the state tabs and URL are relative to their parent states. So his full URL would be
<tabs URL>/<tabs.personal URL>/tabs/personal/personalview
If i guessed correctly how you did declare your states this will give something like
tabs/tabs/personal/tabs/personal/personalview
If you click on a link using ui-sref.
I'm using the Ionic Framework to create a mobile app, but I'm having a difficult time with the UI Router. I've gotten a few screens working properly, but I can't seem to get nested views working on a state with parameters. I'd like a URL that looks like /legislator/1/profile. It would have a header with the name of legislator #1 and tabs below. The profile tab would be automatically visible and clicking on other tabs (e.g. /legislator/1/votes) would change the content, but not the header
I wound up abandoning the tabs & sidemenu starter projects to customize my nested views. Here's what I have in app.js. The home and people.* states work correctly, but I can't seem to load the legislator screen with the profile view in place. I've tried changing the abstract & controller attributes, but no luck yet.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/home.html",
controller: "homeController"
})
.state('people', {
url: "/people",
abstract: true,
templateUrl: "templates/people.html"
})
.state('people.legislators', {
url: "/legislators",
templateUrl: "templates/legislators.html",
controller: "legislatorController"
})
.state('people.following', {
url: "/following",
templateUrl: "templates/following.html",
controller: "followingController"
})
.state('legislator', {
url: "/legislator/{legislatorId:int}",
templateUrl: "templates/legislator.html",
abstract: true
})
.state('legislator.profile', {
url: "/legislator/{legislatorId:int}/profile",
templateUrl: "templates/legislator.profile.html",
controller: "profileController"
})
.state('legislator.votes', {
url: "/legislator/{legislatorId:int}/votes",
templateUrl: "templates/legislator.votes.html",
controller: "votelistController"
})
$urlRouterProvider.otherwise('/home');
// if none of the above states are matched, use this as the fall-back
})
How is this scenario supposed to work in the UI Router? Once I have $stateProvider configured, how should the tabs link to the nested states?
Thanks for any help you can give me.
Maybe your solution is as simple as replacing the classic href by Ui Router's ui-sref:
replace
<ion-tab ... href="#/legislator/{ scopeLegislatorId }/profile">...</ion-tab>
by
<ion-tab ... ui-sref="legislator.profile({ legislatorId: scopeLegislatorId })">...</ion-tab>
Where scopeLegislatorId is the legislatorId, available from your scope.
If that doesn't help, please provide us with your html files (e.g. legislator.html and legislator.profile.html).
You can use following method to create separate views.
state('people.following',{
data:{
anyVar: {
label: 'cp',
text : 'anyText'
}
},
views: {
'content#people': angularAMD.route({
template: infoView,
controller: 'custInfoCtrl',
controllerUrl: 'modules/custCtrl'
}),
'mobileView#people': angularAMD.route({
template: mobileView,
controller: 'mobileCtrl',
controllerUrl: 'modules/mobileBottomViewCtrl'
})
}
})
<pre>
<div ui-view='contentArea'> </div>
<div ui-view='mobileView'> </div>
</pre>
RobYed pointed me in the right direction to figure out the right way to define my states. Here's the bones of what I wound up with.
app.js:
.state('legislator', {
url: "/legislator",
templateUrl: "templates/legislator.header.html",
abstract: true,
})
.state('legislator.profile', {
url: "/{seq_no:int}/profile",
templateUrl: "templates/legislator.profile.html",
controller: "profileController"
})
templates/legislator.header.html:
<ion-nav-view animation="slide-left-right">
<div class="bar bar-header" ng-controller="profileController">
{{legislator.name}}
</div>
<div class="tabs tabs-striped tabs-top">
<a class="tab-item" ui-sref="legislator.profile" ng-class="{selected: is('legislator.profile')}">
{{'Profile' | translate}}
</a>
<a class="tab-item" ui-sref="legislator.votes" ng-class="{selected: is('legislator.votes')}">
{{'Votes' | translate}}
</a>
<a class="tab-item" ui-sref="legislator.stats" ng-class="{selected: is('legislator.stats')}">
{{'Stats' | translate}}
</a>
</div>
<div ui-view></div>
</ion-nav-view>
templates/legislator.profile.html:
<ion-content>
<div class="bar bar-stable has-subheader" style="height:145px;">
{{legislator.whatever}}
Content Here
</div>
</ion-content>
profileController.js:
'use strict';
angular.module('myApp').controller('profileController', function($scope, $rootScope) {
$scope.legislator = $rootScope.legislators[$stateParams.seq_no-1];
});
Links from other states:
<a ui-sref="legislator.profile({seq_no:legislator.seq_num})"></a>
I am using ionic framework's sidemenu project to build something on top of it.
I have created this plunker to demonstrate my problem.
In the plunker, on the join page, when you click home, it shows blank screen. I can see that the HTML elements of sidemenu are all there, however, it doesnt showup on screen.
If I change my sidemenu with tabs, it works fine.
Does anyone know whats going on?
My sidemenu template looks like this:
<ion-side-menus>
<ion-pane side-menu-content>
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="home">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My states looks like this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
//url: "/app",
abstract: true,
templateUrl: "tpl.tabs.html",
controller: 'AppCtrl'
})
.state('join', {
url: "/join",
views: {
'': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
})
.state('home', {
parent: 'app',
url: "/app",
views: {
'home': {
templateUrl: "tpl.home.html",
controller:'homeCtrl'
}
}
})
.state('menu', {
parent: 'app',
url: "/menu",
views: {
'menuContent': {
templateUrl: "tpl.home.html",
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
})
You had several misconceptions in your code here is how it works properly.
First of all, I recommend you to use the newest version of Ionic.
Then make sure you use the
<ion-side-menu-content></ion-side-menu-content>
and the parent/child view function of the ui-router with dot notation, for example:
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "tpl.tabs.html",
controller: 'appCtrl'
})
.state('app.join', {
url: "/join",
views: {
'menuContent': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
});
I solved it myself.
The problem was with the naming of views of the states, which should match with the
ion-nav-view name in the abstract template.
The updated solution is here