如何使用AngularJS来加载非角度的JavaScript文件？

是否可以从Angular Controller加载简单的旧的JS或AMD模块？以前我已经用过RequireJS了.

之前我已经在一个相当大的项目中使用了AngularJS和RequireJS.我正在基于MEAN Stack种子开发一个新项目,而不使用requireJS.

我不完全清楚,但Angular有一个加载模块的系统 – 我可以从我的角度控制器中加载一个特定的javascript吗？

有没有办法修改我的module()声明来添加额外的常规javascript文件？

谢谢！

编辑：为了对我在做什么有一点了解,我有一个页面编辑了几种不同的形式.这些都作为一个“表单”保存到我的数据库中.根据表单的类型,不同的字典值映射到不同子视图中的不同字段.我的一些表单有下拉菜单或输入列表.这些是不同的,但是关于“形式”的一切都是以通用的方式处理的.

所以我有这个单一的形式控制器来处理一堆不同的形式,我对结果非常满意.主要问题来自于每个表单都有一组单独的数据,我想避免加载,除非我需要.

我可以通过检查驱动我的ng-include(加载子表单)的下拉菜单来检查加载的形式.

在短期内,我刚刚加载了所有内容,并在我的范围内创建了命名空间来进行区分.

例如$scope.form1和$scope.form2,用于特定于特定表单的数据/规则.我只是尽快不加载我不需要的js.

编辑2：
http://jsfiddle.net/HB7LU/1320/

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!';
  }
};

有很多方法可以实现我在这里展示的概念.想想如何使用它,并写一些指令来执行它.角度使大多数事情很简单.

注意：注入脚本标记是可选的 – 但我非常喜欢直接执行脚本.使用脚本标签时,您可以使用“脚本”部分“资源”下的开发工具来跟踪所有加载的文件.

如何使用AngularJS来加载非角度的JavaScript文件？

猜你在找的Angularjs相关文章