角部分

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'，但url应该是相同的（我不想这个 - > 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

你的情况：http://plnkr.co/edit/nih3JG?p=preview

的建议的方法：

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

一个类似的例子来看看这个Plunkr在Angular中是定义指令，也就是定制标签，它不仅可以让你包含HTML，还可以捆绑行为（JavaSc后面的代码）。

我已经亲自处理了几个JavaScript框架和部分/包括HTML等，这在长远看来是一个可维护性的噩梦。不过，他们工作得很好，可以快速完成任务。
原因是通常你想绑定你的HTML中的一些行为。被定义为一个部分，你可能会使用来自不同地方的HTML，因此，很可能不同的“控制器”（或框架中的等价物）将对它们起作用。因此，稍后在开发周期中对HTML进行更改实际上是，确实是很难。

更好的方法是创建小型自治单元。将您的逻辑和HTML捆绑在一起，然后在应用程序的其他位置重新使用该单元。起初它可能看起来很小，但它肯定会带来回报。
（这也是所有严重的js框架，目前在那里的建议的方法）