AngularJS添加新控制器后ng-view失效问题求助

Hey there! 这种情况我之前碰到过好几次，大概率是你新加的控制器代码里藏着小问题，导致整个Angular模块初始化失败了，给你几个实用的排查方向：

• 先看控制台报错，这是最快的突破口
  打开浏览器开发者工具（按F12）切换到Console面板，AngularJS遇到错误时会在这里抛出明确的提示——比如语法错误、依赖找不到、命名冲突等。很多时候就是漏写了一个分号、闭合括号，或者引用了不存在的服务，直接导致整个模块停摆，ng-view自然就没法工作了。

• 检查控制器的命名和依赖注入

  • 有没有和现有模块里的控制器、指令、服务重名？AngularJS不允许同一模块内出现同名组件，重名会导致加载异常。
  • 看看控制器里的依赖注入是不是写错了？比如你注入了一个没定义的自定义服务，或者依赖的拼写有误（比如把$scope写成$scrop）。建议用数组式注入写法，比如：

    app.controller('NewCtrl', ['$scope', function($scope) {
        // 控制器逻辑
    }]);
    

    这种写法不仅能避免压缩代码时出问题，还能更清晰地看到依赖项，方便排查。

• 确认脚本加载顺序是否正确
  是不是新加的控制器脚本在Angular核心库或者模块定义脚本之前加载了？比如你先加载了new-controller.js，再加载定义模块的app.js，那控制器会找不到对应的模块，直接报错。正确顺序应该是：

  1. 加载AngularJS核心脚本
  2. 加载定义模块的脚本（比如app.js）
  3. 加载各个控制器、指令的脚本

• 逐步缩小问题范围
  如果还是找不到问题，可以把新加的控制器代码清空，只保留最基础的结构：

  app.controller('NewCtrl', ['$scope', function($scope) {
      // 暂时留空
  }]);
  

  然后慢慢往里面添加代码，每加一部分就刷新页面测试ng-view是否正常，这样就能精准定位到哪一行代码导致的问题。

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