Angular.js Controller Not Working
Question
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.com/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?
5 answers
solution1
4 ACCPTED 2015-09-10 04:26:40
After 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 components to it
angular.module('app', [])
.controller('MainController', function ($scope) {
$scope.message = "Controller Example";
})
Then change ng-app to use that module ng-app="app"
solution2
2 2015-09-10 04:26:47
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">
solution3
1 2015-09-10 04:27:33
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.
solution4
1 2015-09-10 05:02:59
<!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.com/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>
solution5
0 2015-09-10 04:32:53
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.com/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.com/courses/shaping-up-with-angular-js/
https://docs.angularjs.org/tutorial
These are some good tutorials
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.