Angular.js Controller Not Working

Asked 10/9, 2015 at 4:23 Answered 10/9, 2015 at 5:2

Solved javascript html angularjs angularjs-controller angularjs-module

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?

Avocado answered 10/9, 2015 at 4:23 Comment(0)

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"

Am answered 10/9, 2015 at 4:26 Comment(1)

That makes sense. The Intro to Angular video is for version 1.3 I believe. Those videos should really be updated. – Avocado 10/9, 2015 at 4:38

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

Barkentine answered 10/9, 2015 at 4:26 Comment(5)

Wow, we even chose the same variable names – Crittenden 10/9, 2015 at 4:28

@DavidL which param are you talking about? – Barkentine 10/9, 2015 at 4:29

@BhojendraNepal you should have add controller name first..then the second parameter would be function – Am 10/9, 2015 at 4:31

@BhojendraNepal See yourself. Demo – Saphena 10/9, 2015 at 4:35

@Saphena I was not understanding. – Barkentine 10/9, 2015 at 4:36

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.

Crittenden answered 10/9, 2015 at 4:27 Comment(0)

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

Loo answered 10/9, 2015 at 5:2 Comment(0)

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

Choiseul answered 10/9, 2015 at 4:32 Comment(0)

Recommended topics

Hot tags