Angular.js Controller Not Working

Question

I'm new to Angular and I'm going through the Intro to Angular videos from the Angular site. My code isn't working and I have no idea why not. I get the error

Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined

Here's my code.

<!DOCTYPE html>

<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
        function MainController($scope) {
            $scope.message = "Controller Example";
        }
    </script>
</body>
</html>

What am I doing wrong?

score 4 · Accepted Answer · edited Sep 10 '15 at 04:33

4

After angular version 1.3 global controller function declaration is disabled

You need to use modularise approach in order to make it work.

You should define angular.module first and then include angular components to it

Demo

angular.module('app', [])
    .controller('MainController', function ($scope) {
        $scope.message = "Controller Example";
    })

Then change ng-app to use that module ng-app="app"

edited Sep 10 '15 at 04:33

Tushar

85,780
21
159
179

answered Sep 10 '15 at 04:26

Pankaj Parkar

134,766
23
234
299

That makes sense. The Intro to Angular video is for version 1.3 I believe. Those videos should really be updated. – Halcyon Sep 10 '15 at 04:38

Bhojendra Rauniyar · Answer 2 · 2015-09-10T04:35:13.297

2

Just defining the function will not be a controller. You need to use like this:

var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
    $scope.message = "Controller Example";
}

And ensure to use myApp in your html like this:

<html lang="en" ng-app="myApp">

edited Sep 10 '15 at 04:35

answered Sep 10 '15 at 04:26

Bhojendra Rauniyar

83,432
35
168
231

Wow, we even chose the same variable names – CollinD Sep 10 '15 at 04:28
@DavidL which param are you talking about? – Bhojendra Rauniyar Sep 10 '15 at 04:29
@BhojendraNepal you should have add controller name first..then the second parameter would be function – Pankaj Parkar Sep 10 '15 at 04:31
@BhojendraNepal See yourself. [Demo](http://codepen.io/anon/pen/eppNKg?editors=101) – Tushar Sep 10 '15 at 04:35
@Tushar I was not understanding. – Bhojendra Rauniyar Sep 10 '15 at 04:36

score 1 · Answer 3 · answered Sep 10 '15 at 04:27

function MainController($scope) {
  $scope.message = "Controller Example";
}

should be something more like

var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
  $scope.message = "Controller Example";
}

And then include an ng-app="myApp" directive in your html.

Salamun Fajri · Answer 4 · 2015-09-10T05:59:48.050

<!DOCTYPE html>
<html lang="en" ng-app="app">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Angular Demo</title>
   <script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

   <script>

    var app = angular.module("app",[])
    .controller('mainController', function($scope) {
      var vm = this;  
      vm.message = "Controller Example";
    })

    </script>
  </head>

  <body ng-controller="mainController as vm">
    <div >
      <p>{{vm.message}}</p>
    </div>
  </body>

</html>

score 0 · Answer 5 · answered Sep 10 '15 at 04:32

This is not how you should create a controller...

First you should create the module and controller in java script

// start angular module (app) definition
angular.module('myApp',[''])
 .controller('MainController', function($scope) {
 $scope.message = "Controller Example";
 });

Now in your HTML

<!DOCTYPE html>

<html lang="en" ng-app='myApp'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>

Now it will start working

I suggest you to go through some tutorials first

http://campus.codeschool.com/courses/shaping-up-with-angular-js/

https://docs.angularjs.org/tutorial

These are some good tutorials

Angular.js Controller Not Working

5 Answers5