在Angular模板中包含脚本的最佳实践？

Question

I have an Angular SPA with several tabs, which are served by templates. Each of these tabs requires different scripts (both local and CDN), so I'd only like to load scripts when needed, ie I will need to include them inside the templates (or associated controllers) themselves.

So far, I've tried this approach:

// Start template
<data-ng-include src="http://maps.googleapis.com/maps/api/js"></data-ng-include>
// Rest of stuff
// End template

This doesn't seem to be working. Yes, I have jQuery included in the header. What is the best way to go about this? Seems like it should be much simpler to include scripts inside templates.

Answer 1

You can use any of the lazy loader (on demand loader) library like requireJS, ocLazyLoad .

I have successfully implemented ocLazyLoad in one of our enterprise application, because it provide lots of usefull features if you are developing modular Single Page Application:

• Easy to implement. You can lazy load any resource anywhere inside your application
• Dependencies are automatically loaded
• Debugger friendly (no eval code)
• Can load any client side resouce like js/css/json/html
• Compatible with AngularJS 1.2.x/1.3.x/1.4.x
• You can also load any resource inside service, factory, directive also. See example
• Resolve any resource before executing any state if you are using ui.router library for routing. See example
• You can also lazy load resource in .config() of any module. See example
• It also gives you the functionalty of logging module loading events.

All references are taken from official website of ocLazyLoad

Answer 2

If you want to include JS. I would tell you , please use :

cLazyLoad JS

Here is example:

var myapp = angular.module('myApp', ['oc.lazyLoad']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
        .state('home', {
            url: '/home',
            template: '<div ui-view class="ngslide"></div>',
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                        return $ocLazyLoad.load([js/jquery.main.min.js','js/ie10-viewport-bug-workaround.js']);
                    }]
            }
        })
});

Answer 3

I use a simple directive for this (here :

interface AddScriptDirectiveAttributes extends IAttributes {
  type: string;
  src: string;
}

export function addScript(): IDirective {
  return {
    restrict: 'E',
    link: function (scope: IScope, element: JQuery, attrs: AddScriptDirectiveAttributes) {
      let script = document.createElement('script');
      if (attrs.type) {
        script.type = attrs.type;
      }
      script.src = attrs.src;
      document.body.appendChild(script);
    }
  };
}

Usage would be something like this:

<add-script src="script" type="application/javascript"></add-script>