У меня есть Angular SPA с несколькими вкладками, которые обслуживаются шаблонами. Для каждой из этих вкладок требуются разные сценарии (как локальные, так и CDN), поэтому я бы хотел только загрузить сценарии, когда это необходимо, т.е. мне нужно будет включить их внутри самих шаблонов (или связанных с ними контроллеров).
До сих пор я пробовал такой подход:
// Start template
<data-ng-include src="http://maps.googleapis.com/maps/api/js"></data-ng-include>
// Rest of stuff
// End template
Кажется, это не работает. Да, я включил jQuery в заголовок. Каков наилучший способ сделать это? Похоже, что гораздо проще включать скрипты внутри шаблонов.
Вы можете использовать любую библиотеку ленивого загрузчика (по требованию), такую как requireJS, ocLazyLoad.
Я успешно реализовал ocLazyLoad в одном из наших корпоративных приложений, потому что он предоставляет множество полезных функций, если вы разрабатываете модульное приложение для одиночной страницы:
Все ссылки взяты с официального сайта ocLazyLoad
Я использую простую директиву для этого (здесь:
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);
}
};
}
Использование будет примерно таким:
<add-script src="script" type="application/javascript"></add-script>
Если вы хотите включить JS. Я бы сказал, пожалуйста, используйте:
cLazyLoad JS
Вот пример:
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']);
}]
}
})
});