• Angular.js Services


    Angular.js Services

    Angular带来了很多类型的services。每个都会它自己不同的使用场景。我们将在本节来阐述。

       首先我们必须记在心里的是所有的services都是singleton(单例)的,这也是我们所希望得到的预期结果。

    下面让我开始今天的services之旅吧:

    Constant

    示例:

    复制代码
    app.constant('fooConfig', {
    
    config1: true,
    
    config2: "Default config2"
    
    });
    复制代码

     

         constant是个很有用的东东,我们经常会用于对directive之类的做配置信息。所以当你想创建一个directive,并且你希望能够做一些配置信息,同时给些默认的配置,constant是个不错的的选择。

         constant可以译作常量,因为我们所设置的值value是不能被改变的。其可以接受基础类型和object对象。

    Value

    示例:

    复制代码
    app.value('fooConfig', {
    
    config1: true,
    
    config2: "Default config2 but it can changes"
    
    });
    复制代码

          Value和上面的constant很相似,唯一是其在赋值后还可以被改变。它也被常用于directive配置信息。Value service只会保留values,我们不会在service中计算其值。

    Factory

    示例:

    复制代码
    app.factory('foo', function() {
    
    var thisIsPrivate = "Private";
    
    function getPrivate() {
    
    return thisIsPrivate;
    
    }
    
    
    
    return {
    
    variable: "This is public",
    
    getPrivate: getPrivate
    
    };
    
    });
    复制代码

     

         Factory是我们最常用的service。其很容易被理解。

         factory会返回一个object对象,至于你如何创建这个对象angular没任何限制。在示例中我选择了我喜欢的模式 Revealing module pattern,你可以选择其他你所希望的方式。

       如我之前所说,所有的services都是singleton的,所以当我们修改foo.variable的时候,会影响到其他使用的地方。

    Service

    示例:

    复制代码
    app.service('foo', function() {
    
    var thisIsPrivate = "Private";
    
    this.variable = "This is public";
    
    this.getPrivate = function() {
    
    return thisIsPrivate;
    
    };
    
    });
    复制代码

     

       Service servicefactory工作原理一样,只是他service接收的是一个构造函数,当第一次使用service的时候,angularnew Foo() 来初始化这个对象。以后的时候返回的都是同一个对象。

      实际上,下面是factory等价的写法:

    复制代码
    app.factory('foo2', function() {
    
    return new Foobar();
    
    });
    
    function Foobar() {
    
    var thisIsPrivate = "Private";
    
    this.variable = "This is public";
    
    this.getPrivate = function() {
    
    return thisIsPrivate;
    
    };
    
    }
    复制代码

     

        Foobar是一个class()factory中我们手动初始化它,在返回它。和service一样Foobar class只在第一次初始化,并以后返回的都是同一个对象。

    如果我们已经存在了一个class,那么我可以直接使用:

    复制代码
    app.service('foo3', Foobar);
    复制代码

     

    Provider

         Provider angular中是个最终的高级选项,在上例factory中最后一个示例用provider将是如下:

    复制代码
    app.provider('foo', function() {
    
    return {
    
    $get: function() {
    
    var thisIsPrivate = "Private";
    
    function getPrivate() {
    
    return thisIsPrivate;
    
    }
    
    return {
    
    variable: "This is public",
    
    getPrivate: getPrivate
    
    };
    
    }
    
    };
    
    });
    复制代码

     

        provider带有一个$get的函数,其返回值将会被注入其他应用组件。所以我们注入foocontroller,我们注入的是$get 函数。

    为什么我们还需要providerfactory实现不是更简单吗?这是因为我们能够在config 函数中配置provider。如下所示:

    复制代码
    app.provider('foo', function() {
    
    var thisIsPrivate = "Private";
    
    return {
    
    setPrivate: function(newVal) {
    
    thisIsPrivate = newVal;
    
    },
    
    $get: function() {
    
    function getPrivate() {
    
    return thisIsPrivate;
    
    }
    
    return {
    
    variable: "This is public",
    
    getPrivate: getPrivate
    
    };
    
    }
    
    };
    
    });
    
    app.config(function(fooProvider) {
    
    fooProvider.setPrivate('New value from config');
    
    });
    复制代码

       在这里我们把thisISPrivate移出了$get函数,我们创建了一个setPrivate函数,使其能够在config函数中修改thisIsPrivate变量。为什么我们需要这么做?在factory中加入一个setter不就好了吗?这是一个不同的意图。

       我们希望注入的是一个object对象,但是我们也希望能够提供一种方式去配置它。例如:一个包装了jsonp的资源resourceservice,我们希望能够配置是从那个url获取资源,我们也将有个三方的消费者比如restangular允许我们去配置达到我们的目的。

       注意在config函数我们需要用nameProvider替代name,然而消费者只需要用name

       可以看见在在我们的应用程序中已经配置了一些services,比如$routeProvider,$locationProvider,配置我们的routeshtml5model 调整适应。

    额外的福利:

    福利1:装潢器Decorator

    如果你觉得我给你的foo service缺少了你所需要的greet方法,你需要改变API吗?不,你可以用更好的方法装潢:

    复制代码
    app.config(function($provide) {
    
    $provide.decorator('foo', function($delegate) {
    
    $delegate.greet = function() {
    
    return "Hello, I am a new function of 'foo'";
    
    };
    
    
    return $delegate;
    
    });
    
    });
    复制代码

     

        上例中$provideangular内部用于创建我们所有serviceservice。如果我们希望在我们的应用程序中使用,我们可以手动的使用它(我们可以用$provide去装潢)$provide有一个decorator的装潢函数,允许我们装潢我们的services,它接受我们所需要装潢的servicename和一个接受$delegate的回调函数,$delegate代表我们的原来的service实例。

       在这里我们可以装潢我们的service。在本例中我们在原来的service实例上增加了一个greet函数,在返回修改过后的service当我们消费这个service的时候,它将会包含一个greet的函数,你可以在下面的try it中看见。

       对于使用来自第三方的service,当我们期望对其接口做一些扩展的时候,我们不需要copy它的代码到我们的项目来修改它,我们可以手动方便的使用装潢器去实现我们所想要的。

       注意:上文中说的常量constant是不可以被装潢的。

    福利2:创建非单例对象

        如我们所知所有的service都是单例的,但是我们仍然可以创建一个非单例的对象。在我们深入之前,我们必须认识到大多数场景我们都会期望是个单例的service,我们也不会去改变这种机制。换句话在很少的场景中我们需要每次生成一个新的object对象。如下:

    复制代码
    // Our class
    
    function Person( json ) {
    
    angular.extend(this, json);
    
    }
    
    
    
    Person.prototype = {
    
    update: function() {
    
    // Update it (With real code :P)
    
    this.name = "Dave";
    
    this.country = "Canada";
    
    }
    
    };
    
    
    
    Person.getById = function( id ) {
    
    // Do something to fetch a Person by the id
    
    return new Person({
    
    name: "Jesus",
    
    country: "Spain"
    
    });
    
    };
    
    
    
    // Our factory
    
    app.factory('personService', function() {
    
    return {
    
    getById: Person.getById
    
    };
    
    });
    复制代码

     

         在这里我们创建了一个Person对象,它几首一些json对象来初始化对象。接下来我们在prototype中创建了一个函数(可以从面向对象语言理解为实例方法),在我们直接在Person类上加了一个方法(可以理解为类方法,静态方法)

       所以我们有一个类方法将根据我们提供的id创建一个新的person对象,并每隔实例可以更新自己。接下来我们只需要创建一个service去消费它。

       在任何时候我们调用personService.getByID,我们都会创建一个新的person对象,所以在不同的controller中你可以使用一份新的person对象,即使factory是单例的,但是它生产返回的却是新的object

    福利3CoffeeScript

       CoffeeScrip能够方便优雅的处理service,提供的优雅的方式去创建class。下面是福利2的示例用CoffeeScript改变后的:

    复制代码
    app.controller 'MainCtrl', ($scope, personService) ->
    
    $scope.aPerson = personService.getById(1)
    
    
    
    app.controller 'SecondCtrl', ($scope, personService) ->
    
    $scope.aPerson = personService.getById(2)
    
    $scope.updateIt = () ->
    
    $scope.aPerson.update()
    
    
    
    class Person
    
    
    
    constructor: (json) ->
    
    angular.extend @, json
    
    
    
    update: () ->
    
    @name = "Dave"
    
    @country = "Canada"
    
    
    
    @getById: (id) ->
    
    new Person
    
    name: "Jesus"
    
    country: "Spain"
    
    
    
    app.factory 'personService', () ->
    
    {
    
    getById: Person.getById
    
    }
    复制代码

     

         译者注:本人一直在思考一篇《为什么需要在你的项目中尝试CoffeeScript.CoffeeScript不仅仅优美语法,如果只是这样的话,充其量这也只是一些可有可无的语法糖而已,我们认为更重要的是它为我们写javascript带来了一些好的实践,规避了javascript的“坑”.但是也不得不考虑项目成员学习成本,如果你项目成员很多具有函数式编程的经历,javascript能力也不错,你完全可以去尝试。注:写CoffeeScript并不是说你不再需要javascript学习。

    总结:

        serviceangularjs另一个非常酷的features。我们有许多方式去创建service,我们需要根据我们的应用场景选择正确的方式去实现它。译者注:这就好比我们常挂在嘴边的设计模式,重要的是正确的场景使用正确的模式。

    本来原文来自:http://angular-tips.com/blog/2013/08/understanding-service-types/

    Web Service的出现带来了很多系统工程直接相互的调用。无疑让代码的隐藏得到了好的封装。

    Web  Service 它的主要的组成要素:

    SOAP:(Simple Object Access Protocol)简单对象访问协议,对于整个web 服务来说这是必须要遵循的一个协议。只有通过了这个协议才可以跨平台,或者跨防火墙直接进行通信。

    WSDL:(Web Service Description  LanguageWeb服务描述语言。其实WSDL就是一种XML文档。比如:Web服务调用返回的结果的载体,发送到Web服务的参数的载体。都是以XML文档的形式传送

    UDDI:(Universal Description Discovery and Integration:统一描述,发现和集成协议。它的存在就是为了记录Web Service的信息,帮你查询到Web service,一般情况下是要讲Web Service注册到UDDI中的。除非你想让别人知道你的Web Service

    在客户端调用Web 服务整个过程都是需要进行序列化和反序列化的。

    下面说一下:Web服务的调用方式:

    1. 同步调用

    对于同步调用的时候,大家都是知道代码的执行顺序是由上到下执行的。如果这段代码有Web服务的方法,那么它只能够先执行Web服务的方法执行完之后才可以继续往下执行,如果由于一些因素影响了代码的执行。比如:网络的问题,对于这个问题是必须要考虑的。用户在那里等了半天都不呈现,那样是很不好的。没有一家公司是愿意这样做的。所以就出现了另一种调用的方式。

    2. 异步调用

    对于异步调用有那么一点点的复杂,没关系,一起来看看。

    对于Web服务的代码还是不用更改的。只是客户端的调用需要改变代码

    A. 需要将这个编码完成的Web服务部署到IIS服务器上,新建网站选择存放网站的目录,完成后先在浏览器中调用调试。防止出现调用的错误。如果一切OK的话,

    B. 在客户端的网站中添加Web引用,这是很重要的。然后选择本地

    中的选择本地计算机中的Web服务,顺便提一下第一个选择,如果客户端的解决方案中存在Web服务的项目就可以直接选择第一个了。然后看到右侧的Web引用名这是个人定义的。但是还是推荐规范的命名方式。

    确认后可以再项目中看到一个SearchBookServices文件夹,当中存放的就是VS自动生成的文件,简单的说明一下:

    disco:发现文档,包含所有的Web服务的可用的资源的引用

    wsdl:当前web服务wsdl文件

    discomap:发现文档,包含对.disco.wsdl文件的引用

    下面就是异步调用的方式了:

    首先肯定是要引用命名空间,就是刚刚自定义的命名空间了。

     

    最下面的就是笔者定义的命名空间。

    实例化一个全局的私有服务类,

     

    这里我简单的写了一个异步调用的方法。这就是Web Service的调用,当然这里只是简单的说说。帮助大家回忆一下。

    对于Web 服务的优点:

    A. 可以跨平台通信

    B. 跨越防火墙通信

    C. B2BBusiness To Business)的集成

    D. 软件和数据的重用

    最后请大家不用忘了Web服务的调用方式分为同步和异步。老习惯了-今天来个怀旧的图片,希望大家喜欢

     

     

     

     

     

     

     

     

  • 相关阅读:
    C++中的命名空间
    [3D数学基础:图形与游戏开发]专栏前言
    Step01-题目申报
    《通用型云端物联网网关系统的设计与实现》
    博弈论题目总结(一)——简单组合游戏
    单纯形模板
    BZOJ 3434 [WC2014]时空穿梭 (莫比乌斯反演)
    BZOJ 3533 [SDOI2014]向量集 (线段树维护凸包)
    BZOJ 2161 布娃娃 (主席树)
    UOJ #86 mx的组合数 (数位DP+NTT+原根优化)
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3267514.html
Copyright © 2020-2023  润新知