After following a tutorial on organizing an Angular project, I came up with a structure where I have a ng directory containing all my controllers, services, and the routes.js file. These are then bundled together into an app.js through my configuration in gulp.
The content of my module.js is as follows:
var app = angular.module('app', [
'ngRoute',
'ui.bootstrap'
]);
Here's a snippet from my routes.js:
angular.module('app')
.config(function ($routeProvider) {
.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});
This is how my functional LoginCtrl appears:
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
$scope.login = function(username, password) {
...
}
})
Although the tutorial did not utilize any Angular modules, I decided to experiment with one by adding ui.bootstrap to my page from a CDN. Consequently, I attempted to modify the LoginCtrl like so:
angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
...
})
However, this change resulted in the following error message:
"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
I am perplexed about what might be causing this error. All tutorials I've come across handle module loading similarly, with the only distinction being that they don't appear to integrate a router.
PS: It's worth noting that when using an empty module list [], the same error arises. Similarly, if I specify a non-existent module ['helloworld'], I receive an error stating that 'Module 'helloworld' is not available'. Therefore, I presume that my `ui.bootstrap' module is indeed accessible.
EDIT: Check out the Plunker fiddle here: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview