AngularJS can't find my controller
Question
I know this is a common problem but I haven't been able to find a solution by reading through previously asked questions.
I'm actually getting two errors but the first one is about angular not being able to find my controller.
http://errors.angularjs.org/1.4.2/ $injector/nomod?p0=myApp.controllers
My directory structure looks like the following:
.
└── static
├── index.html
├── js
│ ├── app.js
│ └── controllers.js
├── lib
│ └── angular-ui-router.min.js
└── partials
├── view1.html
└── view2.html
My index file looks like the following:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Hello AngularJS</title>
</head>
<body>
<div ui-view></div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
My app.js file looks like the following:
(function(angular) {
var app = angular.module('myApp', ['ui.router', 'myApp.controllers']);
app.config(function($stateProvider) {
$stateProvider.state('view1', {
url: '/view1',
templateUrl: 'partials/view1.html',
controller: 'View1Controller'
}).state('view2', {
url: '/view2',
templateUrl: 'partials/view2.html',
controller: 'View2Controller'
});
}).run(function($state) {
$state.go('view2');
});
})(angular);
My controller.js file looks like the following:
(function(angular) {
var app = angular.module('myApp.controllers');
app.controller('View1Controller', function($scope) {
$scope.data = 'my view 1';
});
app.controller('View2Controller', function($scope) {
$scope.data = 'my view 2';
});
})(angular);
Also a second error which might be related.
As stated above angular is unable to find my controller. Does anyone have a clue about what I'm doing wrong? Please let me know if I need to paste more code.
I've shared the code on github in case someone finds it easier to deal with.
https://github.com/tonsV2/angular-ui.route/tree/master/src/main/resources/static
1 answers
solution1
7 ACCPTED 2015-09-27 07:12:53
In angular angular.module() is a setter and a getter. According to the angular.module docs (via @DanAtkinson's comment ):
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module.
Getter
var app = angular.module('myApp.controllers'); uses module as a getter.
It fails because the module myApp.controllers haven't been created yet.
Setter
To use it as a setter change it to
var app = angular.module('myApp.controllers', []); // note the []
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.