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

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

i”m creating website using ionic framework has sidebar on left side. users can click on item go page of website. have re-create code of sidebar every page , that's useless , not way go.

so question if possible "embed" html page in specific section of page. illustration have sidebar "static" , load in login.html file in specific div. , having 1 html file pages hard maintain , organise.

is possible in kind of way?

edit: requesting, i'm adding relevant code 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 reach is, when clicks on "profiles" option, content of main page gets switched content taken html file

you can solve 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" abstract state , contains embedded views controlled router.

<ion-side-menus> <ion-side-menu-content> <ion-nav-view name="embeddedcontent"></ion-nav-view> </ion-side-menu-content> </ion-side-menus>

html overlay swap ionic-framework