角部分

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框架，目前在那裏的建議的方法）