Why isn't my angular factory loading?

Question

Example... Plunker

addon.js:

(function () {
  'use strict';
 angular.module('jzAddons', [])
  .factory('jzThemeFac', function () {
    return {
      themes:[
        {
          name: 'none',
          url: '',
          margin: '8px',
          bg: '#ffffff'
        },
        {
          name: 'amelia',
          url: '//netdna.bootstrapcdn.com/bootswatch/3.1.0/amelia/bootstrap.min.css',
          margin: '6px',
          bg: '#108a93'
        }
      ],

      changeTheme: function (theme) {
        var oldLink = angular.element('#bootstrapTheme');
        oldLink.remove();
        if (theme.name !== 'none') {
          var head = angular.element('head');
          head.append('<link id="bootstrapTheme" href="' + theme.url + '" rel="stylesheet" media="screen">');
        }
        currentTheme = theme;
      }
    };
  });

})();

app.js:

var app = angular.module('example', ['jzAddons']);

(function () {
  'use strict';

  app.controller('MainCtrl', ['jzThemeFac', function ($scope, jzThemeFac) {
    $scope.themes = jzThemeFac.themes;  /* Error comes from this line */
  }]);

})();

At the bottom of my body tag I've got:

<script src="addon.js"></script>
<script src="app.js"></script>

I keep getting the error:

TypeError: Cannot read property 'themes' of undefined

Answer 1

Your factory inject was wrong, you can do:

app.controller('MainCtrl', ['$scope', 'jzThemeFac', function ($scope, jzThemeFac) {...

or just:

app.controller('MainCtrl', function ($scope, jzThemeFac) {

edit: you can also move:

(function () {
    'use strict';  

to the beginning of file

Answer 2

You need to remember to inject $scope into your MainCtrl. So app.js should look like this:

var app = angular.module('example', ['jzAddons']);

(function () {
  'use strict';

  app.controller('MainCtrl', ['$scope', 'jzThemeFac', function ($scope, jzThemeFac) {
    $scope.themes = jzThemeFac.themes;  /* Error comes from this line */
  }]);

})();