Question

目前我正在尝试将现有的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>

如何使用单个控制器（或）多个控制器实现此类部分html文件加载角度路由。保存'invitation-creating.html'页面后，我应该可以转到'invitation-done.html'，但网址应该相同（我不想要这个 - ＆gt; websiteurl / invitation_id）

在操作http://invitify.azurewebsites.net中看到，当您创建邀请时，它将带您到下一页（invitation-done.html），而无需浏览器更改其网址。这是在淘汰赛中实现的，但我也希望在我的Angular应用程序中实现相同的效果。 Knockout代码在github上，供您查看。 https://github.com/scriptstar/KOInvitify

在Angular应用程序中实现此类行为的最佳做法是什么。

请帮忙。感谢。

Answer 1

您可以使用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框架的建议方法）

角度偏

1 个答案: