AngularJS - динамическая загрузка внешних JS на основе маршрутов

Ответ 1

Если я правильно понимаю, вам нужно загрузить конкретные сценарии для каждого представления? Я делюсь этим фрагментом из личного проекта, который использует ocLazyLoader плагин, который загружает модули по требованию.

var myApp = angular.module("myApp", [
"ui.router", 
"oc.lazyLoad",  
]); 

тогда в вашей маршрутизации вы можете загрузить динамические файлы JS/CSS соответственно, в этом примере я загружаю зависимости плагина UI Select

myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

$stateProvider

  // State
    .state('demo', {
        url: "/demo.html",
        templateUrl: "views/demo.html",
        data: {pageTitle: 'demo page title'},
        controller: "GeneralController",
        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'ui.select',
 // add UI select css / js for this state
                    files: [
                        'css/ui-select/select.min.css', 
                        'js/ui-select/select.min.js'
                    ] 
                }, {
                    name: 'myApp',
                    files: [
                        'js/controllers/GeneralController.js'
                    ] 
                }]);
            }]
        }
    })

Ответ 2

Если вы знакомы с Grunt:

https://github.com/ericclemmons/grunt-angular-templates

Используйте Grunt и вышеуказанную задачу сборки для создания одного .js из всех представлений. Включите прослушиватель задач наблюдения за всеми html файлами в каталоге представлений. Всякий раз, когда делается изменение в отношении частичных представлений, создается запись "$ templateCache" со всем html в файле и URL-адрес для псевдонима кеша. Ваши маршруты будут указывать на частичные представления таким же образом, но html файлы не обязательно должны присутствовать. Только файл .js с шаблонами. Красота заключается в том, что он загружается один раз и доступен на стороне клиента для всего сеанса. Это сокращает количество HTTP-звонков, и ваш трафик может быть уменьшен только на вызовы веб-сервисов.

Это пример шаблона из ссылки github, выше:

angular.module('app').run(["$templateCache", function($templateCache) {
$templateCache.put("home.html",
// contents for home.html ...
);
...
$templateCache.put("src/app/templates/button.html",
// contents for button.html
);
}]);

Если вы не знакомы с Grunt

Проверьте это. Это довольно бесценно для автоматизации сборки, минимизации, конкатенации, транспиляции и т.д.

http://gruntjs.com/

Ответ 3

Если ваше приложение не является МАССИВНЫМ, вы должны ДЕЙСТВИТЕЛЬНО избегать подачи небольших файлов js по отдельности. Это заметно замедлит ваше приложение, даже если вы должны найти способ лениво извлекать файлы по мере необходимости, как вы предлагаете в своем вопросе.

Гораздо лучший способ сделать это (и способ, используемый и предложенный командой AngularJS) состоит в том, чтобы иметь ПРОЦЕСС BUILD (вы должны использовать grunt для этого) объединить все ваши файлы javascript и обслуживать их как единый Файл app.js. Таким образом, вы можете поддерживать организованную базу кода с таким количеством крошечных js файлов, сколько хотите, но уменьшите выбор script до одного запроса.

Ответ 4

Как установить OCLazyLoad.

1. Скачайте ocLazyLoad.js здесь

Его можно найти в папке "dist" в репозитории git. Вы также можете установить его с помощью bower install oclazyload или npm install oclazyload.

2. Добавьте модуль oc.lazyLoad в ваше приложение:

var myApp = angular.module("MyApp", ["oc.lazyLoad"]);

3. Загружайте свои JS файлы по запросу на основе маршрутов:

    myApp.controller("MyCtrl", function($ocLazyLoad){
       $ocLazyLoad.load('testModule.js');
    }});`

С помощью $ocLazyLoad вы можете загружать модули angular, но если вы хотите загрузить любой компонент (контроллеры/службы/фильтры/...) без определения нового модуля, это вполне возможно (просто убедитесь, что вы определяете это компонент в существующем модуле).

Существует несколько способов использовать $ocLazyLoad для загрузки ваших файлов, просто выберите тот, который вы предпочитаете.

Также не забывайте, что если вы хотите начать работу, а документов недостаточно, см. примеры в папке "примеры"!

Быстрый старт

Ответ 5

Я не уверен, как это работает в стандартном Angular, однако, вы можете использовать Angular-UI-Router:

Контроллеры создаются по мере необходимости, когда создаются соответствующие им области, т.е. Когда пользователь вручную переходит к состоянию через URL, $ stateProvider загружает правильный шаблон в представление, а затем привязывает контроллер к области действия шаблона.

https://github.com/angular-ui/ui-router/wiki

Ответ 6

RequireJS может быть действительно полезным в этом случае. Вы можете объявлять зависимости ваших JS файлов с помощью RequireJS.

Вы можете отправить этот простой учебник.

Ответ 7

Я думаю, что лучший способ - использовать RequireJS, как упоминалось здесь Это делает смысл использовать Require.js с Angular.js? Это полностью разрешено, и это позволит вам достичь того, что вы пытаетесь.

вот пример кода

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