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
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 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');
});
Ionic sidemenu default app created and map and markerClick tow page was add ed in menu list. Map is working fine but MarkerClick is not. When click on MarkerClick form sidemenu this redirect on last active page.
menu.html
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
<ion-item menu-close href="#/app/map">
Map
</ion-item>
<ion-item menu-close href="#/app/markerClick">
Marker
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
})
.state('app.map', {
url: '/map',
views: {
'menuContent': {
templateUrl: 'templates/map.html',
controller: 'MapCtrl'
}
}
})
.state('app.markerClick', {
url: '/markerClick',
view: {
'menuContent': {
//templateUrl: '<h1>what the hello</h1>',
templateUrl: 'templates/testTemplate.html',
controller: 'markerClickCtr'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/map');
});
enter image description here
enter image description here
Try to replace href with ui-sref="app.markerClick"
UI-Router provides ui-sref which allows to link to states. This is different than linking to a normal URL. When using UI-Router you want to link to a state, not a URL.
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/
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.