injecting modules with angular

Question

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

I would think that module_2 would crash due to the test variable not being defined — Explosion Pills
– Explosion Pills, Commented Mar 23, 2015 at 20:59
You aren't injecting properly into the controller function of module_3. You specified $scope and didn't use it, and didn't specify module_2_Fact — user400654
– user400654, Commented Mar 23, 2015 at 21:05
yes but I am trying to find out why, In theory all services/ factories should be accessible through the module in this pattern — mattwilsn
– mattwilsn, Commented Mar 23, 2015 at 21:05
if you do not inject $scope .controller('module_3_Ctrl', ['module_2_Fact', function $scope becomes undefined unknown provider: $scopeProvider <- $scope <- dealsDetailsFact — mattwilsn
– mattwilsn, Commented Mar 23, 2015 at 21:10

sylwester · Accepted Answer · 2015-03-23 21:12:18Z

1

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>

answered Mar 23, 2015 at 21:12

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mattwilsn Over a year ago

I see thanks for the correction it is working when module_2 is injected into module_1 all is well. However it is not working when module_2 is injected into module_3 plnkr.co/edit/DnxZNELKiW9hyjIVS3Ty?p=preview as the original issue pointed out

sylwester Over a year ago

@user1675557 please see here plnkr.co/edit/3Qa6jIunMAUojKzsFwV1?p=preview you need to add ng-app="module_3" to your view

mattwilsn Over a year ago

is this the only way ?? none of the tutorials that use this technique have more then one ng:app

mattwilsn Over a year ago

Im not sure if adding ng:app to the view is needed. plnkr.co/edit/3Qa6jIunMAUojKzsFwV1?p=preview when it is removed from the view there is no change

Collectives™ on Stack Overflow

injecting modules with angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related