Я только начал изучать Angular и после этого учебника здесь http://docs.angularjs.org/tutorial/step_00
Я загрузил пример семени из GitHub, и он отлично работает. У меня есть вопрос: если частичный вид требует ссылки на внешний файл js, нужно ли его добавлять в файл index.html в начале? Я хочу, чтобы приложение было как можно более быстрым и только хотело включить ссылки js, которые необходимы для настоящего представления. Можно ли динамически загружать js файлы на основе представления?
Я думаю, что эта функция не встроена в AngularJS.
Однако вы можете взглянуть на этот проект, который предлагает базовый проект для использования AngularJS с RequireJS для загрузки по требованию требуемых js файлов.
https://github.com/tnajdek/angular-requirejs-seed
Если ваше приложение огромно, оно может быть полезно, иначе оно может быть излишним, потому что только факт использования AngularJS уменьшает количество кода для записи. Лично я загружаю все необходимые скрипты в начале.
Также посмотрите на это сообщение от Браянта Форда (который работает над AngularJS в Google) о создании огромных приложений:
Это просто сработало для меня. Понял, что я разместил его для кого-либо другого, ищущего легчайшее решение.
У меня есть контроллер верхнего уровня на теге html страницы и дополнительный контроллер для каждого частичного представления.
В контроллере верхнего уровня я определил следующую функцию...
$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;
}
};
Итак, во вторичных контроллерах я могу загрузить необходимые скрипты с вызовом вроде следующего...
$scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8');
Там есть небольшая задержка, прежде чем объекты, содержащиеся во внешнем script, будут доступны, поэтому вам нужно будет проверить их существование, прежде чем пытаться их использовать.
Надеюсь, что кто-нибудь кого-нибудь спадет.
Я просто попробовал https://oclazyload.readme.io/. Это работает из коробки.
bower install oclazyload --save
Загрузите его в свой модуль и введите требуемый модуль в контроллер:
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');
});
}
]);
Я действительно разобрался с этим. Это такая боль, что ленивая загрузка не поддерживается по умолчанию в angularjs. В любом случае, здесь есть две ссылки, которые помогли мне решить эту проблему: