Angular JS - Controller Undefined

Question

I am a newbie to the AngularJS World. I have this example to define a controller for AngularJS page. I ended up displaying the raw text in the browser when tried to open the page.

I am trying with downloading the angular.js (lib/angular.js) to local filesystem.

The page is as given below:

<!doctype html>
<html ng-app>
    <head>
        <script src="lib/angular.js"></script>
        <script type="text/javascript">
            function MyController($scope) {
                $scope.clock = new Date();
                var updateClock = function() {
                    $scope.clock = new Date();
                };
                setInterval(function() {
                    $scope.$apply(updateClock);
                }, 1000);
                updateClock();
            };
        </script>
    </head>
    <body>
        <div ng-controller="MyController">
            <h1>Hello {{clock}}!</h1>
        </div>
    </body>
</html>

I ended up getting the result as below:

Hello {{clock}}!

In the browser console, I am getting the error log as follows:

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

What am I missing?

Best Regards, Chandra.

controllers need to be explicitly registered with angular.module("myApp", []).controller("MyController", MyController) starting from Angular 1.3 I think. Also, you should use $interval to avoid do $scope.$apply, and you should cancel the interval, otherwise it will continue even after you close the site — New Dev
– New Dev, Commented Feb 11, 2015 at 8:23
The example I used was written in the lower version(1.2) but I have used the higher version of the AngularJS (1.3). I corrected it and implemented the code as given in the accepted answer. Everything works fine now. — Mouli
– Mouli, Commented Feb 11, 2015 at 9:33

V31 · Accepted Answer · 2015-02-11 08:23:43Z

1

You need to initiate an angular module and create a controller using the same.

For Example:

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

app.controller('MyController', function($scope) {
      $scope.clock = new Date();
      var updateClock = function() {
                $scope.clock = new Date();
      };
      setInterval(function() {
          $scope.$apply(updateClock);
      }, 1000);
      updateClock();
});

And then you need to specify the app in the html markup with ng-app="myApp"

So your html will be:

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

  <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.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="MyController">
            <h1>Hello {{clock}}!</h1>
        </div>
  </body>

</html>

Working Plunkr

answered Feb 11, 2015 at 8:23

V31

7,6643 gold badges28 silver badges44 bronze badges

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

1 Comment

Mouli Over a year ago

Thank you @V31, this fixed the issue. And I am using the downloaded the angular.js to the filesystem instead of using the CDN. Thank you again.

Collectives™ on Stack Overflow

Angular JS - Controller Undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related