2014-01-12 6 views
3

우선, 나는이 문제에 대해 SO 검색하고 검색했다. 내가 본 답변 중 아무 것도 나를 위해 정말 만족스럽지 않습니다. 나는 해결 방법 &을 수동으로 bootstrapping 각도 알고 있고 둘 다 우리를위한 훌륭한 솔루션입니다.Ajax 호출이 완료 될 때까지 각도 컨트롤러 연기

본질적으로 우리의 응용 프로그램은 최상위 수준에, 우리는 잔뜩 인스턴스화

<body ng-controller="applicationController"> 

이되도록 구성되어있다. 그 중 일부는 서버에서 데이터를 가져와 어린이 컨트롤러가 액세스 할 수 있도록 설정하는 것입니다. 따라서 문제는 서버가 응답하기 전에 자식 컨트롤러가 실행되는 경우가 있습니다.

각도 UI의 ui-router를 사용하므로 상태를 이용할 수 있습니다. 그러나 우리가 많은 경로를 가지고 있고 사용자가 그 중 하나에서 앱을 입력 할 수 있기 때문에 해결은 큰 해결책이 아니 었습니다. 지금까지 나의 유일한 해결책은 매우 높은 수준의 부모 상태를 만들어 그 문제를 해결하거나 여러 가지 상태를 해결하는 것입니다. 각도 컨트롤러가 실행되기 전에 아약스 호출을 할 수있는 방법이 있습니까?

답변

2

필자가 생각하기에 가장 우아한 해결책은 둘 다 (앞뒤로 방향을 바꾸지 않고) 두 가지를 결합한 것입니다. 이 문제의 핵심은 각도가 라우트 제공 업체를 통해 컨트롤러 인수에 동기 종속성 주입 만 허용한다는 사실입니다. 그러나 우리는 모든 초기화 작업을 하나의 서비스로 마무리 할 수 ​​있으며 주 컨트롤러가이 작업에 종속되도록 할 수 있습니다.

라이브 데모는 this plunker을 참조하십시오.

+0

나는이 솔루션이 가장 유망한 것으로 보이고 매우 우아하다고 생각한다. 다른 사람에게 제안이 있는지보기 위해이 질문을 며칠 동안 열어 두겠습니다. 감사! – wlingke

2

ng-include (http://docs.angularjs.org/api/ng.directive:ngInclude)는 어떨까요? html 파일에서 모든 하위 컨트롤러 항목을 제거하고 템플릿 파일에 넣습니다. 이제 서버에서 일부 데이터를로드하고 모두 도착한 경우 ng-include src를 설정하십시오.

이 솔루션을 사용하면로드 단계에서 다른 템플릿 파일을 볼 수도 있습니다.

다른 파일에 내용이 인라인 템플릿을 처리 할 수있는 지침 작성 고려할 수 있습니다 원하지 않는 경우 : 당신이 컨트롤러의 인스턴스를 지연 할 경우

<script type="text/ng-template" id="my-awesome-content.html"> 
    ... 
</script> 
+0

음, 이것은 확실히 흥미로운 아이디어입니다. 나는 다른 사람들이 이것을 어떻게 생각하는지 듣고 싶다. 대형 앱의 성능 문제가 있다고 생각하십니까? – wlingke

2

을, 당신은 어떤 시점에서 필요 promises$routeProvider을 활용하십시오.

Misko Hevery (AngularJS와의 창조자가) 여기에 같은 질문 대답 그는 그 패턴에 부합하는 "AngularJS와 튜토리얼 시작"업데이트 Delaying AngularJS route change until model loaded to prevent flicker

을; 그것을 읽을 가치가있다.

나는 몇 달 전에 같은 질문을합니다. 나는 그 원리를 따르기 위해 내 애플 리케이션을 설계했다.

기본적으로 컨트롤러의 인스턴스를 해결하는 앱의 url/entry point를 설정하십시오.

앱이 다른 위치에서 액세스 할 수있는 경우 호출을 해당 진입 점/URL로 리디렉션합니다. init 항목이 해결 된 후 요청 된 URL로 리디렉션하십시오.

+1

흠, 이것은 흥미로운 아이디어입니다. 우리는 각도 ui-router의 부모 상태를 사용하여 비슷한 것을합니다. 우리는 우리가 사용하는 부모 상태의 집합을 가지고 서비스를 통해 인스턴스화합니다. 문제는 우리가 각 진입 점을 개별적으로 다뤄야 만한다고합니다. – wlingke

관련 문제