角度偏

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>

如何使用单个控制器(或)多个控制器实现这种带有Angular路径的部分html文件加载.保存'invitation-creating.html'页面后,我应该可以转到'invitation-done.html',但网址应该相同(我不想要这个 - > websiteurl/invitation_id)

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

在Angular应用程序中实现此类行为的最佳实践是什么.

请帮忙.谢谢.

Answer 1

您可以使用ng-include与partials相同的行为: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

该然而,在角度建议的方法是定义指令,即,自定义标签,不仅让你的HTML包括但还束的行为(JavaScript代码后面).

我个人使用过几个JavaScript框架,而HTML的部分/包含等等从长远来看是一个可维护性的噩梦.不过,它们可以很好地完成任务.
原因是通常您希望在包含的HTML上绑定某些行为.被定义为部分你可能会使用来自不同地方的HTML,因此,很可能不同的"控制器"(或框架中的等价物)会对它们起作用.因此,在开发周期后期对HTML进行更改确实非常困难.

更好的方法是创建小型自治单元.将您的逻辑和HTML捆绑在一起,然后在应用程序的其他位置重用该单元.最初看起来似乎是一个轻微的开销,但它绝对是值得的.
(这也是目前所有严肃的js框架的建议方法)