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>

Using plain HTML, no, you can't. However, this can be done using technologies such as PHP, ASP.NET or Ruby on Rails, all of which run server side. It can also be done with Javascript, to some extent.

EDIT: A Javascript implementation

template.html

<head>
    <title>Webpage</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="page1.html">Page 1</a></li>
            <li><a href="page2.html">Page 2</a></li>
        </ul>
    </nav>
    %%%INSERTCONTENTHERE%%%
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</body>

page1.html

<html>
<article>
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
       deserunt mollit anim id est laborum
    </p>
</article>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    var thisPage = $("article")[0].outerHTML;
    $.get("template.html", function(data) {
        data = data.replace("%%%INSERTCONTENTHERE%%%", thisPage);
        $("html")[0].innerHTML = data;
    });
</script>
</html>

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 !