Menu
I'm building an app with the Ionic Framework. I'm using a tab navigation.
angular.module('myapp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.news', {
url: "/news",
views: {
'news-tab': {
templateUrl: "templates/news.html"
}
}
})....
First I wrote all code in 1 html file, then for better oversight I wanted to use html include:
<body>
<!-- Layout Setup -->
<ion-nav-bar class="bar-app"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<div ng-include="'sub/tabs.html'"></div>
</script>
<script id="templates/home.html" type="text/ng-template">
<div ng-include="'sub/home.html'"></div>
</script>
<script id="templates/news.html" type="text/ng-template">
<div ng-include="'sub/news.html'"></div>
</script>
....
home.html:
<ion-view view-title="" hide-nav-bar="true">
<ion-content class="padding app-home" scroll="false">
<div class="app-image">
<img class="full-image" src="img/app-logo.svg">
</div>
<div class="row app-home-buttons">
<div class="col">
<a href="#/tab/news">
<button class="button button-balanced button-block icon-top"><i class='icon ion-ios-paper-outline'></i><span>News</span>
</button>
</a>
</div>
</ion-content>
</ion-view>
news.html:
<ion-view view-title="News" ng-controller="NewsRefreshCtrl">
<ion-content class="">
<ion-refresher on-refresh="doRefresh()">
</ion-refresher>
<div class="list">
<a class="item item-thumbnail-left item-text-wrap" href="#">
<img src="img/tile-icon.png">
<h2>Lorem consetetur sadipscing</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At v</p>
</a>
</a>
</div>
</ion-content>
</ion-view>
Now I have the problem that the bar with the site title isn't working anymore. It doesn't show the title and the included html content is laying on top under the bar. Maybe thats because due to the include it's in a div tag now?
How can I solve this?
839
Building Hybrid Apps With Ionic At its core, it's just a web page running in an native app shell! That means we can use any kind of HTML, CSS, and Javascript we want.
So, What Is Ionic? Simply put, Ionic is a free-to-use framework that allows you to build mobile apps for iOS, Android and Windows Phone, all from one codebase. In other words, Ionic is a tool for cross-platform mobile development.
For adding Ionic to an already existing Angular project, use the Angular CLI's ng add feature. This will add the necessary imports to the @ionic/angular package as well as add the styles needed.
I solved the issue by having <div ng-include...> inside <ion-view> within <ion-tab>. Here is the structure you may have to try
<ion-pane>
<ion-tabs>
<ion-tab title="Tab 1"...>
<ion-view>
<div ng-include src="'templates/tab1.html'"></div>
</ion-view>
</ion-tab>
<ion-tab title="Tab 2"... >
<ion-view>
<div ng-include src="'templates/tab2.html'"></div>
</ion-view>
</ion-tab>
</ion-tabs>
</ion-pane>
I encapsulated the templates (tab1.html..) within <ion-content>
templates/tab1.html
<ion-content>
<!--Your Template Content Goes here-->
</ion-content>
This structure works like a charm for me.
http://forum.ionicframework.com/t/tabs-and-ng-include/7863/4?u=kousikraj
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
