I'm new to Angular and I'm going through the Intro to Angular videos from the Angular site. My code isn't working and I have no idea why not. I get the error
Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined
Here's my code.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src=".4.5/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.message = "Controller Example";
}
</script>
</body>
</html>
What am I doing wrong?
I'm new to Angular and I'm going through the Intro to Angular videos from the Angular site. My code isn't working and I have no idea why not. I get the error
Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined
Here's my code.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.message = "Controller Example";
}
</script>
</body>
</html>
What am I doing wrong?
Share Improve this question edited Sep 10, 2015 at 4:58 Pankaj Parkar 136k23 gold badges240 silver badges303 bronze badges asked Sep 10, 2015 at 4:23 HalcyonHalcyon 15k17 gold badges73 silver badges100 bronze badges5 Answers
Reset to default 4After angular version 1.3 global controller function declaration is disabled
You need to use modularise approach in order to make it work.
You should define angular.module first and then include angular ponents to it
Demo
angular.module('app', [])
.controller('MainController', function ($scope) {
$scope.message = "Controller Example";
})
Then change ng-app to use that module ng-app="app"
Just defining the function will not be a controller. You need to use like this:
var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
$scope.message = "Controller Example";
}
And ensure to use myApp in your html like this:
<html lang="en" ng-app="myApp">
function MainController($scope) {
$scope.message = "Controller Example";
}
should be something more like
var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
$scope.message = "Controller Example";
}
And then include an ng-app="myApp" directive in your html.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Angular Demo</title>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module("app",[])
.controller('mainController', function($scope) {
var vm = this;
vm.message = "Controller Example";
})
</script>
</head>
<body ng-controller="mainController as vm">
<div >
<p>{{vm.message}}</p>
</div>
</body>
</html>
This is not how you should create a controller...
First you should create the module and controller in java script
// start angular module (app) definition
angular.module('myApp',[''])
.controller('MainController', function($scope) {
$scope.message = "Controller Example";
});
Now in your HTML
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
Now it will start working
I suggest you to go through some tutorials first
http://campus.codeschool./courses/shaping-up-with-angular-js/
https://docs.angularjs/tutorial
These are some good tutorials