zoukankan      html  css  js  c++  java
  • [AngularJS] Services, Factories, and Providers -- Service vs Factory

    Creating a Service:

    Before actual create an angular service, first create a constructor in Javascript:

        //constructor function
        function DroidService() {
            this.name = '';
        }
    
        DroidService.prototype.speak = function () {
            return "Hi I am " + this.name;
        };

    Then you we want to use this constutor function, you need to new an instance:

        var droid = new DroidService();
        droid.name = 'r2-d2';
        console.log(droid.speak());

    What need to understand here is that, you when do new opration, under the hook, Javascript does tow thing for you:

        function DroidService() {
            // var this = {}    
            this.name = '';
           // return this;
        }

    First is var a new this object, then return this object.

    Angular service is a constructor function.

        //constructor function
        function DroidService() {
            this.name = '';
        }
    
        DroidService.prototype.speak = function () {
            return "Hi I am " + this.name;
        };
    
        angular.module('app', [])
            .service('droid', DroidService)
            .controller('DroidController', DroidController);
    
        function DroidController(droid) {
            var droidCtrl = this;
            droid.name = 'r2-d2';
            droidCtrl.message = droid.speak();
    
        }

    When you create a service in angular, it helps to 'new' the constructor (service), then inject this instance whenever you want to use it.

    Creating a Factory:

    You can create an function which return an object:

        function droidFactory() {
            function speakingPrivately() {
                return "Hi I am " + this.name;
            }
            
            return {
                name: '',
                speak: speakingPrivately
            };
        }

    This is called reaveling modular partten, because you can choose which function or props to be public or private by include those into return object. 

    Then you just need to invoke the function, you can get the object.

        var droid = droidFactory();
        droid.name = 'c3-po';
        console.log(droid.speak());

    Angular Factory is a function which return an object. (No constructor fucntion, no new opreation):

        //revealing module pattern
        function droidFactory() {
            function speakingPrivately() {
                return "Hi I am " + this.name;
            }
    
            return {
                name: '',
                speak: speakingPrivately
            };
        }
    
    
        angular.module('app', [])
            .factory('droid', droidFactory)
            .controller('DroidController', DroidController);
    
        function DroidController(droid) {
            var droidCtrl = this;
            droid.name = 'c3-po';
            droidCtrl.message = droid.speak();
        }

    When you create a factory, Angular will help to invoke the function so when you inject into controller, you will get the object back.

  • 相关阅读:
    URL记录
    Mongodb集群节点故障恢复场景分析(转)
    IO 和 NIO 的区别
    VUE 前端项目优化方法
    缓存的穿透和雪崩
    接口如何处理重复请求?
    线程池构造类 ThreadPoolExecutor 的 5 个参数
    大型网站在架构上应当考虑哪些问题
    synchronized 和 lock 的区别
    JVM虚拟机 YGC和FGC发生的具体场景
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5044040.html
Copyright © 2011-2022 走看看