AngularJS添加ngRoute后HelloController无法识别问题求助

这个报错本质是Angular找不到你定义的HelloController，咱们一步步排查修复：

1. 修复模块重复定义的核心问题 #

你在两个文件里重复创建了myapp模块，这会直接覆盖第一个文件里定义的控制器：

• 在script.js里，你用angular.module('myapp',[])创建了一个空依赖的模块
• 在configuration.js里，又用angular.module('myapp',['ngRoute'])重新创建模块，这会完全替换掉之前的模块，导致HelloController丢失

修复方案：
只在一个地方创建模块，另一个地方获取已存在的模块。修改script.js的模块定义，添加ngRoute依赖：

(function(){
// 一次性创建带ngRoute依赖的模块
angular.module('myapp',['ngRoute'])
// 修复控制器的注册写法
.controller('HelloController', ['$scope','$http', function($scope,$http){
$scope.helloTo = "angular";
$scope.hide = true;
$scope.search = (NameToSearch)=>{
$http.get("https://api.github.com/users/"+NameToSearch).then((response)=>{
console.log(response);
$scope.data=response.data;
console.log($scope.data.repos_url);
$http.get($scope.data.repos_url).then((resp)=>{
$scope.repos=resp.data;
if(resp.data){
console.log("hide scope")
$scope.hide=false;
}
console.log(resp);
}).then(()=>{
if($scope.repos){
$scope.hide= false;
}
})
});
}
}]);
})();

然后修改configuration.js，获取已创建的模块（去掉数组参数）：

// 用不带[]的写法，获取已存在的myapp模块
angular.module('myapp')
.config(['$routeProvider',function configu($routeProvider) {
console.log("HERE")
$routeProvider.when('/',{
templateUrl:'view1.html',
controller:"HelloController"
});
}]);

2. 修正控制器的注册格式 #

你之前的控制器定义格式错误，AngularJS数组式依赖注入的正确写法是：
controller('控制器名称', ['依赖1','依赖2', 执行函数])
你之前把函数名放在了函数内部，而非作为第一个参数，导致Angular无法识别控制器的名称，上面的代码已经同步修复了这个问题。

3. 修复脚本引用的冗余问题 #

你在头部错误引用了angular-route.min.js.map（这是源码映射文件，不需要单独引用），还重复加载了路由脚本，修改后的头部引用如下：

<head>
 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
 <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
 
 <!-- 加载顺序：核心Angular → 路由插件 → 第三方组件 → 自定义脚本 -->
 <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
 <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
 
 <script src="script.js"></script>
 <script src="configuration.js"></script>
</head>

额外小提示 #

• 箭头函数()=>在AngularJS 1.x中可以使用，但要注意this的指向问题，如果后续遇到上下文相关的bug，可以换成普通函数function(){}
• 确保view1.html文件存在，且里面的模板内容正确绑定了HelloController的作用域变量

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