My head is spinning with this one.
There are 3 files in play: app.js, app.services.provider.js, admin.js
In app.js, I set up my module:
(function() {
angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider
.when("/admin", {
templateUrl : "Admin.htm",
controller: "AdminController"
}).otherwise( {redirectTo: '/'} ) ;
})
})();
Next, in app.services.provider.js, I create a factory:
(function() {
angular.module("myApp").factory('appServicesProvider',function($scope, $http ) {
function someFunction(){
}
return{someFunction:someFunction}
});
})();
And in admin.js, I define my controller:
(function() {
angular.module("myApp")
.controller("AdminController",function($scope, $http, appServicesProvider) {
});
})();
I've double-checked that I included the JS files in the correct order in my index.html:
<script src="js/app.js"></script>
<script src="js/app.services.provider.js"></script>
<script src="js/admin.js"></script>
However, when I attempt to run the code, I encounter the following exception:
angular.min.js:122 Error: [$injector:unpr] http://errors.angularjs.org/1.6.1/$injector/unpr?p0=<ng-view class="ng-scope">copeProvider%20%3C-%20%24scope%20%3C-%20appServicesProvide
I'm at a loss as to what could be causing this issue.
I've tried a few things to troubleshoot:
- I experimented with including the scripts in both the
headand at the end of thebodytag - I attempted removing the
(function() {})(); - I tested referencing my module in a variable, e.g.
var app = angular.module(...), and utilizing the variable across the files - I tried injecting the "AppServices" like so:
angular.module("myApp") .controller("AdminController",["$scope","$http","appServicesProvider",function($scope, $http, appServicesProvider) {...
Despite all these efforts, the error persists.
Any insights into where I might have gone wrong would be greatly appreciated.
Thank you for your assistance, Eric