I am currently revamping some Angular code and my goal is to organize things by type, such as keeping controllers in a separate folder.
Currently, I have two controllers and an app.js file. However, I am encountering an issue with the error message "undefined is not a function" showing up in the console for both of my individual controller files.
app.js
var app = angular.module('myApp',['myApp.controllers']);
controllers
app.module('myApp.controllers').controller('DocumentController',function($scope){
$scope.message = "This is the message from Document controller";
})
//
app.module('myApp.controllers').controller('MyController', function ($scope) {
$scope.message = "This is the message from My Controller";
})
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8>
<title></title>
<script src="lib/jquery-1.9.1.js"></script>
<script src="lib/angular-1.2.js"></script>
<script src="app.js"></script>
<script src="controllers/MyController.js"></script>
<script src="controllers/DocumentController.js"></script>
</head>
<body>
This content is from the index.html page
<div ng-controller="MyController">
{{message}}
</div>
<script></script></body></html>