Single page application - load js file dynamically based on partial view

问题:

I've just started learning Angular and following the tutorial here - http://docs.angularjs.org/tutorial/step_00

I'm downloaded the seed example from GitHub and it works great. I have a question though - if a partial view requires an external js file to be referenced, does it need to be added to the index.html file at the beginning? I want the app to be as lean as possible and only want to include the js references that are required for the present view. Is it possible to load the js files dynamically based on a view?

回答1:

I think this feature is not built-in with AngularJS.

However you can have a look at this project which offer a base project for using AngularJS with RequireJS to load on demand the required js files.

https://github.com/tnajdek/angular-requirejs-seed

If your application is huge, it might be useful, otherwise it can be overkill because just the fact of using AngularJS reduce the amount of code to be written. Personnally, I load all the necessary scripts at the beginning.

Also have a look at this post from Briant Ford (who's working on AngularJS at Google) about making huge apps:

http://briantford.com/blog/huuuuuge-angular-apps.html

回答2:

This just worked for me. Figured I would post it for anybody else seeking the lightest-weight solution.

I have a top-level controller on the page's html tag, and a secondary controller for each partial view.

In the top-level controller I defined the following function…

$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;     } }; 

So in the secondary controllers I can load the needed scripts with a call like the following…

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

There's a slight delay before the objects contained in the external script are available, so you'll need to verify their existence before attempting to use them.

Hope that saves somebody some time.

回答3:

I just tried the https://oclazyload.readme.io/. It works out of the box.

bower install oclazyload --save 

Load it in your module, and inject the required module in controller:

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');                });        }    ]); 

回答4:

I really broke my mind on this one. It's such a pain that lazy loading is not supported by default in angularjs. Anyway here are two links that helped me solve it:

http://ify.io/lazy-loading-in-angularjs/

http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm

文章来源: Single page application - load js file dynamically based on partial view