I'm using tabset view in one of my pages.I have divided each tab into each html pages..and I'm loading them as templates using ui-sref.
<div class="white-bg animated fadeIn">
<div class="row s-t-xs">
<div class="col-xs-10">
<div class="tabs-container">
<tabset class="tabs-left">
<tab id="tab1" heading="Job Preferences" ui-sref="user.education.jobs">
<div ng-include="'views/user/jobstab.html'"></div>
</tab>
<tab id="tab2" heading="Experience / Project Summary" ui-sref="user.education.experience">
<div ng-include="'views/user/experience.html'"></div>
</tab>
<tab id="tab3" heading="Educations / Certifications / Awards" ui-sref="user.education.certificate">
<div ng-include="'views/user/certificate.html'"></div>
</tab>
</tabset>
</div>
</div>
</div>
It is working. I can load the three templates clicking on the tabs in home page.
but I have a button in each html page which on clicked should activate the state of the next tab...
<div class="form-group">
<div class="col-md-10 col-sm-offset-9">
<button class="btn btn-primary" type="submit" ui-sref="user.education.experience">Save & Next</button>
</div>
</div>
i.e if i click the above button it should activate the 'experience' tab.
I can see that the url in the address bar is changing when i click the button but not the view.
here's my stateprovider
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "views/common/content_user_navigation.html",
})
.state('landing', {
url: "/landing",
templateUrl: "views/landing.html",
data: { pageTitle: 'Awarded Me Home', specialClass: 'landing-page' }
})
.state('login', {
url: "/login",
templateUrl: "views/user/login.html",
data: { pageTitle: 'Login' }
})
.state('user.profile', {
url: "/profile",
templateUrl: "views/user/user_profile.html",
})
.state('user.education', {
url: "/education",
templateUrl: "views/user/education1.html",
})
.state('user.education.jobs', {
url: "/jobs",
templateUrl: "views/user/jobstab.html",
data: { pageTitle: 'Job Preferences' },
})
.state('user.education.experience', {
url: "/experience",
templateUrl: "views/user/experience.html",
data: { pageTitle: 'Experience' },
})
.state('user.education.certificate', {
url: "/certificate",
templateUrl: "views/user/certificate.html",
data: { pageTitle: 'Education' },
})
Any idea about the problem?
Related
Using angular-ui router with lazyload on Angular 1.5:
My JS code is like:
$stateProvider
.state('app', {
url: "/",
views: {
'#': {
templateUrl: 'layout.html',
controller: 'AppCtrl'
},
'sidebar#app': { templateUrl: 'app/modules/sidebar/views/sidebar.html' },
'header#app': { templateUrl: 'app/modules/header/views/header.html' },
'main#app': { templateUrl: 'app/modules/home/views/home.html' },
'footer#app': { templateUrl: 'app/modules/footer/views/footer.html' }
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('general');
RequireTranslations('sidebar');
RequireTranslations('home');
RequireTranslations('footer');
RequireTranslations('header');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['ui-bootstrap']).then(
function() {
return $ocLazyLoad.load(['app/shared/controllers/AppCtrl.js']);
}
);
}
]
}
})
.state('app.shares', {
url: "shares",
views: {
'main#app': {
controller: 'ShareCtrl',
templateUrl: "app/modules/shares/views/shares.html",
},
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('shares');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['app/modules/shares/controllers/ShareCtrl.js']);
}
]
}
})
.state('app.portfolio', {
url: "portfolio",
views: {
'main#app': {
controller: 'PortfCtrl',
templateUrl: "app/modules/portfolio/views/portfolio.html",
},
'tabs#app.portfolio': {
controller: 'TitleCtrl',
templateUrl: "app/modules/titlegraph/views/title.html",
}
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('portfolio');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['app/modules/portfolio/controllers/PortfCtrl.js', 'app/modules/titlegraph/controllers/TitleCtrl.js']);
}
]
}
})
index.html:
<body id="mainbody" lang="{{currentLanguage}}">
<div class="text-center preloader" ng-show="loader">
<span>Loading...</span>
</div>
<!-- <div class="text-center preloader" ng-show="transLoader">
<span>Initialize language...</span>
</div> -->
<div ui-view></div>
<!-- end #container -->
<!-- <script id="ft-script" src="assets/js/dist.js"></script> -->
</body>
layout.html:
<div id="wrapper" ng-class="wrapper" class="wrapper">
<div ui-view="sidebar"></div>
<div id="page-content-wrapper">
<div ui-view="header"></div>
<!-- main app content ui-view include -->
<div ui-view="main"></div>
<div ui-view="footer"></div>
</div>
</div>
portfolio.html:
<div class="portfolio">
<uib-tabset>
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>{{'pwc.st.portfolio.title' | translate}}</h2>
<button ui-sref="app.shares" class="orange-btn prt-btn">{{'pwc.st.portfolio.btn' | translate}}</button>
</div>
<div class="col-xs-6">
<!-- {{'pwc.st.portfolio.tab.title1' | translate}} -->
<div ui-view="tabs"></div>
</div>
</div>
</div>
</uib-tabset>
</div>
The problem is I can't get the title html, being render inside portfolio.html. what possibly I'm doing wrong?
Tnks for the help.
I am using Ionic 1.3, and I have built a side menu app.
In on of my page, I want to have Tabs to display 3 different pages.
Here is my code (app.js) :
//MAIN
.state('app', {
url: "/app",
abstract: true,
templateUrl: "views/app/side-menu.html",
controller: 'AppCtrl'
})
//PROFIL
.state('app.profil', {
url: "/profil",
abstract: true,
views: {
'menuContent': {
templateUrl: "views/app/profil/tabs.html",
}
}
})
//PROFIL TAB 1
.state('app.profil.tab1', {
url: "/tab1",
views: {
'tabProfilContent': {
templateUrl: "views/app/profil/tab1.html",
controller: 'ProfilCtrl'
}
}
})
And here's my tabs.html view :
<ion-view class="profile-view">
<ion-nav-title>
<span>Votre profil</span>
</ion-nav-title>
<ion-header>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item" ui-sref="app.profil.tab1">
Tab 1
</a>
<a class="tab-item" ui-sref="app.profil.tab2">
Tab 2
</a>
<a class="tab-item" ui-sref="app.profil.tab3">
Tab 3
</a>
</div>
</div>
</ion-header>
<ion-nav-view name="tabProfilContent"></ion-nav-view>
</ion-view>
It works, but, is there a way to set the status of tab ? The tabs are not active while I change Tab. Is this the correct way to achieve it ?
I have top level menu, and then I have left menus, which will be refreshed based on the selected top level menu. I am able to create that link, but as soon as I select the left menu, it goes blank as can be seen when selecting HOME.
At this time only HOME is wired up Route1 & Route2 is not wired up.
Also here is the Plunker for it
http://plnkr.co/edit/Jwow4VtNsSfMMcpv6qaa?p=preview
How do I prevent resetting/reloading of left menu on selection? I also want to keep highlighted the clicked left menu.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="index">Quick Start</a>
<ul class="nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="route1">Route 1</a></li>
<li><a ui-sref="route2">Route 2</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well" ui-view="LeftMenu"></div>
</div>
<div class="span6">
<div class="well" ui-view="Content"></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"LeftMenu": {
template: '<ul><li><a ui-sref="LeftMenuMenu1">Index-Left Menu1</a></li><li><a ui-sref="LeftMenuMenu2">Index-Left Menu2</a></li><li><a ui-sref="LeftMenuMenu3">Index-Left Menu3</a></li></ul>'
},
"Content": {
template: "LeftMenu index selected"
}
}
})
.state('LeftMenuMenu1', {
views:{
"Content": {
template: "LeftMenu.Menu1 selected"
}
}
})
.state('LeftMenuMenu2', {
views: {
"Content": {
template: "LeftMenu.Menu2 selected"
}
}
})
.state('LeftMenuMenu3', {
url: "",
views: {
"Content": {
template: "LeftMenu.Menu3 selected"
}
}
})
.state('route1', {
url: "/route1",
views: {
"LeftMenu": {
template: '<ul><li><a ui-sref="Route1.Menu1">Route1-Left Menu1</a></li><li><a ui-sref="Route1.Menu2">Route1-Left Menu2</a></li><li><a ui-sref="Route1.Menu3">Route1-Left Menu3</a></li></ul>'
},
"viewB": {
template: "route1.viewB"
}
}
})
.state('route2', {
url: "/route2",
views: {
"LeftMenu": {
template:'<ul><li>Route2-Left Menu1</li><li>Route2-Left Menu2</li><li>Route2-Left Menu3</li></ul>'
},
"viewB": {
template: "route2.viewB"
}
}
})
});
</script>
</body>
</html>
I think what you would want to do is to work with substates, rather than only root states. In each root state you are then able to set the left menu options.
Consider the below example where index is the root state where we set the left menu and set where we want the sub states to be rendered in the view. Each substate(index.LeftMenuMenu1, index.LeftMenuMenu2, index.LeftMenuMenu3), will then be rendered where ever we placed the <div ui-view=content></div> element.
$stateProvider
//Root state
.state('index', {
url: "",
views: {
//Set left side bar
"LeftMenu": {
template: '<ul><li><a ui-sref="index.LeftMenuMenu1">Index-Left Menu1</a></li><li><a ui-sref="index.LeftMenuMenu2">Index-Left Menu2</a></li><li><a ui-sref="index.LeftMenuMenu3">Index-Left Menu3</a></li></ul>'
},
//Each substate will live here
"Content": {
template: "<div ui-view></div>"
}
}
})
//substates
.state('index.LeftMenuMenu1', {
template: "LeftMenu.Menu1 selected"
})
.state('index.LeftMenuMenu2', {
template: "LeftMenu.Menu2 selected"
})
.state('index.LeftMenuMenu3', {
template: "LeftMenu.Menu3 selected"
})
Then you reuse this pattern for the other sections on your page.
$stateProvider
...
//Root state route 1
.state('route1', {
url: "/route1",
views: {
"LeftMenu": {
template: 'Route 1 menu options..'
},
"Content": {
template: "<div ui-view></div>"
}
}
})
.state('route1.LeftMenuMenu1', {
template: "LeftMenu.Menu1 selected"
})
.state('route1.LeftMenuMenu2', {
template: "LeftMenu.Menu2 selected"
})
//Root state route 2
.state('route2', {
url: "/route2",
views: {
"LeftMenu": {
template: 'Route 2 menu options..'
},
"Content": {
template: "<div ui-view></div>"
}
}
})
.state('route2.LeftMenuMenu1', {
template: "LeftMenu.Menu1 selected"
})
.state('route2.LeftMenuMenu2', {
template: "LeftMenu.Menu2 selected"
})
Updated plunker
However, is your case with the left menu is that you will only change the links and the view will be the same, I would recommend to user another pattern. Probably having a menu service that servers the menu options. And the for each root state you can use the onEnter property to trigger the menu options to update.
My project has the file home, page1, page2.
My home page has a different header layout than the rest of my pages. So, it is a separate html file. page1 and page 2 is using ui routing to load in the content of the page, but the header and footer are the same.
My Question is: if I am on the home page and click btn 1. how do I get it to load in the content of page1? (It will load index.html, but no content of btn1.)
I'm not sure if passing an id to the index.js is a solution and I'm not sure how to even do that. Would it make more sense to just make the entire thing a SPA?
My home.html with the buttons:
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" href="index.html" class="button my_btn1">Page1</a>
<a type="text/html" href="index.html" class="button my_btn2">Page2</a>
My idex.html:
<body>
<div class="container" ng-app="app">
<header ng-include="'html/header.html'"></header>
<div ui-view></div>
<footer ng-include="'html/footer.html'"></footer>
</div>
</body>
<script src="vendors/angular/angular.js"></script>
<script src="vendors/angular-ui-router/release/angular-ui-router.js </script>
<script src="scripts/index.js"></script>
my header.html:
<div id="headerLinks">
<a type="text/html" href="home.html" class="button home_btn">Home</a>
<a type="text/html" ui-sref="page1" class="button my_btn1">Page1</a>
<a type="text/html" ui-sref="page2" class="button my_btn2">Page2</a>
</div>
</div>
my index.js:
var app = angular.module('app', ['ui.router']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('Page1', {
url: 'Page1',
templateUrl: 'Page1.html',
controller: 'Page1Ctrl'
})
.state('Page2', {
url: 'Page2',
templateUrl: 'Page2.html',
controller: 'Page2Ctrl'
})
}])
I"m kinda confused by what I was asking now that I look at it. I believe I was asking how to build a router with multiple pages. I got that to work. if this doesn't help, I'll see if I can find a resource or explain it better.
import angular-ui-router.
<script src="vendors/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>
This is what my index.js file now looks like. it has multiply views which allow for different header or content or footer or whatever.
var app = angular.module('app', [
'ui.router',
'ctrls'
]);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider, $state) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/home',
views: {
'header': {
templateUrl: 'html/headerHome.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'home.html',
//controller: 'ContentController'
}
}
})
.state('page1', {
url: '/page1',
views: {
'header': {
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content': {
templateUrl: 'page1.html',
controller: 'page1Ctrl'
}
}
})
.state('page2', {
url: '/page1',
views:{
'header':{
templateUrl: 'html/header.html',
controller: 'headCtrl'
},
'content':{
templateUrl: 'page2.html',
controller: 'page2Ctrl'
}
}
})
Within the Ionic Framework, you can setup tabs. The pages within the tabs can easily transition using a slide-left-right or some other type of transition. This makes the application feel smooth and thought-out.
The issue that I have is that the pages associated with each tab, once clicked from the tab menu, do not transition at all, there is just boom: a page.
I found a pen on codepen (link to codepen demo) that can replicate this effect as I want it (to some degree), but I cannot replicate it in any scenario, much less the Ionic rc0 (1.0) version.
The codepen code uses an animation that seems to not work elsewhere:
<ion-nav-view animation="slide-left-right"></ion-nav-view>
Please assist.
I haven't tried to get that exact example working, but I achieved a similar effect in one of my apps by giving all the tabs the same view name:
app.js
$stateProvider
.state('signin', {
url: "/sign-in",
templateUrl: "sign-in.html",
controller: 'SignInCtrl'
})
.state('forgotpassword', {
url: "/forgot-password",
templateUrl: "forgot-password.html"
})
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'tab-view': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'tab-view': {
templateUrl: "facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'tab-view': {
templateUrl: "facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'tab-view': {
templateUrl: "about.html"
}
}
})
tabs.html
<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="slide-left-right">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="tab-view"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
<ion-nav-view name="tab-view"></ion-nav-view>
</ion-tab>
</ion-tabs>
Notice the name "tab-view" for each state and again as the name attribute on the ion-nav-view in each tab.
This helped me to find a solution https://github.com/driftyco/ionic/issues/2997 . The trick is to load all tabs in single view. You can't use ion-tabs directive to achieve that, you you will have to create your tab container using regular html:
<ion-view title="Tabs Controller">
<!-- All tabs are going to load here -->
<ion-nav-view name="menuContent"></ion-nav-view>
<!-- TABS -->
<div class="tabs-stable tabs-icon-top tabs-bottom tabs-standard">
<div class="tab-nav tabs">
<a class="tab-item" ng-click="goTabForums()" ng-class="{ active : settings.isTab1}">
<i class="icon bb-ios-forums"></i>
<span translate="TABS.FORUMS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabGroups()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-forums"></i>
<span translate="TABS.GROUPS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabTopics()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-topics"></i>
<span translate="TABS.TOPICS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabNotifications()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-notifications"></i>
<span translate="TABS.NOTIFICATIONS_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabProfile()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-my-profile"></i>
<span translate="TABS.MY_PROFILE_TAB"></span>
</a>
<a class="tab-item" ng-click="goTabMore()" ng-class="{ active : settings.isTab2 }">
<i class="icon bb-ios-more"></i>
<span translate="TABS.MORE_TAB"></span>
</a>
</div>
</div>
your tabs controller should look like this:
.controller('tabsCtrl', function($scope, $ionicConfig, $state) {
$scope.goTabForums = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.forums');
}
$scope.goTabGroups = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.groups');
}
$scope.goTabTopics = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.topics');
}
$scope.goTabNotifications = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.notifications');
}
$scope.goTabProfile = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.profile');
}
$scope.goTabMore = function(){
$ionicConfig.views.transition('platform');
$state.go('tabsController.more');
}})
And finally routs:
$stateProvider
.state('tabsController.forums', {
url: '/forums',
views: {
'menuContent': {
templateUrl: 'templates/forums.html',
controller: 'forumsCtrl'
}
}})
.state('tabsController.topics', {
url: '/topics',
views: {
'menuContent': {
templateUrl: 'templates/topics.html',
controller: 'topicsCtrl'
}
}})