Reputation: 188
I am trying to separate my app into different modules and inject the factories in the controllers I think this is very close just need help finding the gap. Any help is appreciated.
index.html
<body ng:app='module_1'>
<script src="js/scripts/module_1.js'"></script>
<script src="js/scripts/dD/module_2.js"></script>
<script src="js/scripts/dD/module_3.js"></script>
module_1.js
angular.module('module_1', ['ngCookies','module_2','module_3'])
module_2.js
angular.module('module_2', [])
.factory('module_2_Fact', ['$scope', function() {
function test () {
return "test"
}
return {
test:test
}
}]);
module_3.js
angular.module('module_3', ['module_2'])
.controller('module_3_Ctrl', ['$scope', function(module_2_Fact) {
console.log(module_2_Fact.test); // == > undefined
}]);
module_2_Fact.test returns Cannot read property 'test' of undefined
it seems like module_3 can not find module_2
Upvotes: 1
Views: 85
Reputation: 16498
Please remove '$scope
' from your module_2_Fact
angular.module('module_1', ['module_2', 'module_3']).controller('MainCtrl', function($scope, module_2_Fact) {
$scope.name = "Charlie";
console.log(module_2_Fact.test)
$scope.data = module_2_Fact.test();
})
angular.module('module_2', [])
.factory('module_2_Fact', [
function() {
function test() {
return {
test: "that's my test"
}
}
return {
test: test
}
}
]);
angular.module('module_3', ['module_2'])
.controller('module_3_Ctrl', ['$scope',
function(module_2_Fact) {
console.log(module_2_Fact.test); // == > undefined
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="module_1">
<div ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<p>{{data| json}}</p>
</div>
Upvotes: 1