ng:areq error in simple app

Question

I have this very simple Angular example:

<html ng-app>
<head>
  <title>Angular Test</title>
</head>
<body ng-controller='myController'>
  <h1>Angular Test</h1>
  <p>{{hello.text}}</p>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js'></script>
  <script>
    function myController ($scope) {
      $scope.hello = {text : 'Hello World!'};
    }
  </script>
  </body>
</html>

As you can see I'm using Angular from the CDI. Though when I view this in my browser I get the following error:

Error: [ng:areq] http://errors.angularjs.org/1.3.16/ng/areq?p0=myController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:6:417
    at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:19:510)
    at La (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:20:78)
    at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:75:465)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:57:178
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:7:428)
    at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:57:45)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:51:409)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:51:426)

I've literally just started with Angular so this might very well be a very noob mistake.

score 2 · Accepted Answer · answered Jun 20 '15 at 15:11

2

You're using Angular 1.3.16, which means you have to manually register your controller to your app, and don't make it anonymous.

So you need to change this in the javascript code:

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

And define your module like this:

ng-app="myApp"

answered Jun 20 '15 at 15:11

Omri Aharon

16,959
5
40
58

Thank you very much. I'm sure a whole bunch of new guys must run into this and be very confused. – Jun 20 '15 at 15:14
1

@DeanGrobler Myself included at the time :) – Omri Aharon Jun 20 '15 at 15:15

score 0 · Answer 2 · answered Jun 20 '15 at 15:22

check your library location and please put inside head

<html ng-app>
<head>
  <title>Angular Test</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
</head>
<body ng-controller='myController'>
  <h1>Angular Test</h1>
  <p>{{hello.text}}</p>
  <script>
    function myController ($scope) {
      $scope.hello = {text : 'Hello World!'};
    }
  </script>
  </body>
</html>

Plunker: http://plnkr.co/edit/gBUAabtisdHFKxikmjkA?p=preview

ng:areq error in simple app

2 Answers2