我在script.js中定义了一个名为HelloController的控制器，它在我添加ngRoute并进行路由之前工作。显示的错误是
错误：[$ controller：ctrlreg] http://errors.angularjs.org/1.6.9/ $控制器/ ctrlreg？P0 = HelloController中
我已经检查了有关此错误的文档，但我无法得到代码实际存在的问题。以下是代码
的script.js
// Code goes herE
(function(){
angular.module('myapp',[])
.controller(['$scope','$http',
function HelloController($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)=>{
//console.log(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;
}
})
});
}
}
]);
})();
configuaration.js
angular.module('myapp',['ngRoute'])
.config(['$routeProvider',function configu($routeProvider) {
// $urlRouterProvider.otherwise("/view1");
console.log("HERE")
$routeProvider.when('/',{
templateUrl:'view1.html',
controller:"HelloController"
});
}
]);
索引文件标题如下
<head>
<link rel="stylesheet"
href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<link rel = "stylesheet"
href =
"https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-
material.min.css">
<script src =
"https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-
material.min.js"></script>
<!-- <script src="bower_components/angular-ui-router/release/angular-
ui-router.min.js"></script> -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-
route.min.js.map"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-
route.js">
</script>
<script src="script.js"></script>
<script src="configuration.js"></script>
</head>
答案 0 :(得分：1)
错误http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=HelloController是因为index.html中文件的加载顺序不正确。我将在完整的解释中提到这一点......
我必须做很多事情。为了工作需要一些东西，另一个是我个人的建议。遵循：
必需品：
您必须在index.html中使用ng-app来定义呈现$ scope内容的位置。您的代码没有此标记;
要使用'ngRoute'，您必须在index.html中添加元素ng-view。是什么时候将呈现您在路线中定义的'templateUrl'。根据你改变你的uri，ng-route将渲染模板。通常是把它放在你的身体里面一个div标签。例如：<div ng-view></div>;
angular.module('app')，但此调用在对我们的configuration.js（angular.module('app', ['ngRoute']);）进行的主调用中不能相等。你不会在'app'之后使用块引号，因为这表示你再次声明应用程序; 要使用'ngRoute'，您必须使用<base href="/"/>。此标记将定义您对路径的初始URI值的方式。通常将此值定义为href匹配第一条路线; https://docs.angularjs.org/error/ $位置/ nobase将
在index.html中，首先加载script.js，其中定义了控制器，并在加载configuration.js之后，其中声明为ng-app。 AngularApp中的主文件。要加载此资源，您需要按负载顺序注意。随着时间的推移，您将能够在第一眼看到这一点时识别出来，但是暂时保存此订单以在index.html中加载资源;
1° - 依赖关系（angular，angular-route，jQuery等）;
2° - 定义angular.module('myApp',[])的文件。在您的情况下，配置.js;
3° - 控制器，服务，配置，过滤器，模块等;
configu(function()...; 推荐您的应用AngularJS：
<!-- Dependencies files --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
``
<!-- App, Routes--> <script src="configuration.js"></script> <script src="script.js"></script> <!-- Controllers -->
<script src="example.controller.js"></script>
<!-- Services -->
<script src="example.services.js"></script>
使用var app = angular.module("myapp");
app.$inject = ['$scope', '$http']; app.controller('HelloController', function HelloController(...
来代替angular.module('myapp', ['$scope', '$http']).controller(...';
使用服务发出请求。角度有服务。建议使用此组件中的$ http https://docs.angularjs.org/api/ng/service;
这是作为魅力的实现工作：D： 的index.html
`
<html ng-app="myapp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="configuration.js"></script>
<script src="script.js"></script>
</head>
<body>
<base href="/" />
<div ng-view></div>
</body>
</html>
`
configuration.js
angular.module('myapp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/view1.html',
controller: 'HelloController'
})
.otherwise({ redirectTo: '/' });
});
的script.js
(function () {
var app = angular.module('myapp');
app.$inject = ['$scope', '$http'];
app.controller('HelloController', function HelloController($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) => {
//console.log(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;
}
})
});
};
});
})();
答案 1 :(得分：1)
在script.js中，定义角度模块app一次，然后在任何脚本文件中只注册该模块app.contoller上的控制器。
这是一个有效的Plunker：