한 페이지 애플리케이션 - 부분 뷰를 기반으로 js 파일을 동적으로 로드합니다.

한 페이지 애플리케이션 - 부분 뷰를 기반으로 js 파일을 동적으로 로드합니다.

저는 이제 막 Angular를 배우기 시작했고 여기서 튜토리얼을 따르기 시작했습니다 - http://docs.angularjs.org/tutorial/step_00

GitHub에서 시드 예시를 다운받았는데 잘 작동합니다.그런데 질문이 있습니다.부분 뷰에서 외부 js 파일을 참조할 필요가 있는 경우 처음에 index.html 파일에 추가할 필요가 있습니까?앱은 가능한 한 희박하게 하고 현재 뷰에 필요한 js 참조만 포함시키고 싶습니다.뷰를 기반으로 js 파일을 동적으로 로드할 수 있습니까?

이건 나한테 효과가 있었어.가장 가벼운 솔루션을 찾는 사람을 위해 게시물을 올려야겠다고 생각했습니다.

페이지의 html 태그에 최상위 컨트롤러가 있고 각 부분 뷰에 보조 컨트롤러가 있습니다.

최상위 컨트롤러에서 다음과 같은 기능을 정의했습니다.

$scope.loadScript = function(url, type, charset) {
    if (type===undefined) type = 'text/javascript';
    if (url) {
        var script = document.querySelector("script[src*='"+url+"']");
        if (!script) {
            var heads = document.getElementsByTagName("head");
            if (heads && heads.length) {
                var head = heads[0];
                if (head) {
                    script = document.createElement('script');
                    script.setAttribute('src', url);
                    script.setAttribute('type', type);
                    if (charset) script.setAttribute('charset', charset);
                    head.appendChild(script);
                }
            }
        }
        return script;
    }
};

따라서 세컨더리 컨트롤러에서는 다음과 같은 호출을 통해 필요한 스크립트를 로드할 수 있습니다.

$scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8');

외부 스크립트에 포함된 개체를 사용할 수 있게 되기까지 약간의 지연이 있으므로 개체를 사용하기 전에 해당 개체의 존재를 확인해야 합니다.

누군가 시간을 절약할 수 있기를 바랍니다.

방금 https://oclazyload.readme.io/에 접속했습니다.개봉 후 바로 사용할 수 있습니다.

bower install oclazyload --save

모듈을 모듈에 로드하고 필요한 모듈을 컨트롤러에 삽입합니다.

var myModule = angular.module('myModule', ['oc.lazyLoad'])
   .controller('myController', ['$scope', '$ocLazyLoad', '$injector',

       function($scope, $ocLazyLoad, $injector) {
           $ocLazyLoad.load(
                   ['myExtraModule.js',
                       'orAnyOtherBowerLibraryCopiedToPublicFolder.js'
                   ])
               .then(function() {
                   // Inject the loaded module
                   var myExraModule = $injector.get('myExtraModule');
               });
       }
   ]);

언급URL : https://stackoverflow.com/questions/15939913/single-page-application-load-js-file-dynamically-based-on-partial-view