mattwilsn
mattwilsn

Reputation: 188

injecting modules with angular

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

Answers (1)

sylwester
sylwester

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

Related Questions