Наилучшая практика для включения скриптов в угловые шаблоны?

Question

Наилучшая практика для включения скриптов в угловые шаблоны?

0

У меня есть 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 в заголовок. Каков наилучший способ сделать это? Похоже, что гораздо проще включать скрипты внутри шаблонов.

ischnmn 27 июнь 2015, в 15:09

Источник

Теги:

javascript

jquery

angularjs

3 ответа

0

Я использую простую директиву для этого (здесь:

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>

Georg Moser 17 окт. 2017, в 13:04

0

Если вы хотите включить 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']);
                    }]
            }
        })
});

Ronak59 27 июнь 2015, в 11:17

Ещё вопросы

Amreesh Tyagi · Accepted Answer · 2015-06-27T11-20-00.000Z

Вы можете использовать любую библиотеку ленивого загрузчика (по требованию), такую как requireJS, ocLazyLoad.

Я успешно реализовал ocLazyLoad в одном из наших корпоративных приложений, потому что он предоставляет множество полезных функций, если вы разрабатываете модульное приложение для одиночной страницы:

Легко реализуется. Вы можете ленить загрузить любой ресурс в любом месте приложения
Зависимости автоматически загружаются
Отладчик дружественный (без кода eval)
Может загружать любую клиентскую сторону resouce, например js/css/json/html
Совместимость с AngularJS 1.2.x/1.3.x/1.4.x
Вы также можете загрузить любой ресурс внутри службы, заводской, директивы. См. Пример
Разрешите любой ресурс перед выполнением какого-либо состояния, если вы используете библиотеку ui.router для маршрутизации. См. Пример
Вы также можете использовать ленивый ресурс загрузки в.config() любого модуля. См. Пример
Он также дает вам функциональность регистрации событий загрузки модуля.

Все ссылки взяты с официального сайта ocLazyLoad