如何使用AngularJS来加载非角度的JavaScript文件？
|
是否可以从Angular Controller加载简单的旧的JS或AMD模块？以前我已经用过RequireJS了.
之前我已经在一个相当大的项目中使用了AngularJS和RequireJS.我正在基于MEAN Stack种子开发一个新项目,而不使用requireJS. 我不完全清楚,但Angular有一个加载模块的系统 – 我可以从我的角度控制器中加载一个特定的javascript吗？ 有没有办法修改我的module()声明来添加额外的常规javascript文件？ 谢谢！ 编辑：为了对我在做什么有一点了解,我有一个页面编辑了几种不同的形式.这些都作为一个“表单”保存到我的数据库中.根据表单的类型,不同的字典值映射到不同子视图中的不同字段.我的一些表单有下拉菜单或输入列表.这些是不同的,但是关于“形式”的一切都是以通用的方式处理的. 所以我有这个单一的形式控制器来处理一堆不同的形式,我对结果非常满意.主要问题来自于每个表单都有一组单独的数据,我想避免加载,除非我需要. 我可以通过检查驱动我的ng-include(加载子表单)的下拉菜单来检查加载的形式. 在短期内,我刚刚加载了所有内容,并在我的范围内创建了命名空间来进行区分. 例如$scope.form1和$scope.form2,用于特定于特定表单的数据/规则.我只是尽快不加载我不需要的js. 编辑2： function MyCtrl($scope) {
$scope.doSomething = function()
{
//I'm used to wrapping with e.g require('jquery..... here,can I do the same thing with angular?
alert(" I need to run a jquery function here...");
var xml = $(someblock);
};
}
我已经把我正在谈论的小提琴放在一起了.我想加载任意JS,根据我的控制器中的某些路径,只有当我需要它们. 基本上,我有一些较大的命名空间,我想要加载取决于许多选择之一选择,这将是昂贵的,只是加载它们全部.
好的,我评论了我的代码,以便它应该解释一切.如果还有其他问题,请告知我.这是您的意见中进一步解释的问题的解决方案.
Live demo here (click).
标记： <!DOCTYPE html> <html ng-app="myApp" ng-controller="myCtrl"> <head> </head> <body> <button ng-click="load()">Load Foo</button> <!-- I'm using this to bootstrap the lazy loaded script --> <section ng-repeat="item in loaded" lazy="item"></section> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <script src="script.js"></script> </body> </html> JavaScript的： var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
//array of things to load
$scope.lazyThings = [
{directive:'my-foo-directive',file:'foo.js'}
];
$scope.loaded = [];
$scope.load = function() {
var loadIndex = $scope.loaded.length;
if ($scope.lazyThings[loadIndex]) {
$scope.loaded.push($scope.lazyThings[loadIndex]);
}
}
});
app.factory('myService',function($http) {
return {
getJs: function(path) {
return $http.get(path).then(function(response) {
deferred.resolve(response.data);
});
}
}
});
//this adds an attribute to kick off the directive
//for whatever script was lazy loaded
app.directive('lazy',function($compile,$q,myService) {
var directiveReturn = {
restrict: 'A',scope: {
lazy: '='
},link: function(scope,element) {
myService.getJs(scope.lazy.file).then(function(data) {
return addScript(scope.lazy.file,data,scope);
}).then(function() {
var $span = angular.element('<span></span>').attr(scope.lazy.directive,'');
$compile($span)(scope);
element.append($span);
});
}
}
var scriptPromises = {};
function addScript(file,js,scope) {
if (!scriptPromises[file]) { //if this controller hasn't already been loaded
var deferred = $q.defer();
//cache promise)
scriptPromises[file] = deferred.promise;
//inject js into a script tag
var script = document.createElement('script');
script.src = 'data:text/javascript,' + encodeURI(js);
script.onload = function() {
//now the script is ready for use,resolve promise to add the script's directive element
scope.$apply(deferred.resolve());
};
document.body.appendChild(script);
return deferred.promise;
}
else { //this script has been loaded before
return scriptPromises[loadFile]; //return the resolved promise from cache
}
}
return directiveReturn;
});
app.directive('myFooDirective',function() {
return {
restrict: 'A',element) {
//put the logic from your lazy loaded "foo.js" script here
element.text(foo.someFunction());
}
}
});
示例懒加载脚本： var foo = {
someFunction: function() {
return 'I am data from a lazy loaded js function!';
}
};
有很多方法可以实现我在这里展示的概念.想想如何使用它,并写一些指令来执行它.角度使大多数事情很简单. 注意：注入脚本标记是可选的 – 但我非常喜欢直接执行脚本.使用脚本标签时,您可以使用“脚本”部分“资源”下的开发工具来跟踪所有加载的文件. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |