如何在AngularJS组件中引入含函数的外部JS文件

别担心，完全可行！而且根本不需要部署服务器，纯静态文件就能跑起来——你之前用RequireJS效果不好，大概率和没部署没关系，而是加载顺序或者作用域的问题没搞对。下面给你一个超精简的实现方案，一步到位：

1. 先搭好文件结构 #

只需要三个文件，放在同一个文件夹里就行：

• index.html（入口页面）
• external.js（存外部函数的文件）
• app.js（AngularJS组件代码）

2. 编写外部JS文件 #

把你的函数挂载到全局的window对象上，这样AngularJS组件就能直接访问到：

// external.js
// 把函数挂载到window，确保全局可访问
window.myExternalFunction = function(input) {
  console.log('外部函数被调用，参数：', input);
  return `处理后的结果：${input}`;
};

3. 编写AngularJS组件 #

在组件的控制器里直接调用全局的外部函数就行：

// app.js
angular.module('myApp', [])
  .component('myTestComponent', {
    template: `
      <div>
        <input type="text" ng-model="$ctrl.inputText">
        <button ng-click="$ctrl.callExternalFn()">调用外部函数</button>
        <p>返回结果：{{$ctrl.result}}</p>
      </div>
    `,
    controller: function() {
      const ctrl = this;
      
      ctrl.callExternalFn = function() {
        // 直接调用全局作用域里的外部函数
        ctrl.result = myExternalFunction(ctrl.inputText);
      };
    }
  });

4. 编写HTML入口文件 #

关键注意加载顺序：必须先加载外部JS，再加载AngularJS，最后加载你的组件代码，这样才能保证组件初始化时，外部函数已经存在：

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS调用外部JS最简示例</title>
</head>
<body>
  <!-- 渲染AngularJS组件 -->
  <my-test-component></my-test-component>

  <!-- 1. 先加载外部JS -->
  <script src="external.js"></script>
  <!-- 2. 再加载AngularJS库 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- 3. 最后加载应用组件代码 -->
  <script src="app.js"></script>
</body>
</html>

和是否部署服务器完全无关！问题出在RequireJS的模块化配置上：

• 如果用RequireJS，你需要把外部JS定义成AMD模块，而不是全局函数
• 同时AngularJS的代码也要通过RequireJS的define或require来加载，确保依赖顺序正确
  但对于你的“最简架构”需求来说，用全局函数的方式比RequireJS简单太多，完全没必要复杂化。

• 直接用浏览器打开index.html（file://协议）就能运行，不需要任何服务器
• 如果是第三方外部库，大部分都会自动暴露全局变量，直接调用就行，不用手动挂载window
• 要是担心全局作用域污染，也可以把外部函数封装成一个简单的命名空间，比如window.MyUtils = { myFunction: ... }，然后在组件里调用MyUtils.myFunction()

内容的提问来源于stack exchange，提问作者Nipuna Weerasinghe