AngularJS beginner: ng-controller not working

Question

I'm just trying to get my head around the basics of AngularJS. I tried writing a simple MVC app, but the controller doesn't seem to be working. The file can find the angular lib just find, I already tested that by excluding 'ng-controller'.

<!DOCTYPE html>
<html ng-app>
<head>
    <script src='js/lib/angular.js'></script>
    <script>
        // controller
        function MyFirstCtrl($scope) {
            // model
            var employees = ['Christopher Grant', 'Monica Grant', 'Christopher
            Grant', 'Jennifer Grant'];

            $scope.ourEmployees = employees;
        }
    </script>
</head>
<body ng-controller='MyFirstCtrl'>
    <!-- view -->
    <h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>

EDIT: The error log says the following:

Uncaught SyntaxError: Unexpected token ILLEGAL , line 9
Uncaught SyntaxError: Unexpected token { , line 19
Error: [ng:areq] Argument 'MyFirstCtrl' is not a function, got undefined

EDIT2: I changed the code to this:

<!DOCTYPE html>
<html ng-app='MVCExample'>
<head>
    <script src='js/lib/angular.js'></script>
    <script>
        var app = angular.module('MVCExample', []);

        // controller
        app.controller("MyFirstCtrl", function($scope) {

            // model
            var employees = ['Christopher Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];

            $scope.ourEmployees = employees;
        });
    </script>
</head>
<body ng-controller='MyFirstCtrl'>
    <!-- view -->
    <h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>

It also turned out that the 'employees' array that I had was illegal since I had one string entry split into two lines. The above works. The beginner book I am using must be outdated, which is unfortunate.

what does the error console say? Make sure there isn't an actual line break between `Christopher` and `Grant`. — Ronnie, Jul 10 '15 at 16:55
In angular js 1.3 + versions you can't declare global controller. — Vineet, Jul 10 '15 at 16:57
so the first error is that line break I was talking about in my first comment — Ronnie, Jul 10 '15 at 17:01
Your code is correct. I have run your code with AngularJS v1.2.13. Its working fine. Dont have line break as @Ronnie said. — Vish, Jul 10 '15 at 17:02
@vish please read the comments. He is using 1.4+ and 1.3+ doesn't allow global controllers so your comment is irrelevant — Ronnie, Jul 10 '15 at 17:03

score 11 · Accepted Answer · edited Jul 23 '15 at 18:20

11

If you're using angularjs 1.3+ versions then you can not declare global controller like above you're doing.

You should initialize like below.

<div ng-app="appname" ng-controller="MyFirstCtrl">
var app = angular.module('appname', []);
app.controller('MyFirstCtrl',function(){
   //controller code here
});

edited Jul 23 '15 at 18:20

Pankaj Parkar

134,766
23
234
299

answered Jul 10 '15 at 17:00

Vineet

4,525
3
23
42

score 2 · Answer 2 · answered Jul 10 '15 at 16:59

I don't see how you are initialising the angularjs app, don't know if that is already included in the js file you have linked, but in principle, you should have something like this:

var app = angular.module("appName", []).controller("ControllerName", function ($scope){
  //your controller code here
});

And then have in your HTML code something like:

<html ng-app="appName">

score -1 · Answer 3 · edited May 10 '16 at 02:02

-1

Add the controller to the angular application module

.module('LogIn')
.controller('LoginController', LoginController)

edited May 10 '16 at 02:02

Mogsdad

44,709
21
151
275

answered May 10 '16 at 01:06

Hrsk

1

AngularJS beginner: ng-controller not working

3 Answers3

Linked

Related