AngularJS与JS数组访问代码迁移至独立JS文件后$window调用失效问题

问题排查及解决方法 #

1. 脚本加载顺序错误 #

如果AngularJS核心库的加载顺序晚于你的独立JS文件，代码执行到angular.module时会因为angular对象未定义直接报错，后续控制器逻辑完全不会运行，自然没有console输出。
解决方法：调整HTML中的脚本加载顺序，先加载AngularJS核心文件，再加载你的独立业务JS：

<!-- 先加载AngularJS核心库 -->
<script src="angular.min.js"></script>
<!-- 再加载你的业务JS文件 -->
<script src="你的独立JS文件路径.js"></script>

2. Angular应用未正确引导 #

如果HTML中没有给应用根节点添加ng-app="NameRecorder"属性，Angular不会自动初始化应用，控制器代码不会触发执行。
解决方法：在HTML的应用根节点（如body、div等）添加ng-app声明，同时确保控制器绑定的元素存在：

<body ng-app="NameRecorder">
  <div ng-controller="GenTable">
    <!-- 你的页面渲染逻辑 -->
  </div>
</body>

3. 全局变量未挂载到window对象 #

如果你的独立JS文件是作为ES模块引入（即script标签加了type="module"属性），文件内用var声明的变量只会存在于模块作用域，不会自动挂载到全局window对象上，$window自然读取不到对应值。
解决方法：显式将需要全局访问的变量挂载到window上，修改后的代码如下：

window.FirstName   = ["Mohammad","Alex","Mustafa","Youssef","Ed"];
window.LastName    = ["Boryani","Jones","Safa","Khansa","Snow"];
window.Name = [];
window.IDInc = window.FirstName.length;

// 循环变量显式加let声明，避免严格模式下报错
for(let i=0;i<window.IDInc;i++){
  window.Name.push(window.FirstName[i] + " " + window.LastName[i]);
}

const app = angular.module('NameRecorder', []);
app.controller('GenTable', ['$scope', '$window', function($scope, $window) {
  $scope.names = $window.Name;
  console.log($window.IDInc);
}]);

4. 语法错误导致代码终止运行 #

你原代码中的循环变量i没有加var/let声明，如果JS运行在严格模式下会直接抛出引用错误，终止后续所有代码执行。上述修改后的代码已经补充了let声明，可规避该问题。

你可以按上述顺序逐一排查，优先检查加载顺序和ng-app声明，这两类问题占该场景故障的90%以上。

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