Last Updated: February 25, 2016
·
508
· headwinds

Angular Newable Factory

As a view's controller becomes more complex, you may wish to modularize some of the logic into external classes which can be re-used by other view controllers.

In angular, you could use either a service or a factory to achieve this result. There is a healthy debate - stackoverflow Angular.js: service vs provider vs factory? - about this decision making process. After reading through it, I decided I like the factory approach because it feels more familiar to other languages with its constructor approach.

The following is a tweak on what was recommended but I modified the final return statement moving the public properties into the constructor simply because I found it easier to read and learn what the class can do at the start instead of the end of the file.

app.factory(‘SpaceshipFactory’, function(){
         var supplies = 100; 
         var power = 100;
         var state = “resting”;
         var name = "unknown";

      var SpaceshipFactory = function( shipNameStr){

            //private
            setShipName(shipNameStr);

            // public 
           // you can expose variables or functions 
           this.fireLasers = fireLasers;
           this.shieldsUp = shieldsUp; 
           this.getState = getState; 
           this.power = power;

        }

         var fireLasers = function() {
                  setState(“attacking”);
         }

         var shieldsUp = function() {
                   setState(“shields”);
                   flee(); 
         }

    var flee = function() {
            // logic here…
         }

    var getState = function() {
        return state;
         }

         var setState = function(stateStr){
               state = stateStr;
         }

         var getShipName = function() {
                return name; 
         }

         var setShipName = function(shipNameStr) {
                 name = shipNameStr; 
         }

    return SpaceshipFactory; 
  });

In your view controller, you can then use that factory to create your ships and create other factories to handle other logic so that your main view controller remains relatively clean making your code more maintainable and sharable among team members.

app.controller(‘MotherShipViewController’, 
    ['$scope' , 'SpaceshipFactory', 
    function($scope,SpaceshipFactory){

         var init = function(){

              var shipNames = ["alice", "gretel", "rosella"]; 
              var fleet = [];

               // leverage underscore.js to create some ships
              _.times(3, function(index){
                  var ship = new SpaceshipFactory(  shipNames[index]   );       
                  fleet.push(ship);

                   // you can then use the ship's public properties 
                   ship.fireLasers();
                   // but you can't access the private ones 
                   // console.log(ship.supplies) would throw an error 
              }              

         }

    }
]);