Population in Onsen: navigator and tabs
I doubt the confusion between navigator and scoreboard.
Explanation: the main page (main page1) consists of two child pages (tab1 and tab2) that are accessed by tab, while the other pages (pages 2 and 3) are accessible through the navigator. The first tab1 page is activated.
Layout: tab1 and tab2 pages share the same toolbar (top). Page 2 and page 3 have a toolbar with a back button and another button to redirect to the main page tab.
My code is this, but I don't know if this is the correct or better approach:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="styles/app.css"/>
<style>
.item {
padding: 10px;
line-height: 1;
}
</style>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
angular.module('app', ['onsen']);
angular.module('app').controller('AppController', function($scope) {
// functions for AppController
});
angular.module('app').controller('Tab1Controller', function($scope) {
// functions for Tab1Controller
});
angular.module('app').controller('Tab2Controller', function($scope) {
// functions for Tab2Controller
});
angular.module('app').controller('Page2Controller', function($scope) {
// functions for Page2Controller
});
angular.module('app').controller('Page3Controller', function($scope) {
// functions for Page3Controller
});
</script>
</head>
<body ng-app="app" ng-controller="AppController">
<ons-navigator animation="slide" var="app.navi" >
<ons-toolbar>
<div class="left"><ons-toolbar-button ng-click="app.navi.pushPage('page3.html')">Go</ons-toolbar-button></div>
<div class="center">App</div>
<div class="right">
<ons-toolbar-button><ons-icon icon="fa ion-navicon" style="font-size: 32px; width: 1em"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-tabbar position="top">
<ons-tab page="tab1.html" label="Tab1" active="true"></ons-tab>
<ons-tab page="tab2.html" label="Tab2"></ons-tab>
</ons-tabbar>
</ons-navigator>
<ons-template id="tab1.html" >
<ons-page ng-controller="Tab1Controller">
<p>Content tab1</p>
</ons-page>
</ons-template>
<ons-template id="tab2.html">
<ons-scroller>
<p>Content Tab2</p>
<ons-list ng-controller="Tab2Controller">
<ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page2.html')">
<p>Item {{item}}</p>
</ons-list-item>
</ons-list>
<ons-scroller>
</ons-template>
<ons-template id="page2.html">
<ons-page ng-controller="Page2Controller">
<ons-toolbar>
<div class="left">
<ons-back-button></ons-back-button>
<ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
</div>
<div class="center">PAGE2</div>
<div class="right">
<ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-scroller>
<p>Content PAGE2</p>
<ons-list ng-controller="Tab2Controller">
<ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page3.html')">
<p>Item {{item}}</p>
</ons-list-item>
</ons-list>
</ons-scroller>
</ons-page>
</ons-template>
<ons-template id="page3.html">
<ons-page ng-controller="Page3Controller">
<ons-toolbar>
<div class="left">
<ons-back-button></ons-back-button>
<ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
</div>
<div class="center">PAGE3</div>
<div class="right">
<ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button modifier="light" ng-click="app.navi.popPage('page1.html');">Pop</ons-button>
</p>
<p style="text-align: center">
<ons-button modifier="light" ng-click="app.navi.pushPage('page2.html');">Page 2</ons-button>
</p>
</ons-page>
</ons-template>
<ons-template id="popover.html">
<ons-popover direction="up down" cancelable>
<div style="text-align: center; opacity: 0.5;">
<p>This is a popover!</p>
<p><small>Click the background to remove the popover.</small></p>
</div>
</ons-popover>
</ons-template>
</body>
</html>
I hope this is helpful for someone else.
source to share
Since there is no specific question, I will try to clarify the navigation patterns you are using there.
<!-- Navigator as root element -->
<ons-navigator>
<ons-page>
<ons-tabbar>
<ons-tab>...</ons-tab>
<ons-tab>...</ons-tab>
</ons-tabbar>
</ons-page>
</ons-navigator>
You have it ons-navigator
as the root of your application and then you have it ons-tabbar
as the child. This means that when you try to navigate with the parent navbar, you will be clicking another child (pages) on top of the current child (tabs), so you will no longer see the tab (not even the toolbar unless you put a new one on each page) until you won't click it again or delete all of its siblings. Plus, all of your pages will be stored in the same page stack, since you only have one navbar. This means that you cannot separate the Tab1 and Tab2 workflows on two different branches: if you reset ToPage to Tab1, Tab2 will also be reset.
It's perfectly okay if you know about it and this is what you really want to do. It depends on what you need.
<!-- Tab Bar as root element -->
<ons-tabbar>
<ons-tab>
<ons-navigator>...</ons-navigator>
</ons-tab>
<ons-tab>
<ons-navigator>...</ons-navigator>
</ons-tab>
</ons-tabbar>
Another other approach, and perhaps more common, is to have ons-tabbar
as the root of the project and define one ons-navigator
as a child of each ons-tab
where you need further navigation. As is the case , your panel will always be visible , since what you change with the navigators is not all content, but only the content of a specific one ons-tab
. Each tab will have its own workflow, stored in a different page stack, completely independent of the others.
As I said, it really depends on what you need for the application. For example, you might have many tabs for things like "settings", "about", etc., which are only one page views, and then the navigator is just one tab with the real application.
Let me know if your doubts are clarified now!
source to share