Looked at all the other answers as is doing my head in.
My 'app.js':
angular.module('app', [
'imageCtrlController',
'adminCreateController',
'ui.bootstrap',
'ngRoute'
]);
My other .js file with config and two controllers:
angular.module("app").config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
template: 'One moment please.'
})
.when('/imageCtrl', {
templateUrl: '/admin/imagecontrol',
controller: 'imageCtrlController'
})
}]);
angular.module("app").controller('adminCreateController', function AdminCreateController($scope, $http) {
$scope.admin = {};
console.log("hello");
$scope.createNewAdmin = function () {
var admin = $.param($scope.admin);
var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
$http.post('/admin/CreateAdmin', admin, config)
.then(
function (response) {
console.log(response);
});
}
});
angular.module("app").controller('imageCtrlController', function ImageCtrlController($scope, $http) {
alert("yo");
});
In my _Layout:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="~/js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="~/js/AngularControllers/app.js"></script>
<script src="~/js/AngularControllers/adminController.js"></script>
I initialise the ng-app in the body of my _Layout and then for the div of my View. 'ng-controller="imageCtrlController"'
The admin controller worked fine until I moved it into a separate file.
The error I get is:
Error: $injector:modulerr Module Error
Stack trace:
Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=i...)
at http://localhost:2808/js/angular.min.js:6:425
at http://localhost:2808/js/angular.min.js:42:407
at q (http://localhost:2808/js/angular.min.js:7:495)
at g (http://localhost:2808/js/angular.min.js:41:476)
at http://localhost:2808/js/angular.min.js:42:149
at q (http://localhost:2808/js/angular.min.js:7:495)
at g (http://localhost:2808/js/angular.min.js:41:476)
at eb (http://localhost:2808/js/angular.min.js:46:44)
at c (http://localhost:2808/js/angular.min.js:21:373)
at Sc (http://localhost:2808/js/angular.min.js:22:179
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.
The second parameter of angular.module
is used to include other angular modules. You're trying to include your controllers as such:
angular.module('app', [
'imageCtrlController', // not a module
'adminCreateController', // ...also not a module
'ui.bootstrap', // is a module
'ngRoute' // ...is as well
]);
Corrected:
angular.module('app', [
'ui.bootstrap',
'ngRoute'
]);