Geek Answers Handbook

Ionic Framework - Angular html include

I am building an application with the Ionic Framework. I use 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 the code in 1 html file, then for better control 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 a problem that the panel with the site name no longer works. It does not show the name, and the html content included in it lies at the top under the panel. Maybe because because of the inclusion in the tag div now?

How can i solve this?

+5
source share
3 answers

I solved the problem by having <div ng-include...> inside <ion-view> inside <ion-tab> . Here is a structure you can 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 ..) in <ion-content> templates/tab1.html

 <ion-content> <!--Your Template Content Goes here--> </ion-content>

This structure works like a charm to me.

http://forum.ionicframework.com/t/tabs-and-ng-include/7863/4?u=kousikraj

+11
source

It is old, but the best solution has not been published. I found a solution while I still had this open, so I decided that I would have contributed if anyone else found this. You can simply use the ng-include directive as your own tag

 <ion-slide-box> <ion-slide> <ng-include src="'templates/slide1.html'"></ng-include> </ion-slide> <ion-slide> <ng-include src="'templates/slide2.html'"></ng-include> </ion-slide> <ion-slide> <ng-include src="'templates/slide3.html'"></ng-include> </ion-slide> <ion-slide> <ng-include src="'templates/slide4.html'"></ng-include> </ion-slide> </ion-slide-box>

There is no need for ion viewing in each slide.

+1
source

It works as follows: -template.html files in the / templates folder, remove script tags

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> <title></title> <link data-require=" ionic@1.0.0-beta.1 " data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" /> <link rel="stylesheet" href="style.css" /> <script data-require=" ionic@1.0.0-beta.1 " data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <script src="app.js"></script> <script src="controllers.js"></script> <script src="services.js"></script> </head> <body ng-app="starter" animation="slide-left-right-ios7"> <!-- The nav bar that will be updated as we navigate between views. --> <ion-nav-bar class="bar-stable nav-title-slide-ios7"> <ion-nav-back-button class="button-icon icon ion-chevron-left"> Back </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></ion-nav-view> </body> </html>

App.js:

 // Ionic Starter App, v0.9.20 // angular.module is a global place for creating, registering and retrieving Angular modules // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) // the 2nd parameter is an array of 'requires' // 'starter.services' is found in services.js // 'starter.controllers' is found in controllers.js angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { StatusBar.styleDefault(); }); }) .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 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.dash', { url: '/dash', views: { 'tab-dash': { templateUrl: 'templates/tab-dash.html', controller: 'DashCtrl' } } }) .state('tab.friends', { url: '/friends', views: { 'tab-friends': { templateUrl: 'templates/tab-friends.html', controller: 'FriendsCtrl' } } }) .state('tab.friend-detail', { url: '/friend/:friendId', views: { 'tab-friends': { templateUrl: 'templates/friend-detail.html', controller: 'FriendDetailCtrl' } } }) .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('/tab/dash'); });
-1
source

More articles:


All Articles