AngularJS - 如何将侧菜单html代码放入外部模板文件答案

【问题标题】：AngularJS - how to put side menu html code into external template fileAngularJS - 如何将侧菜单html代码放入外部模板文件
【发布时间】：2015-08-06 23:13:15
【问题描述】：

我是 AngularJS 的新手。到目前为止，我看到的所有示例在基本 index.html 文件中都有 sidemenu html 代码，而不是在模板 html 部分中。我想将sidemenu html（因为它可能会变大）移动到它自己的模板文件中。

到目前为止 index.html 有：

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

然后在 app.js 我有（我知道这是错误的）：

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

我在浏览器控制台中看到部分文件“templates/menu-left.html”正在加载。此外，如果我在我的应用程序中导航到 ..#/menu-left URL，则会出现菜单。但是它应该出现在该位置的所有页面上。

谢谢，

【问题讨论】：

可以使用 ng-include 或创建侧边栏指令。要么让你使用远程模板文件

标签： javascript angularjs ionic-framework ionic

【解决方案1】：

您无需创建单独的路由/状态即可使用外部 HTML 模板。正如@charlietfl 建议的那样，您可以使用 ng-include 来引用外部模板。

在 index.html 中添加这一行

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

ngInclude documentation

menu-left.html 然后可以拥有侧边菜单 HTML。

请注意，使用 ng-include 会导致额外的 HTTP 调用来获取外部模板。尽管为导航栏、侧边菜单等“模块化”HTML 可能很诱人，但您最好将整个 Web 应用程序中可用的核心功能代码放在单个 HTML 文件中，以避免额外 HTTP 请求的成本。

【讨论】：

【解决方案2】：

您可以使用abstract parent state 代替ng-include，并将子模板注入到父模板内的ion-nav-view。

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

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

HTML 文件：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>

【讨论】：