Issue: [ng:areq] The argument 'HelloController' is not defined as a function, it is displayed as undefined

Question

Issue: [ng:areq] The argument 'HelloController' is not defined as a function, it is displayed as undefined

Struggling to integrate Angular with Django has been quite a challenge for me. After finally managing to make it work, I encountered yet another error. Each time I load the application, the following error message pops up:

Error: [ng:areq] Argument 'GreetingController' is not a function, got undefined

I've explored various solutions on Stack Overflow to no avail.

The snippet of my Angular code saved as app.js is as follows:

var app = angular.module('ABC',['ngRoute', 'ui.bootstrap']).
controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = 'Hola!';
}]);


app.config(function($interpolateProvider, $routeProvider){
    //$interpolateProvider.startSymbol('[[');
    //$interpolateProvider.endSymbol(']]');

    $routeProvider.when('/about', {
            templateUrl: 'views/about.html'
    }).when('/login',{
            templateUrl: '/views/login/login.html'
    }).otherwise({
            redirectTo: '/about'
    });
});

And here's my HTML snippet:

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
            <link rel="stylesheet" href="/assets/js/bower_components/bootstrap/dist/css/bootstrap.css">
            <link rel="stylesheet" href="/assets/style/main.css">
            <link rel="stylesheet" href="/assets/style/container.css">
            <link rel="stylesheet" href="/assets/style/button.css">

            <script src="/assets/js/bower_components/jquery/dist/jquery.js"></script>
            <script src="/assets/js/bower_components/bootstrap/dist/js/bootstrap.js"></script>
            <script src="/assets/js/bower_components/angular/angular.js"></script>
            <script src="/assets/js/bower_components/angular-route/angular-route.js"></script>
            <script src="/assets/js/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
            <script src="/app.js"></script>
            <script src="/views/login/login.js"></script>
    </head>

    <body ng-app="ABC">
            <div class="container-fluid">
                    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
                            <ul class="nav navbar-nav">
                                    <li><a href="#home">Home</a></li>
                                    <li><a href="#login">Login</a></li>
                                    <li><a href="#signup">Sign Up</a></li>
                            </ul>
                    </nav>
            </div>

            <div id="wrap"  ng-controller="GreetingController">
                    <div class="container-fluid" id="main">
                            <ng-view></ng-view>
                    </div>
            </div>

     </body>
</html>

I would greatly appreciate any help in resolving this issue.

Here is the link to the source code.

Thank you in advance.

javascript angularjs django angular-controller

Answer 1

Answer №1

Modified a few elements and added the necessary components like bootstrap, etc. The URL for the file in routeProvider has also been updated. Take a look at the Plunker for more details.

HTML :

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7f70796b727f6c30746d5e2f302a3066">[email protected]</a>" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head> 

  <body>
            <div class="container-fluid">
                    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
                            <ul class="nav navbar-nav">
                                    <li><a href="#home">Home</a></li>
                                    <li><a href="#login">Login</a></li>
                                    <li><a href="#signup">Sign Up</a></li>
                            </ul>
                    </nav>
            </div>

            <div id="wrap"  ng-controller="GreetingController">
                    <div class="container-fluid" id="main">
                            <ng-view></ng-view>
                    </div>
            </div>

     </body>

</html>

Angular code :

var app = angular.module('plunker', ['ngRoute']);

app.controller('GreetingController', function($scope) {
  $scope.greeting = 'Hola!';
});

app.config(['$routeProvider', function($routeProvider) {
    //$interpolateProvider.startSymbol('[[');
    //$interpolateProvider.endSymbol(']]');

    $routeProvider.when('/about', {
            templateUrl: 'about.html'
    }).when('/login',{
            templateUrl: 'login.html'
    }).otherwise({
            redirectTo: '/about'
    });
}]);

Access the live demo on this Plunker link: http://plnkr.co/edit/sHvAOGD2zZVrWMb4NSr8

Answer 2

Modified a few elements and added the necessary components like bootstrap, etc. The URL for the file in routeProvider has also been updated. Take a look at the Plunker for more details.

HTML :

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7f70796b727f6c30746d5e2f302a3066">[email protected]</a>" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head> 

  <body>
            <div class="container-fluid">
                    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
                            <ul class="nav navbar-nav">
                                    <li><a href="#home">Home</a></li>
                                    <li><a href="#login">Login</a></li>
                                    <li><a href="#signup">Sign Up</a></li>
                            </ul>
                    </nav>
            </div>

            <div id="wrap"  ng-controller="GreetingController">
                    <div class="container-fluid" id="main">
                            <ng-view></ng-view>
                    </div>
            </div>

     </body>

</html>

Angular code :

var app = angular.module('plunker', ['ngRoute']);

app.controller('GreetingController', function($scope) {
  $scope.greeting = 'Hola!';
});

