在 AngularJS 中重用组件答案

【问题标题】：Reuse components in AngularJS在 AngularJS 中重用组件
【发布时间】：2014-06-26 07:50:13
【问题描述】：

作为一名新的 AngularJS 开发人员（来自 PHP+Laravel 世界），我在设计新应用的架构时遇到了一些麻烦。在应用中多次使用实体的 CRUD 应用中，哪种方法最好？

例如：我们有实体“文档”和“项目”。文档可以单独列出和查看，也可以附加到项目中。在项目详细信息视图中，我想包含附加文档，使用单独列出文档时使用的相同模板。这个小部件应该有自己的控制器和方法，因为它需要进行一些 API 调用并应用一些业务逻辑；并以某种方式接收父项目数据。

我应该使用什么来列出文档？指令、ng-include 还是其他？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-include

【解决方案1】：

您应该使用模块将其用作重用组件。 https://docs.angularjs.org/guide/module

【讨论】：

【解决方案2】：

我正在像这样使用 Angular module 和 factory：

app.js

'use strict';
/* App Module */

var app = angular.module('my-app', [

    'my-models',

]);

my-models.js

var myModels = angular.module('my-models', []);


myModels.factory('DocumentsModel', function ($http)
{
    var DocumentsModel = function ()
    {
    };

    DocumentsModel.get_documents = function (page, results_per_page)
    {

        var data = {
            page: page,
            results_per_page: results_per_page
        };

        var json = angular.toJson(data);

        return $http.post('/api/documents', json);
    };

    DocumentsModel.set_document_state = function (document_id, document_state_id)
        {
            var json = angular.toJson(
                {
                    'document_state': document_state_id
                }
            );

            return $http.post('api/document/'+document_id', json);
        };

    return DocumentsModel;
});

使用角度依赖注入机制，您可以通过在控制器函数中添加DocumentsModel作为参数来在多个控制器中重复使用此逻辑：

文档-ctrl.js

var app = angular.module('my-app');

var controller = app.controller("DocumentsCtrl",
    function ($scope, DocumentsModel)
    {

        DocumentsModel.get_documents()
            .success(function(data){
                $scope.documents = data.documents;
            });

    });

此外，您 cad 为您的“项目”实体定义了一个。

编辑：

哈维尔评论：

假设您的文档响应是

[{name: ... , size: ... , last_modified: ... }, {name: ... , size: ... , last_modified: ... }, ...]

你可以像这样使用ng-repeat：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Size</th>
            <th>Last Modified</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="document in documents">
            <td>{{ document.name }}</td>
            <td>{{ document.size/1024 | number:4 }} MB</td>
            <td>{{ document.last_modified | date:'yyyy-MM-dd HH:mm:ss' }}</td>
        </tr>
    </tbody>

</table>

【讨论】：

我应该使用什么来呈现项目模板中的文档列表？
@JavierMarín，添加了 ng-repeat 示例
我在想一些“文档小部件”，我可以在列出文档时单独使用它，或者在“项目”模板中使用它来列出所有项目文档。

【解决方案3】：

只需将其作为依赖项添加到您自己的模块中即可。喜欢

angular.module('test', []);

angular.module('test2', ['test']);

你可能想看看Yeoman

【讨论】：