重用AngularJS中的组件

Question

作为一名新的AngularJS开发人员（来自PHP + Laravel世界），我面临着设计新应用程序架构的麻烦。 哪个是实现CRUD应用程序的最佳方式，其中实体在应用程序中被多次使用？

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

我应该使用什么文件列表？指令，ng-include或其他？

Answer 1

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

Answer 2

我正在使用角度module和factory，如下所示：

<强> app.js

'use strict';
/* App Module */

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

    'my-models',

]);

我-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;
            });

    });

另外，你为你的项目定义了一个＆＃39;实体。

---

编辑：

Javier评论道：

假设您的文件回复是

[{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>

Answer 3

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

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

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

您可能需要查看Yeoman