静态内容的 ng-include 与 ui-view答案

【问题标题】：ng-include vs. ui-view for static content静态内容的 ng-include 与 ui-view
【发布时间】：2023-06-24 00:02:01
【问题描述】：

像往常一样，我正在通过 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>s 是动态的，所以我使用了ui-view。

问题

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

【问题讨论】：

标签： angularjs angular-ui-router angularjs-ng-include

【解决方案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，因为您几乎得不到任何东西额外的路由器在这里。

对于联系方式，它可能取决于它所包含的内容。如果它需要导航（例如每个国家办事处的联系路线），请使用ui-route，否则请坚持使用ng-include

【讨论】：