0

目前我正在尝试将现有的 Knockout 应用程序迁移到 Angular MEAN 堆栈应用程序。在淘汰赛中，index.html 包含此代码

<% layout('layout') -%>

<div data-bind="ifnot: id">
    <%- partial('partials/invitation-creating.html') %>
</div>

<div data-bind="if: id">
    <%- partial('partials/invitation-done.html') %>
</div>

如何使用单个控制器（或）多个控制器在 Angular 路由中实现这种部分 html 文件加载。保存“invitation-creating.html”页面后，我应该能够转到“invitation-done.html”但 url 应该是相同的（我不想要这个 -> websiteurl/invitation_id）

请参阅实际操作http://invitify.azurewebsites.net，当您创建邀请时，它将带您进入下一页 (invitation-done.html)，而无需浏览器更改其 url。这是在淘汰赛中实现的，但我也想在我的 Angular 应用程序中实现相同的效果。Knockout 代码在 github 上供您更仔细地查看。https://github.com/scriptstar/KOInvitify

在 Angular 应用程序中实现这种行为的最佳实践是什么。

请帮忙。谢谢。

4

1 回答 1

6

您可以使用ng-include获取与部分相同的行为：https ://docs.angularjs.org/api/ng/directive/ngInclude

在你的情况下：

<div ng-if="!id" ng-include="'partials/invitation-creating.html'">
</div>
<div ng-if="id" ng-include="'partials/invitation-done.html'">
</div>

有关类似示例，请参见此 Plunkr：http ://plnkr.co/edit/nih3JG?p=preview

然而，Angular 中建议的方法是定义指令，即自定义标签，不仅为您提供要包含的 HTML，而且还捆绑行为（JavaScript 代码背后）。

从长远来看，我亲自使用过几个 JavaScript 框架和 HTML 的部分/包含等结果是可维护性的噩梦。不过，他们工作得很好，可以快速完成工作。
原因是通常您希望在包含的 HTML 上绑定一些行为。被定义为部分您可能会从不同的地方使用该 HTML，因此，很可能不同的“控制器”（或您的框架中的等价物）将对它们起作用。因此，在开发周期后期对 HTML 进行更改是非常非常困难的。

更好的方法是创建小型自治单元。将您的逻辑和 HTML 捆绑在一起，然后在应用程序的其他位置重用该单元。最初似乎有点开销，但它肯定会得到回报。
（这也是目前所有严肃的 js 框架所建议的方法）

于 2014-11-05T10:00:56.920 回答