控制器无法识别

Question

我在 script.js 中定义了一个名为 HelloController 的控制器，它在我添加 ngRoute 并进行路由之前工作。显示的错误是

Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.9/$controller/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>

如果有人能提供帮助就太好了，因为我是 angular

的新手

Answer 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 标签内。 i.g.: <div ng-view></div>;
- 当你要声明一个控制器时，你必须调用 angular.module('app')，但是这个调用不能等于对我们的 configuration.js 的主调用（angular.module('app', ['ngRoute']);).在 'app' 之后不要使用块引号，因为这表示您正在再次声明该应用程序；
- 要使用 'ngRoute'，您必须使用 <base href="/"/>。此标记将定义您如何为路由设置初始 URI 值。通常这个值定义为 href 匹配第一个路由； https://docs.angularjs.org/error/$location/nobase
- 在您的 index.html 中，您首先加载 script.js，其中定义了控制器，在您加载 configuration.js 之后，其中声明了 ng -应用程序。 AngularApp 中的主文件。加载这个资源需要注意加载的顺序。随着时间的推移，您第一眼就能认出这一点，但暂时保存此命令以在 index.html;

1° - 依赖项（angular、angular-路由、jQuery 等）；
2° - 定义 angular.module('myApp',[]) 的文件。在你的例子中，configuration.js;
3° - 控制器、服务、配置、过滤器、模块等；

您的配置中存在语法错误：configu(function()...；

对您的应用的推荐AngularJS：

使用 index.html 中的注释定义每个文件的加载区域。示例：

<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>


<script src="example.controller.js"></script>


<script src="example.services.js"></script>

我更喜欢在其他文件中声明我的路由，但这在声明为 app.main;
不要使用嵌套代码声明控制器、服务、路由等。例如在你的 configuration.js:
使用var app = angular.module("myapp");
app.$inject = ['$scope', '$http'];
app.controller('HelloController', function HelloController(...
代替
angular.module('myapp', ['$scope', '$http']).controller(...';
使用服务进行请求。 angular 有服务。建议在此组件中使用 $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;
                        }
                    })
                });
            };

        });
    })();

Answer 2

在你的 script.js 中定义一次 angular 模块 app 然后在任何脚本文件中只需在该模块上注册控制器 app.contoller.

这是一个有效的 Plunker：

https://plnkr.co/edit/uWXnAkbAbJIb7jJEXZTP?p=preview

控制器无法识别

Controller is not recognizing

routing

controller

angularjs

ngroute