AngularJS beginner: ng-controller not working
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.
Answer
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
});