AngularJS beginner: ng-controller not working

Asked 10/7, 2015 at 16:50 Answered 10/5, 2016 at 1:6

Solved angularjs model-view-controller ng-controller

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.

Riverhead answered 10/7, 2015 at 16:50 Comment(6)

Can you assure me which angular js version are you using ? – Amary 10/7, 2015 at 16:54

what does the error console say? Make sure there isn't an actual line break between Christopher and Grant. – Grimalkin 10/7, 2015 at 16:55

In angular js 1.3 + versions you can't declare global controller. – Amary 10/7, 2015 at 16:57

so the first error is that line break I was talking about in my first comment – Grimalkin 10/7, 2015 at 17:1

Your code is correct. I have run your code with AngularJS v1.2.13. Its working fine. Dont have line break as @Grimalkin said. – Badminton 10/7, 2015 at 17:2

@vish please read the comments. He is using 1.4+ and 1.3+ doesn't allow global controllers so your comment is irrelevant – Grimalkin 10/7, 2015 at 17:3

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
});

Amary answered 10/7, 2015 at 17:0 Comment(0)

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

Deanery answered 10/7, 2015 at 16:59 Comment(0)

-1

Add the controller to the angular application module

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

Lowspirited answered 10/5, 2016 at 1:6 Comment(0)

Recommended topics

Hot tags