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

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

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>

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>

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>

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 !

来源：https://stackoverflow.com/questions/26445262/embed-content-of-a-html-file-to-another-html-page-using-the-ionic-framework

标签

html

overlay

swap

ionic-framework