2012-09-21 4 views
8

일부 내 경로에는 외부 JS의 기능이 필요합니다. 해당 JS는 특정 경로에서만 필요하므로 (예 : /upload은 사진 업로드에 JS가 필요하고 /photos은 라이트 박스 용 JS가 필요하고 /funny에는 애니메이션 용 JS가 필요함) 한 번에 모두로드하지 않으려합니다.AngularJS 컨트롤러 중 하나에서 외부 JavaScript 지연로드

외부 JavaScript를 지연로드하는 가장 좋은 방법은 무엇입니까?

그 노선 (예를 들어, 사용자가 다음 /upload에 갈 수 /photos 다음 /upload 다시) 여러 번 액세스 할 수 있습니다

답변

2

내가 경로의 "결의"방법을 사용하고 다음과 같은 경우를 처리하기 위해 알고있는 유일한 방법. 이 메소드는 경로 컨트롤러가 인스턴스화되기 전에로드 될 종속성을 정의하는 데 사용할 수 있습니다. 이 메소드의 가능한 다른 반환 유형 중 하나는 약속입니다. 따라서 이것을 사용하여 외부 JavaScript 코드를 비동기 적으로로드하고 외부 스크립트를로드하자마자 해결되는 약속을 반환 할 수 있습니다.

이 문서는 여기에서 확인할 수 있습니다. "언제"섹션에 https://docs.angularjs.org/api/ngRoute/provider/$routeProvider.

2

@ alex3683의 대답은 아마도 올바른 AngularJS 방식이지만 개념을 이해하지 못하므로 대신 jQuery의 getScript()을 사용합니다. 그래서 커피 스크립트에서 :

yourModule.factory 'foo', -> 
    $.getScript 'https://script-to-load', -> 
     # whatever you want to do once the script is loaded 

그냥 컨트롤러에서 호출하십시오. AngularJS 서비스는 게으르며 싱글 톤이기 때문에 스크립트를 한 번만로드합니다.

3

Alex와 마찬가지로 컨트롤러 및 지시문과 같은 AngularJS 산출물을 게으른로드하는 경우 모듈 API 대신 관련 공급자를 사용해야합니다. 응용 프로그램이 부트 스트랩 된 후에 모듈 API를 사용하여 등록 된 인공물은 응용 프로그램에서 사용할 수 없습니다. 예를 들어, 내가 블로그 게시물을 작성했습니다

angular.module('app').controller('SomeLazyController', function($scope) 
{ 
    $scope.key = '...'; 
}); 

대신의

$controllerProvider.register('SomeLazyController', function($scope) 
{ 
    $scope.key = '...'; 
}); 

이 ... 사용하는 방법뿐만 아니라이 자세히 ... 이런 게으른 컨트롤러를 정의하는 것 ' Alex가 말하는 AngularJS에서 느린 로딩을 구현하는 'resolve'메쏘드입니다. http://ify.io/lazy-loading-in-angularjs/

관련 문제