ng-include 与 ui-view 静态内容

Question

我像往常一样通过 angular 填充我的 index.html。我有一个看起来像这样的索引：

<body>
  <nav ng-include="'app/partials/navbar.html'" ng-controller="NavBarController"></nav>
  <main>
    <section ui-view="donate"></section>
    <section ng-include="'app/partials/about.html'"></section>
    <section ui-view="stories"></section>
    <section ng-include="'app/partials/contact.html'"></section>
  </main>
  <footer ng-include="'app/partials/footer.html'"/>
</body>

我的nav、about、contact和<footer>都是静态内容，所以我用了ng-include。捐赠和故事 <section> 是动态的，所以我使用了 ui-view.

问题

在静态内容方面，使用 ui-view 比 ng-include 有什么优势吗？ nav 使用 ui-view 可能会更好我可以在 $stateProvider.state() 中引用 NavBarController，但是静态部分呢？

Answer 1

ui-view 仅在您想利用浏览器历史记录功能时才有用。例如如果你HTML如下

<div class="searchbar">
    <input type="text" ng-model="student.id">
    <button type="button" ng-click="getStudent()">Get Student</button>
</div>
<div class="student-info">
    <div class="student" ui-view="studentview"></div>
</div>

这里有一个 ui-view 是有意义的，因为我们可以将不同的数据（如学生 ID 等）作为参数传递给同一模板并显示不同的内容。此外，浏览器历史记录将帮助我们在此处的不同学生之间导航。

对于像 about 或 footer 这样的内容，尽管它们大部分是静态的，但我会 推荐你使用 ng-include 因为您在这里几乎无法从路由器中获得任何额外的东西。

对于Contact，它可能取决于它包含的内容。如果它需要导航（例如每个国家/地区办公室的一条联系路线），则使用 ui-route 否则坚持使用 ng-include

ng-include 与 ui-view 静态内容

ng-include vs. ui-view for static content

angularjs

angularjs-ng-include

angular-ui-router

问题