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?

Tushar · Accepted Answer · 2015-09-10 04:33:17Z

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, 2015 at 4:33

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Sep 10, 2015 at 4:26

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Halcyon Over a year ago

That makes sense. The Intro to Angular video is for version 1.3 I believe. Those videos should really be updated.

Bhojendra Rauniyar · Accepted Answer · 2015-09-10 04:35:13Z

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, 2015 at 4:35

answered Sep 10, 2015 at 4:26

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

5 Comments

CollinD Over a year ago

Wow, we even chose the same variable names

Bhojendra Rauniyar Over a year ago

@DavidL which param are you talking about?

Pankaj Parkar Over a year ago

@BhojendraNepal you should have add controller name first..then the second parameter would be function

Tushar Over a year ago

@BhojendraNepal See yourself. Demo

Bhojendra Rauniyar Over a year ago

@Tushar I was not understanding.

CollinD · Accepted Answer · 2015-09-10 04:27:33Z

1

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.

answered Sep 10, 2015 at 4:27

CollinD

7,6032 gold badges25 silver badges47 bronze badges

Comments

Salamun Fajri · Accepted Answer · 2015-09-10 05:59:48Z

1

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

edited Sep 10, 2015 at 5:59

answered Sep 10, 2015 at 5:02

Salamun Fajri

211 silver badge2 bronze badges

Comments

Sumodh S · Accepted Answer · 2015-09-10 04:32:53Z

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

Collectives™ on Stack Overflow

Angular.js Controller Not Working

5 Answers 5

1 Comment

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related