AngularJS - how to put side menu html code into external template file

I'm new to AngularJS. All examples that I have seen so far, have the sidemenu html code in the base index.html file, and not in the templates html partials. I want to move the sidemenu html (as it could become large) into its own template file.

So far the index.html has:

...
<ion-side-menu side="left">
        <div ui-view='menu-left'></div>
</ion-side-menu>
...

Then in the app.js I have (and I know this is wrong):

$stateProvider
  .state('menu-left', {
      url: '/menu-left',
      views: {
          'menu-left': {
              templateUrl: 'templates/menu-left.html'
          }
      }
  })

I see in the browser console the partial file 'templates/menu-left.html' is being loaded. Also if I navigate to ..#/menu-left URL in my app the menu appears. However it should appear on all pages in that spot.

Thanks,

You don't need to create a separate route/state to make use of external HTML templates. As @charlietfl suggests, you can use ng-include to refer to external templates.

Add this line in your index.html

<body> 
...
<!-- Note the single quotes within double quotes --> 
<div ng-include="'menu-left.html'"></div>
... 
</body>

ngInclude documentation

menu-left.html can then have the side menu HTML.

Note that using ng-include leads to additional HTTP calls to fetch the external template. Tempting as it may be to "modularize" the HTML for the navbar, side-menu etc, you may be better off placing the code of core functionality available throughout the web app in a single HTML file to avoid the costs of additional HTTP requests.

Instead of ng-include you could use an abstract parent state and inject the child templates into the ion-nav-view inside parent template.

.state('menu', {
  url: '/menu',
  abstract: true,
  templateUrl: 'templates/menu.html'
})

.state('menu.child', {
  url: '/child',
  views: {
    'menuContent': {
      templateUrl: 'templates/child.html'
    }
  }
});

HTML files: menu.html

 <ion-side-menus>
      <ion-side-menu>
        <ion-nav-bar>
           <!-- ion nav buttons -->
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
      </ion-side-menu>
    </ion-side-menus>