모서리 부분

Question

현재 기존 Knockout 응용 프로그램을 각도 MEAN 스택 응용 프로그램으로 마이그레이션하려고합니다. 녹아웃에서 index.html을 내가 단일 컨트롤러 (또는) 여러 컨트롤러와 각도 경로에서와-부분 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> 

가 포함되어 있습니다. 'invitation-creating.html'페이지를 저장하고 나면 'invitation-done.html'에 갈 수 있지만 URL은 동일해야합니다. (나는 이것을 원하지 않습니다 -> websiteurl/invitation_id)

액션 http://invitify.azurewebsites.net에서 초대장을 만들면 브라우저가 URL을 변경하지 않고 다음 페이지 (invitation-done.html)로 이동합니다. 이것은 녹아웃에서 달성했지만 내 각도 애플 리케이션에서 동일한 효과를 달성 싶어요. 더 자세히 볼 수있는 녹아웃 코드가 github에 있습니다. https://github.com/scriptstar/KOInvitify

각도 응용 프로그램에서 이러한 유형의 동작을 수행하는 가장 좋은 방법은 무엇입니까?

도와주세요. 감사. 당신은 파셜과 같은 동작을 얻기 위해 ng-include을 사용할 수 있습니다

Answer 1

는 수행 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 ript 코드 뒤에).

저는 개인적으로 몇 가지 JavaScript 프레임 워크와 부분적으로/HTML 등을 포함하여 장기적으로 유지 관리의 악몽으로 판명되었습니다. 그들은 일을 빨리 끝내기 위해 꽤 잘 작동합니다.
그 이유는 일반적으로 포함 된 HTML에서 일부 동작을 바인딩하기 위해서입니다. 부분적으로 정의 된 것은 아마 다른 장소에서 HTML을 사용하기 때문입니다. 따라서 아마도 다른 "컨트롤러"(또는 프레임 워크에서 이에 상응하는 것)가 작동 할 것입니다. 따라서 나중에 dev에주기에서 HTML을 변경하면 , 실제로는이됩니다.

더 나은 방법은 작고 자율적 인 유닛을 만드는 것입니다. 논리와 HTML을 하나로 묶은 다음 앱의 다른 위치에서 해당 유닛을 재사용하십시오. 그것은 처음에는 약간의 오버 헤드가 될지 모르지만 확실히 갚을 것입니다.
각도 및 각-UI-라우터는 UI 뷰를 사용하여 비슷한 일을 할 수있을 언급한다, 내가하지 않습니다와