Embed content of a html file to another html page using the Ionic framework?

Question

I”m currently creating a website using the Ionic framework that has a sidebar on the left side. Users can click on an item to go to another page of the website. Now I have to copy the code of the sidebar to every page and that's useless and not the way to go.

So my question is if it is possible to "embed" a html page in a specific section of another page. For example I could have my sidebar be "static" and load in a login.html file in a specific div. And having one html file with all the pages would be very hard to maintain and organise.

Is that possible in some kind of way?

EDIT: As requesting, I'm adding the most relevant code I already have

<ion-side-menus>

<!-- Main page-->
<ion-side-menu-content>
    <ion-header-bar class="bar-dark">

        <!-- Knop toggleSidebar -->
        <button class="button button-icon" ng-click="triggerSidebar()">
            <i class="icon ion-navicon"></i>
        </button>

        <h1 class="title">Proof of concept</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row">
            <div class="col" col-50>5 + 8 = </div>
            <div class="col" col-25><input type="number" placeholder="13"></div>
            <div class="col" col-25><button class="button button-small">Controleer</button></div>
        </div>
    </ion-content>
</ion-side-menu-content>

<!-- End Main page -->


<!-- Sidebar -->

<ion-side-menu side="left">
    <ion-header-bar class="bar-dark">
        <h1 class="title">Sidebar</h1>
    </ion-header-bar>
    <ion-content>
            <div class="item item-divider">Settings</div>
            <a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
            <a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
            <a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
        </div>
    </ion-content>
</ion-side-menu>

<!-- End sidebar -->

What I'm trying to reach is, when someone clicks on the "profiles" option, the content of the main page gets switched with content taken from another html file

Yes, it’s possible. You could use iframes, even JavaScript or PHP as well. But what have you coded to achieve this goal? What you describe is painfully simple for basic coders. Maybe your a novice, but this is a coding site; not a “do work for you” site. So what have you done already? — Giacomo1968, Oct 18 '14 at 22:40
I'm using Webstorm and writing html from scratch. I have to say that I use the ionic framework + angularJS (does that matter?) — Matt, Oct 18 '14 at 22:41
You should just put it on every page. Or, if you have a section for persistent code, then put it there. — Drazzah, Oct 18 '14 at 22:43
Added the most relevant code to sketch the situation @JakeGould — Matt, Oct 18 '14 at 22:47
@pianoman99, what if they want to change something string of the base template? If they have 100 HTMLs, that would be a lot of changes, and confusion. — Arturo Torres Sánchez, Oct 18 '14 at 22:48
Your right, he should use persistent code. Or, here's a great way to do it. Host the html somewhere esle and reference it. Like here: http://www.sagehill.net/docbookxsl/InsertExtHtml.html — Drazzah, Oct 18 '14 at 22:51
That's server side, so it's included in the answer I already gave. — Arturo Torres Sánchez, Oct 18 '14 at 22:54
Aren't we all looking to far at the moment? Couldn't this be the solution? http://stackoverflow.com/a/9003363/2015582 — Matt, Oct 18 '14 at 22:56
@ArturoTorresSánchez The other thread fixed my issue. Thanks to everybody involved! But I last question; where exactly can I mark this a duplicatie? I can't seem to find it — Matt, Oct 18 '14 at 23:19
The “flag” link is below the tags, next to “share” and “edit”. — Arturo Torres Sánchez, Oct 18 '14 at 23:24
possible duplicate of [Include another HTML file in a HTML file](http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — Matt, Oct 18 '14 at 23:30

score 1 · Accepted Answer · answered Nov 05 '14 at 15:27

You can solve it using angular UI-routing:

   $stateProvider
        .state("menu", {
            url: "/menu",
            abstract: true,
            templateUrl: "views/menu.html"
        })
        .state('menu.combinedPage1', {
            url: '/combinedPage1',
            views: {
                "EmbeddedContent": {
                    templateUrl: "views/embedded1.html",
                    controller: "EmbeddedController1"
                }
            }
        })
        .state('menu.combinedPage2', {
            url: '/combinedPage2',
            views: {
                "EmbeddedContent": {
                    templateUrl: "views/embedded2.html",
                    controller: "EmbeddedController2"
                }
            }
        })

Here "menu" is abstract state and contains embedded views that controlled by router.

<ion-side-menus>
    <ion-side-menu-content>

        <ion-nav-view name="EmbeddedContent"></ion-nav-view>

    </ion-side-menu-content>
</ion-side-menus>

score 0 · Answer 2 · answered Oct 18 '14 at 23:00

0

You can do it by using frames :) with only html the following code will help

<html>
  <head>
    <title>Multiple Pages</title>
  </head>
  <FRAMESET cols="20%, 80%">
        <FRAME SRC="sidebar.html">
        <FRAME SRC="content.html">
        
  </FRAMESET>
</html>

also you can do it with php like this

#side_bar{
  background-color: red;
  width: 200px;
  height: 100%;
  float: left;
  }

<div id="side_bar">
  <?php
include_once('sidebar.html');
?>
</div>

answered Oct 18 '14 at 23:00

Samer Allahham

66
11

Framesets are deprecated since HTML5. I don't think it's wise to teach new developers how to use them. – Arturo Torres Sánchez Oct 18 '14 at 23:04
You're right bro but he asked for a way with only html and I thought it's not bad to new developers to know all the ways to do something even if it's deprecated and I gave another and more powerful way (php) – Samer Allahham Oct 18 '14 at 23:09

score 0 · Answer 3 · answered Oct 18 '14 at 23:11

You can make a link so when they click on the "profiles" it goes to another page and then you can put the code for your sidebar in a php document and use a php include tag to show it in the new page. See the example below:

sidebarCode.php:

<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
    <h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
        <div class="item item-divider">Settings</div>
        <a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
        <a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
        <a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
    </div>
</ion-content>

The new page:

<!--Specific Did You Want-->
<div>
   <?php include 'sidebarCode.php';?>
</div>

You didn't understand the question , he wants to add an html file in another not a link to move to another file — Samer Allahham, Oct 19 '14 at 00:16
The answer is correct. sidebarCode.php is being included in the new page. — Arturo Torres Sánchez, Oct 19 '14 at 00:25

score 0 · Answer 4 · answered Oct 19 '14 at 04:29

Inside <ion-side-menu-content> you can load scripts via the ui router. So what you can do is when a user clicks on a menu item, you store the page HTML as template using $templatecache and then just reload your view inside <ion-side-menu-content> that will do your job !

Embed content of a html file to another html page using the Ionic framework?

4 Answers4

Linked