AngularJS - factory in a controller

Question

I'm new to AngularJS and I'm trying to use a .factory that I created in a Controller. When I leave the Factory out, of the dependency array the code files execute w/o any errors. However, as soon as I add the name of the Factory to the controller dependency array, I recieve an error that the name of the controller cannot be found.
Would someone be able to help me correct my controller syntax so that the controller can use and execute without errors. My module, factory and controller are in separate files and they look like this:

angular.module('app', []); // this 'app' is the name of the module.  it needs to be referenced in the berrcontroller or any other controller or service that used this module

(function () // using IIFE
{
    angular.module('app') // 'app' is the name of the module in the BeerApp.js file.
    .factory('BeerFactory', beerFactory);

    function beerFactory() {
        var _brewer = 'Three Floyds';
        var _beer = 'Alpine King';

        var getBeer = function () {
            return _brewer + ' ' + _beer;
        } // getBeer

        return {
            getBeer: getBeer
        };

    }// beerFactory
})(); // function(){

(function () // using IIFE 
{
    angular.module('app') // 'book' is the name of the module in Book.js file.
    .controller('BeerController', beerController);  // second parameter is the dependency array. since we are using controllerAs syntax,$scope not necessary
        // since using vm, have easy naming for all variables

    function beerController(BeerFactory) {
        var vm = this;
        vm.beer = 'generic beer';
        vm.title = "Controller Using a Service";


        activate();

        function activate() {
            return getBeer;
        } // activate

        function getBeer() {
            return beerFactory.getBeer().then(function (data) {
                vm.beer = data;
                return vm.beer
            });
        }//getBeer function
    }
})();

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- tell ie to assume the highest supported version of its rendering engine. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- content tells the device what width to use. When left out, content appears small because device assumes desktop version -->
    <!-- initial-scale sets the degree to be scaled up by default. -->
    <!-- how do you prevent pinch zoom. -->


    <title>Learning AngularJS</title>

    <!-- Bootstrap   -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  
    <!-- add Normalize to make page look the same on all browsers.   -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css" rel="stylesheet" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- custom styles-->
    <style>
    </style>
</head>
<body>
    <header><h1>Service in a controller</h1></header>
    <div ng-app="app">

        <div ng-controller="BeerController as vm">
            <h1>{{vm.title}}</h1>
            {{vm.beer}} is the beer company and name
        </div>
    </div>

    <footer>
        <p>Chieko's beer app.</p>
    </footer>

    <!-- all of the angular js file resources  -->
    <script src="/Scripts/angular.min.js"></script>
    <script src="BeerApp.js"></script>
    <script src="BeerFactory.js"></script>
    <script src="BeerController.js"></script>

</body>
</html>

theaccordance · Accepted Answer · 2016-05-24 18:36:08Z

1

The actual controller function needs to be at the end of the array, and dependencies you're passing into the controller should be strings within the array, not objects

.controller('BeerController', ['beerFactory', beerController]);

answered May 24, 2016 at 18:36

theaccordance

8895 silver badges13 bronze badges

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

Comments

pietro909 · Accepted Answer · 2016-05-24 18:35:59Z

0

When you write:

.controller('BeerController', ['beerController', beerFactory]);

you are actually telling Angular to instantiate a Controller passing it beerController which of course doesn't exist yet.

Try this:

.controller('BeerController', ['beerFactory', beerController]);

answered May 24, 2016 at 18:35

pietro909

1,8611 gold badge19 silver badges28 bronze badges

Comments

Wasiq Muhammad · Accepted Answer · 2016-05-24 18:43:15Z

Try this

BeerApp.js

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

BeerFactory.js

 myApp.factory('BeerFactory', beerFactory);

    function beerFactory() {
        var _brewer = 'Three Floyds';
        var _beer = 'Alpine King';

        var getBeer = function () {
            return _brewer + ' ' + _beer;
        } // getBeer

        return {
            getBeer: getBeer
        };

    }// beerFactory


BeerController.js


myApp.controller('BeerController', ['$scope', 'BeerFactory' function($scope, BeerFactory,) {
        var vm = this;
        vm.beer = 'generic beer';
        vm.title = "Controller Using a Service";

        activate();

        function activate() {
            return getBeer;
        } // activate

        function getBeer() {
            return beerFactory.getBeer().then(function (data) {
                vm.beer = data;
                return vm.beer
            });
        }//getBeer function

}]);

Simon Schüpbach · Accepted Answer · 2016-05-24 18:49:47Z

You make everything write except some small mistakes:

first you have to call your IIFE factore with () at the end.

And then you have to care about upper letters. You must inject your factory or controller the same way as you define them.

And last but not least you have to define your controller like

.controller('BeerController', beerController);

