AngularJS factory, service demo

AngularJS factory, service demo

by william jiang

HTML

<body ng-app="car" ng-controller="controller">
    <div ng-model="cf">{{cf}}</div>
    <div ng-model="cs">{{cs}}</div>
</body>
<script>
    'use strict';
    var app = angular.module('car', []);

    function Car(wheel) {
        this.wheel = wheel;
    }

    Car.prototype.getWheel = function() {
        return 'I have ' + this.wheel + ' wheels;';
    };
    //do what ever you want to extend the base Class.

    app.controller('controller', function($scope, carFactory, carService) {
        $scope.cf = carFactory.get();
        $scope.cs = carService.get();
    });

    app.factory('carFactory', function() {
        var cf = Object.create(new Car(8));
        cf.windows = 6;
        cf.seats = 4;
        cf.getMore = function() {
            return this.windows + ' windows, ' + this.seats + ' seats.';
        };
        return {
            get: function() {
                console.log('carFactory: ', cf.getWheel(), cf.getMore());
                return cf;
            }
        };
    });

    app.service('carService', function() {
        function Cs(property) {
            Car.apply(this, arguments);
            this.windows = 6;
            this.seats = 4;
        }
        Cs.prototype = Object.create(Car.prototype);
        Cs.prototype.getMore = function() {
            return this.windows + ' windows, ' + this.seats + ' seats.';
        };

        Cs.get = function() {
            var cs = new Cs(10);
            console.log('carService: ', cs); //cs.geWheel(), cs.getMore());
            return cs;
        }

        return Cs;
    });
</script>

JavaScript

(function () {
    'use strict';
    var app = angular.module('carDemo', []);

    function Car(wheel) {
        this.wheel = wheel;
    }

    Car.prototype.getWheel = function () {
        return 'I have ' + this.wheel + ' wheels;';
    };
    //do what ever you want to extend the base Class.

    app.controller('controller', function ($scope, carFactory, carService) {
        $scope.cf = carFactory.get();
        $scope.cs = carService.get();
    });

    app.factory('carFactory', function () {
        var cf = Object.create(new Car(8));
        cf.windows = 6;
        cf.seats = 4;
        cf.getMore = function () {
            return this.windows + ' windows, ' + this.seats + ' seats.';
        };
        return {
            get: function () {
                console.log('carFactory: ', cf.getWheel(), cf.getMore());
                return cf;
            }
        };
    });

    app.service('carService', function () {
        function Cs(property) {
            Car.apply(this, arguments);
            this.windows = 6;
            this.seats = 4;
        }
        Cs.prototype = Object.create(Car.prototype);
        Cs.prototype.getMore = function () {
            return this.windows + ' windows, ' + this.seats + ' seats.';
        };

        Cs.get = function () {
            var cs = new Cs(10);
            console.log('carService: ', cs); //cs.geWheel(), cs.getMore());
            return cs;
        };
        return Cs;
    });
    /**
     * see index.html and console.log()
     * 
     * the output:
     * carFactory:  I have 8 wheels; 6 windows, 4 seats.
     * carService:  Cs {wheel: 10, windows: 6, seats: 4, getMore: function, getWheel: function
     */

}());