Inter-module Communication, Angular Js, Factories
Question
I have a simple application that I am developing in Angular. I have simplified the below as much as possible. I am attempting to make a globally available library injectible (nothing particularly special):
My app.module.js file is defined simply as:
angular.module('dogApplication', [
'dogModule',
'dogSelection'
]);
The index.html file is defined as follows (gutted for ease of reading):
<html lang="en" ng-app="dogApplication">
<head>
<!-- ... -->
<script src="app/app.module.js"></script>
<script src="app/dogs/dog.module.js"</script>
<script src="app/dogs/dog.factory.js"</script>
<script src="app/dogSelection.module.js"></script>
<!-- controllers then imported -->
</head>
<body>
<!-- content -->
</body>
</html>
The .module files define the modules to which each further component, controller, factory, etc. is attached with app.module.js being the "main" module attachment.
dog.factory.js is defined as follows:
angular
.module('dogModule')
.factory('dog', function($window) {
// do logic defined by James Hill in linked article
return friendly;
});
I then have a controller:
angular
.module('dogSelection')
.controller('dogSelectionController', ['$scope', 'dog', function ($scope, dog) {
if (dog)
{
console.log('it worked');
}
}])
When accessing the application, I get a crummy error message that I can't quite resolve:
angular.js:13920 Error: [$injector:unpr] Unknown provider: dogProvider <- dog <- dogSelectionController
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=dogProvider%20%3C-%20dog%20%3C-%20dogSelectionController
at angular.js:68
at angular.js:4511
at Object.getService [as get] (angular.js:4664)
at angular.js:4516
at getService (angular.js:4664)
at injectionArgs (angular.js:4688)
at Object.invoke (angular.js:4710)
at $controllerInit (angular.js:10354)
at nodeLinkFn (angular.js:9263)
at angular.js:9673
With the way I have the above set up, why is the dog service not available to the dogSelectionController via DI?
I know the code in the .factory( //... method works as I can attach it to the end of the controller definition; however, I want the factory to be available across the application. Is this possible?
2 answers
solution1
0 2016-09-23 19:36:49
First issue I see is you need an array after module. Even if there are no module dependencies. So it's .module('dogSelection', []) not .module('dogSelection') - Next issue I see is you need to define the module dog uses before injecting it. Without a module that defines where dob comes from dog will throw an error like your seeing. Something like this
Module:
angular.module('dogModule', [])
.factory('dog', function($window)
{
});
Controller:
angular.module('dogSelection', [
'dogModule'
])
.controller('dogSelectionController', ['$scope', 'dog', function ($scope, dog)
{
}]);
solution2
0 2016-09-23 19:38:12
Looks like 'dogSelectionController' injector should be changed from ['$scope', 'leaflet' to ['$scope', 'dog' . The dog factory is not named 'leaflet' .
Update:
As a workaround for shared factories is to have the factories on the main app module directly. I'm on my mobile now so will not be able to give a better answer at the moment.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.