angular.module('app', []); // this 'app' is the name of the module.  it needs to be referenced in the berrcontroller or any other controller or service that used this module

(function () // using IIFE
{
    angular.module('app') // 'app' is the name of the module in the BeerApp.js file.
    .factory('BeerFactory', beerFactory);

    function beerFactory() {
        var _brewer = 'Three Floyds';
        var _beer = 'Alpine King';

        var getBeer = function () {
            return _brewer + ' ' + _beer;
        } // getBeer

        return {
            getBeer: getBeer
        };

    }// beerFactory
})(); // function(){

(function () // using IIFE 
{
    angular.module('app') // 'book' is the name of the module in Book.js file.
    .controller('BeerController', beerController);  // second parameter is the dependency array. since we are using controllerAs syntax,$scope not necessary
        // since using vm, have easy naming for all variables

    function beerController(BeerFactory) {
        var vm = this;
        vm.beer = 'generic beer';
        vm.title = "Controller Using a Service";


        activate();

        function activate() {
            return getBeer;
        } // activate

        function getBeer() {
            return beerFactory.getBeer().then(function (data) {
                vm.beer = data;
                return vm.beer
            });
        }//getBeer function
    }
})();

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- tell ie to assume the highest supported version of its rendering engine. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- content tells the device what width to use. When left out, content appears small because device assumes desktop version -->
    <!-- initial-scale sets the degree to be scaled up by default. -->
    <!-- how do you prevent pinch zoom. -->


    <title>Learning AngularJS</title>

    <!-- Bootstrap   -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  
    <!-- add Normalize to make page look the same on all browsers.   -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css" rel="stylesheet" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- custom styles-->
    <style>
    </style>
</head>
<body>
    <header><h1>Service in a controller</h1></header>
    <div ng-app="app">

        <div ng-controller="BeerController as vm">
            <h1>{{vm.title}}</h1>
            {{vm.beer}} is the beer company and name
        </div>
    </div>

    <footer>
        <p>Chieko's beer app.</p>
    </footer>

    <!-- all of the angular js file resources  -->
    <script src="/Scripts/angular.min.js"></script>
    <script src="BeerApp.js"></script>
    <script src="BeerFactory.js"></script>
    <script src="BeerController.js"></script>

</body>
</html>

Chieko · Accepted Answer · 2016-06-13 03:02:53Z

Thanks all for your kind help. Here's the corrected version of the Factory:

(function () // using IIFE
{
    angular.module('app') // 'book' is the name of the module in the Book.js file.
    .factory('BeerFactory', beerFactory);

    function beerFactory() {
        var _brewer = 'Three Floyds';
        var _beer = 'Alpine King';

        var getBeer = function () {
            return _brewer + ' ' + _beer;
        } // getBeer

        return {
            getBeer: getBeer
        };

    }// beerFactory
})();   // function(){

This is the correct version of the controller:

(function () // using IIFE 
{
    angular.module('app') // 'book' is the name of the module in Book.js file.
    .controller('BeerController',  ['BeerFactory', beerController]);  // second parameter is the dependency array. since we are using controllerAs syntax,$scope not necessary
        // since using vm, have easy naming for all variables

    function beerController(BeerFactory) {
        var vm = this;
        vm.beer = '';
        vm.title = "Controller Using a Service";

        activate();

        function activate() {
            return getBeer();
            //vm.beer =  BeerFactory.getBeer();

        } // activate    

        function getBeer(beer) {

            vm.beer =  BeerFactory.getBeer();

            return vm.beer;
        }    
    }  })();

The the corresponding html page:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- tell ie to assume the highest supported version of its rendering engine. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- content tells the device what width to use. When left out, content appears small because device assumes desktop version -->
    <!-- initial-scale sets the degree to be scaled up by default. -->
    <!-- how do you prevent pinch zoom. -->
    <title>Learning AngularJS</title>
    <!-- Bootstrap   -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
    <!-- add Normalize to make page look the same on all browsers.   -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css" rel="stylesheet" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- custom styles-->
    <style>
    </style>
</head>
<body>
    <header><h1>Hour 07</h1></header>
    <div ng-app="app">
        <div ng-controller="BeerController as vm">
            <h1>{{vm.title}}</h1>
            {{vm.beer}} is the beer company and name
        </div>
    </div>
    <footer>
        <p>Chieko's beer app.</p>
    </footer>
    <!-- all of the angular js file resources  -->
    <script src="/Scripts/angular.min.js"></script>
    <script src="BeerApp.js"></script>
    <script src="BeerFactory.js"></script>
    <script src="BeerController.js"></script>
</body>
</html>

There were no changes to the App.js file.

Notice that I am not using the '.then(function(data){}) b/c the application didn't work with that part of the code.

Collectives™ on Stack Overflow

AngularJS - factory in a controller

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related