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

3
votes

I am trying to make angular work with Django. With very difficulty I made it work with Django and Angular, but now I am getting one more error. Everytime I load it, I get following error.

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

I tried many other solution links on stack overflow, but none solved my problem.

Following is my angular snippet saved as app.js. 

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 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 really appreciate if someone can look into this and let me know the solution.

Edit: Please find the link to source code.

https://github.com/mikhilraj/bucky

Thanks in advance.

2
javascriptangularjsdjangoangular-controller
@alacex Check the edited question. I have posted the html file as it is now. - Rusty
create a plnkr and share please. It would help us to help you. - roxid
@roxid This code works when I run the same code with node server, it works but not working with django server. So plunker is not helping. I have added source code link in order to provide better insight of error. - Rusty

2 Answers

0
votes

Your script is not getting executed correctly. Can you move your <script src="/app.js"></script> at bottom so that script should be executed once HTML elements are rendered in DOM. 

{% 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>
0
votes

Changed few things.Just add remaining things like bootstrap etc. I have also changed url for the file in routeProvider.Just check out the plunker.

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="[email protected]" 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'
    });
}]);

Here is the plnkr. http://plnkr.co/edit/sHvAOGD2zZVrWMb4NSr8