Geek Answers Handbook

AngularJS cannot find my controller

I know this is a common problem, but I could not find a solution by reading the previously asked questions.

I actually get two errors, but the first one about angular cannot find my controller.

http://errors.angularjs.org/1.4.2/ $ injector / nomod? p0 = myApp.controllers

My directory structure is as follows:

. └── static ├── index.html ├── js │  ├── app.js │  └── controllers.js ├── lib │  └── angular-ui-router.min.js └── partials ├── view1.html └── view2.html

My index file is as follows:

 <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 is as follows:

 (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 is as follows:

 (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 that may be related.

As stated above, angular cannot find my controller. Does anyone know what I'm doing wrong? Please let me know if I need to insert more code.

I shared the github code in case someone could handle it better.

https://github.com/tonsV2/angular-ui.route/tree/master/src/main/resources/static

+6
source share
1 answer

In angular angular.module() , the setter and receiver are set. According to angular.module docs (via @DanAtkinson comment ):

Passing one argument retrieves the existing angular.Module, while passing more than one argument creates a new angular.Module.

Getter

var app = angular.module('myApp.controllers'); uses the module as a getter.

This fails because the module myApp.controllers has not yet been created.

setter

To use it as a setter, change it to

 var app = angular.module('myApp.controllers', []); // note the []
+7
source

More articles:


All Articles