app.config(['$routeProvider', function($routeProvider) {
    //$interpolateProvider.startSymbol('[[');
    //$interpolateProvider.endSymbol(']]');

    $routeProvider.when('/about', {
            templateUrl: 'about.html'
    }).when('/login',{
            templateUrl: 'login.html'
    }).otherwise({
            redirectTo: '/about'
    });
}]);

Access the live demo on this Plunker link: http://plnkr.co/edit/sHvAOGD2zZVrWMb4NSr8

Answer 3

Answer №2

Your code isn't executing properly. It might help to move your

<script src="/app.js"></script>

tag to the bottom of the HTML file so that it runs after the DOM elements have been rendered.

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="/assets/js/bower_components/bootstrap/dist/css/bootstrap.css">
      <link rel="stylesheet" href="/assets/style/main.css">
      <link rel="stylesheet" href="/assets/style/container.css">
      <link rel="stylesheet" href="/assets/style/button.css">

      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="/assets/js/bower_components/bootstrap/dist/js/bootstrap.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
    </head>

    <body ng-app="ABC">
      <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#login">Login</a></li>
            <li><a href="#signup">Sign Up</a></li>
          </ul>
        </nav>
      </div>

      <div id="wrap"  ng-controller="GreetingController">
        <div class="container-fluid" id="main">
          <ng-view></ng-view>
        </div>
      </div>

     </body>
</html>

<script>
var app = angular.module('ABC',['ngRoute', 'ui.bootstrap']);

app.controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = 'Hola!';
}]);


app.config(function($interpolateProvider, $routeProvider){
    //$interpolateProvider.startSymbol('[[');
    //$interpolateProvider.endSymbol(']]');

    $routeProvider.when('/about', {
      templateUrl: 'views/about.html'
    }).when('/login',{
      templateUrl: '/views/login/login.html'
    }).otherwise({
      redirectTo: '/about'
    });
});
</script>

<!--script src="/app.js"></script-->
<script src="/views/login/login.js"></script>

Answer 4

Your code isn't executing properly. It might help to move your

<script src="/app.js"></script>

tag to the bottom of the HTML file so that it runs after the DOM elements have been rendered.

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="/assets/js/bower_components/bootstrap/dist/css/bootstrap.css">
      <link rel="stylesheet" href="/assets/style/main.css">
      <link rel="stylesheet" href="/assets/style/container.css">
      <link rel="stylesheet" href="/assets/style/button.css">

      <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="/assets/js/bower_components/bootstrap/dist/js/bootstrap.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
    </head>

    <body ng-app="ABC">
      <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#login">Login</a></li>
            <li><a href="#signup">Sign Up</a></li>
          </ul>
        </nav>
      </div>

      <div id="wrap"  ng-controller="GreetingController">
        <div class="container-fluid" id="main">
          <ng-view></ng-view>
        </div>
      </div>

     </body>
</html>

<script>
var app = angular.module('ABC',['ngRoute', 'ui.bootstrap']);

app.controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = 'Hola!';
}]);


app.config(function($interpolateProvider, $routeProvider){
    //$interpolateProvider.startSymbol('[[');
    //$interpolateProvider.endSymbol(']]');

    $routeProvider.when('/about', {
      templateUrl: 'views/about.html'
    }).when('/login',{
      templateUrl: '/views/login/login.html'
    }).otherwise({
      redirectTo: '/about'
    });
});
</script>

<!--script src="/app.js"></script-->
<script src="/views/login/login.js"></script>

Issue: [ng:areq] The argument 'HelloController' is not defined as a function, it is displayed as undefined

Answer №1

Answer №2

Similar questions

Utilize dynamic global variables in React that are provided during runtime, making them unpredictable during the build process

JavaScript's prototypical inheritance model allows objects to inherit properties and

Having trouble obtaining the serialized Array from a Kendo UI Form

Using a dynamic HTML interface, select from a vast array of over 50,000 values by leveraging the power

Can an HTML DOM object be converted to a JSON string using JSON.stringify in JavaScript?

Tips on concealing modal popup when the page refreshes successfully

Execution of Ajax call fails to occur synchronously

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

"Troubleshooting: Why is my Bootstrap modal window only printing a

Create a regular expression in Javascript that only matches strings that do not contain any periods

Deduce the generic types of conditional return based on object property

Encountering CORS Error while trying to access Guest App in Virtualbox using Vue, Express, and Axios

How do I extract elements from an array?

What could be causing my Node application to give a 404 error when making a POST request?

AngularJS and jQuery UI are two popular front-end frameworks that

The significance of 'this' in an Angular controller

The attempt to decode the string from POST using json_decode failed due to a hang-up in

What is the best way to identify onKeyUp events in AngularJS?

Is JQuery the ultimate solution for creating a dynamic multi-language website?

How can I use jQuery to target and modify multiple elements simultaneously