10

我正在使用 Angular 迈出第一步，我需要定义一个实用程序帮助库，其中包含几个函数方法，例如

dataHelper.parse, dataHelper.sanitize, 等

以角度组织它的推荐方法是什么？

4

3 回答 3

16

对于实用方法，我会将它们组织在 Angular 框架之外的库中，但对 angular.extend 的依赖性很小。如果你希望你的库完全独立于 Angular，你可以extend用你自己的实现来替代。

将您的实用程序 API 包装在一个 JavaScript 附件中，并将您的库作为一个属性公开window（在下面的示例中，我将库命名为myLibrary，但您可以自由选择您喜欢的任何名称）。通过将您的库作为 的属性附加window，您将能够无条件引用“myLibrary”。如果您好奇，这正是angular库的公开方式。 

 (function (window, document) {
     'use strict';

     // attach myLibrary as a property of window
     var myLibrary = window.myLibrary || (window.myLibrary = {});

     // BEGIN API
     function helloWorld() {
         alert('hello world!');
     }

     function utilityMethod1() {
         alert('Utility Method 1');
     }

     function utilityMethod2() {
         alert('Utility Method 2');
     }
     // END API

     // publish external API by extending myLibrary
     function publishExternalAPI(myLibrary) {
         angular.extend(myLibrary, {
             'helloWorld': helloWorld,
             'utilityMethod1': utilityMethod1,
             'utilityMethod2': utilityMethod2
         });
     }


     publishExternalAPI(myLibrary);

 })(window, document);

用法

添加脚本后，您可以从任何地方使用您的库 - 服务、工厂、提供程序、控制器、指令等。

<script type='text/javascript' src='angular.js'></script>
<script type='text/javascript' src='myLibrary.js'></script>

<script>
      myLibrary.helloWorld();
      myLibrary.utilityMethod1();
      myLibrary.utilityMethod2();
</script>

实用程序库与 Angular 服务

我更喜欢实用程序函数驻留在自己的库中而不是 Angular 服务中的原因是因为我认为它们与 Angular 生态系统是分开的。这些实用功能几乎是独立的，并且与模块无关，而 Angular 服务/工厂与 Angular 的其他部分（包括控制器和指令）密切合作，并且与模块密切相关。

扩展角度

如果你真的想要，你甚至可以扩展 Angular 库本身。只需在脚本中替换myLibrary为angular（注意：这可能是不可取的，因为它会使您的脚本依赖于 Angular 实现）。

于 2014-07-07T07:28:44.473 回答
0

创建自定义服务

globalModule.service('toolkit',function(){

return{
   
    getDate: function(altFormat){
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!

        var yyyy = today.getFullYear();
        if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = yyyy +'-'+ mm+'-'+dd;

        if(altFormat){
            today = today.replace(/-/g, '.');
        }

        return today;
    },

    /**
     *  Returns a 32 character ID [ XXXXXXXX - XXXXXXXXXXXXXXXXXXXXXXXX ]
     * @returns {string}
     */

    newGUID: function(){

        // ...
    }

  };
});

您可以在任何需要的地方注入它。如果您可以将一些逻辑捆绑到单独的服务中（例如parseService），我认为您应该这样做。

如果您需要更灵活或可配置的东西，请查看提供程序。

于 2014-07-07T06:25:36.633 回答
0

要扩展 @pixelbits 的答案，如果您想明确外部依赖项，您可以相当轻松地包装现有库以与 Angular 一起使用，例如momentjs：

angular.module('testApp')
.constant( 'moment', moment)
于 2016-10-08T00:49:29.620 回答