javascript - 如何让我的导航栏位于每个 HTML 页面的顶部(避免复制相同的代码)

Question

我认为这很简单，我有一个导航栏，其中的选项卡需要显示在我的所有 html 页面上，每个选项卡都有一个 .html 页面。我怎样才能做到这一点，这样我就不必将导航栏代码复制到每个 html 页面中(尽量避免复制代码，因为如果我要更改某些内容，这会很困惑并且需要大量工作)。

我试图在我的项目中避免使用 PHP，我更喜欢 Java 或 AngularJS

这是index.html的相关部分

<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="index.xhtml">Home</a></li>
      <li><a href="maschine.xhtml">Maschinen/Tätigkeiten</a></li>
      <li><a href="person.xhtml">Personen</a></li>
    </ul>   

Answer 1

Angularjs 为您提供了两种不同的解决方案来实现这一目标。

1) 为您的导航栏制定指令 https://docs.angularjs.org/guide/directive

您可以将导航栏的代码放入指令 html 文件中，然后在需要 id 的任何地方使用指令的应答器调用您的导航栏。像这样的东西: <my-nav-bar></my-nav-bar>

2) 使用 Angular ui-rooter我认为这是更好的选择。您将拥有一个带有 <ui-view></ui-view> 的主 html 文件。 。当您更改页面时，仅更改 ui-view 的内容。因此，您必须将导航栏放置在用户界面 View 之外。

这里有一个可以做什么的示例: https://angular-ui.github.io/ui-router/sample/#/about

PS:如果您想尝试此解决方案，请不要忘记将 angular-ui-rooter js 文件添加到您的项目中。

希望这有帮助。

A+