Controller is not recognizing

Issue

I have a controller defined in script.js called HelloController which was working before i added the ngRoute and made to route. The error that shows is

Error: [$controller:ctrlreg]
http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=HelloController

I have checked the documentations about this error, but i couldn’t get what is the problem actually with the code. the following is the code

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"
        });
     }      
    ]);

index file header is as follows

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

would be nice if someone could help because i’m new to angular

Solution

The error http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=HelloController is because the order of load the files in your index.html is incorrect. I’ll mention this in my full explanation…

Have so many things that i’ll must do. Some things is required in order to work, and another is my personal recommendation. Follow:

  • Required Things:

    • You must use ng-app inside your index.html to define where will render the content of your $scope. Your code doesn’t had this tag;

    • To use ‘ngRoute’ you must add the element ng-view inside your index.html. Is in it that when will be render the ‘templateUrl’ which you define in your routes. According you change your uri, the ng-route will render the templates inside it. The usual is put this inside your body inside a div tag. i.g.: <div ng-view></div>;

    • When you will declare a controller you must make the call to angular.module('app'), but this call can’t be equal in the main call that is done to our configuration.js (angular.module('app', ['ngRoute']);). You doesn’t use block quotes after ‘app’, because this represent that you are declaring again the app;
    • To use ‘ngRoute’ you must use <base href="/"/>. This tag will define how will be you initial URI value to your routes. Usual this value is defined to href match the first routes; https://docs.angularjs.org/error/$location/nobase

    • Inside your index.html you are loading firstly the script.js, where is defined the controller and after your are loading the configuration.js, where is declared the ng-app. The main file in your AngularApp. To load this resource, you need pay attention in the order of the load. With time you will be able to recognize this in your first look, but for while save this order to load your resources inside index.html;

1° – Dependencies (angular, angular-route, jQuery, etc);
2° – The file where is defined the angular.module('myApp',[]). In your case, the configuration.js;
3° – Controllers, Services, Configuration, Filters, Modules, etc;

  • Inside your config there is a syntax error: configu(function()...;

Recommendation for your app AngularJS:

  • Use comments inside your index.html to define where is the load area to each file. example:
    <!-- 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>

  • I prefer declare my routes in other file, but this is possible in the same file that is declared the app.main;
  • Don’t declare controllers, services, routes, etc using nested codes. For example in your configuration.js:
  • Use var app = angular.module("myapp");
    app.$inject = ['$scope', '$http'];
    app.controller('HelloController', function HelloController(...
    instead
    angular.module('myapp', ['$scope', '$http']).controller(...';

  • Use service to make request. The angular have the services. The recommendation is use $http in this component https://docs.angularjs.org/api/ng/service;

This is implementaion work as a charm 😀 :
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;
                        }
                    })
                });
            };

        });
    })();


Answered By – João Paulo França

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.