Angular JS thowing error even though controller is available
Question
I am new to Angular JS and I am trying some examples... But I get a very weird exception when I try to load my app...
Here is my angular JS code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="JS/Controllers.js"></script>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>Hello {{helloTo.title}} !</h2>
</div>
<div ng-controller="MyController" >
<span ng-show="myData.showIt"></span>
<span ng-hide="myData.showIt"></span>
</div>
</body>
Here is my controller code :
angular.module("myapp", []).controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Test";
} );
angular.module("myapp1", []).controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.showIt = true;
});
Error logged by firebug: Error: [ng:areq] http://errors.angularjs.org/1.2.5/ng/areq?p0=MyController&p1=not%20a%20function%2C%20got%20undefined https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js Line 83
I am using angular js version 1.2.5...
4 answers
solution1
2 2014-11-05 09:07:20
you have two modules, myapp and myapp2. myapp2 has a controller MyController which you are trying to use within the scope of myapp module, which is not possible.
you can define the MyController within myapp module. http://jsfiddle.net/g35tpy5q/1/
var myapp=angular.module("myapp", []);
myapp.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Test";
} );
myapp.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.showIt = true;
});
or inject the myapp2 module inside myapp module http://jsfiddle.net/g35tpy5q/2/
angular.module("myapp2", []).controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.showIt = true;
});
angular.module("myapp", ["myapp2"]).controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Test";
} );
solution2
2 ACCPTED 2014-11-05 09:20:52
You are creating two different angular modules , with one controller each, instead of one single module with two different controllers , which is what you want to do, just change your code to match this syntax:
angular.module("myapp", [])
.controller("HelloController", function($scope) {
// ...
})
.controller("MyController", function($scope) {
// ...
});
Or this one:
var myApp = angular.module("myapp", []);
myApp.controller("HelloController", function($scope) {
// ...
});
myApp.controller("MyController", function($scope) {
// ...
});
solution3
1 2014-11-05 09:01:19
There are 2 issues here.
One, is that you have defined 2 different modules: "myapp" and "myapp1". Perhaps it's just a typo, and you meant for them to be the same.
Then, the second issue is that you are re-defining your module when you use [] for the second time:
angular.module("myapp", [])
This is a module setter .
Instead, use a module getter without the [] :
angular.module("myapp").controller("MyController", ...)
solution4
1 2014-11-05 09:02:58
Below will work. What you have to bare in mind is that everytime you define a new angular.module if you put angular.module('myapp', []) you are defining a new space that has no knowledge of any other module. If you then do angular.module('myapp').controller() that will attach the controller to the original module. Thus is being in its scope.
Notice the ommission of [] when defining the controller. The [] is for dependency injection, but in terms of angular.module defines a completely new module space.
Below is a way to actually properly modularise angular js.
angular.module("myapp.hello", []).controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Test";
} );
angular.module("myapp.my", []).controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.showIt = true;
});
angular.module("myapp", [
'myapp.hello',
'myapp.my']);
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.