AngularJS重用多個控制器來構建Webapp

Question

我正在尋找的是學習構建webapp的正確方法。 我已經構建了一些東西，但是到了需要重用一些數據的地步，並且使用ng-controllers變得越來越困難。

我已經知道controllers不是最好的選擇，所以我根據閱讀過的一些文章嘗試跳轉到directives 。 但是他們都沒有幫助我。

所以，讓我嘗試描述一下。

描述

我正在構建一個dashboard ，其中有一些客戶（添加/編輯/刪除），項目（涉及一個或多個客戶），議程，配置，財務狀況等。

我已經建立了很多東西，但是例如：

在主頁上，我將顯示一個表，其中最近5個客戶端已添加到該app ，還顯示了一個表中最近5個項目已添加到該應用程序中。 然后，在clients.html頁面上，在project.html上顯示整個表，對於項目也是如此。 兩者都只有3-4個字段，包括名稱，電話和電子郵件。 然后，在各個客戶頁面上，我顯示有關該客戶的全部信息。 例如地址，電子郵件，聯系人，觀察結果等，以及他所參與的項目的列表。

所以我有這樣的事情：

app.js

myApp.controller('ClientesCtrl', function ($scope, $http, $routeParams) {
    $scope.pagename = "Clientes";

    $scope.get_cliente = function() { //Function - Get Cliente
        $http.get("scripts/data/clientes.json")
        .success( function(data) {
            $scope.pagedClientes = data;
        })
        .error(function(data) {});
    };

    $scope.add_cliente = function() { //Function - Add Cliente
        $scope.formprevent = true;
        $http.post('scripts/php/db.php?action=add_cliente',
            {
                'cod': $scope.cad.cod,
                [... more data ...]
            }
        )
        .success(function (data, status, headers, config) {})
        .error(function (data, status, headers, config) {});
    };
});

對於項目也是如此，每個項目都有其控制器。

我的文件夾/文件組織非常簡單（因為我不知道可以放入不同的文件中，甚至不知道如何調用它）。 就像這樣：

-index.html
- 腳本
-js
--angular.min.js
--- angular-route.min.js
- 應用
--- app.js
- 內容
-home.html
--clients.html
-projects.html

問題

當我需要在很多頁面中顯示這些數據時，問題就開始了。
例如在主頁中，我有一個包含主要數據簡歷的列表，例如總客戶數，總項目數，它是這樣的：

<div class="col-md-3" ng-controller="ClientesCtrl">
    <div ng-init="get_cliente();>
        <div class="label">{{pagedClientes.length || "00"}}</div>
        <div class="text">clientes totais</div>
    </div>
</div>
<div class="col-md-3" ng-controller="ProjectsCtrl">
    <div ng-init="get_projects()">
        <div class="label">{{pagedProjects.length || "00"}}</div>
        <div class="text">Processos totais</div>
    </div>
</div>
<div class="col-md-3">
    <div>
        <div class="label">00</div>
        <div class="text">Processos abertos</div>
    </div>
</div>
<div class="col-md-3">
    <div>
        <div class="label">00</div>
        <div class="text">Compromissos abertos</div>
    </div>
</div>

<div class="table-body" ng-controller="ClientesCtrl">
    <table ng-init="get_clients()">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="client in pagedClients | limitTo:-5 | orderBy:'-id'" ng-if="pagedClients.length > 0">
                <td>{{cliente.cod}}</td>
                <td>{{cliente.nm_client}}</td>
                <td>
                    <a class="bt-t bt-inf" href="#/detcliente/{{cliente.id}}"></a>
                </td>
            </tr>
            <tr ng-if="pagedClientes.length == 0">
                <td colspan="3"><h3>No client</h3></td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table-body" ng-controller="ProjectsCtrl">
    <table ng-init="get_projects()">
        <thead>
            <tr>
                <th>ID</th>
                <th>Project</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="project in pagedProjects | limitTo:-5 | orderBy:'-id'" ng-if="pagedProjects.length > 0">
                <td>{{project.cod}}</td>
                <td>{{project.nm_cliente}}</td>
                <td>
                    <a class="bt-t bt-inf" href="#/detproject/{{project.id}}"></a>
                </td>
            </tr>
            <tr ng-if="pagedClientes.length == 0">
                <td colspan="3"><h3>No project</h3></td>
            </tr>
        </tbody>
    </table>
</div>

因此，基本上，我需要在需要顯示該數據的每個塊中添加controller ，還必須“初始化”函數以再次獲取數據。 這是一個簡單的示例，但我認為足以說明我需要解決的問題。

當我只需要向單個客戶展示他們的項目時，情況就更糟了。 因此，在我對所有這些控制器着迷之前，我想知道建立邏輯的最佳方法是文件夾/文件組織，代碼組織。 使用指令更好嗎？ 使指令調用控制器？ 呼叫多個控制器？ 要不然是啥？

Answer 1

您需要使用服務來獲取數據： https : //docs.angularjs.org/guide/services 。 對於您的代碼，它看起來像這樣：

    app.factory('clients', function ($http) {

        var getClients = function() { //Function - Get Cliente
            return $http.get("scripts/data/clientes.json")
            .success( function(data) {
                return data;
            })
            .error(function(data) {});
        };

        var add_cliente = function(cad) { //Function - Add Cliente
            $http.post('scripts/php/db.php?action=add_cliente',
                {
                    'cod': cad.cod,
                    [... more data ...]
                }
            )
            .success(function (data, status, headers, config) {})
            .error(function (data, status, headers, config) {});
        };

        return {
            getClients: getClients,
            add_cliente: add_cliente
        }

}) 

然后，您可以將服務注入控制器中並使用控制器中的功能：

    app.controller('Ctrl', function (clients, $scope) {
        clients.getClients().then(function (data) {
        $scope.myClients = data;
        });
    });

Answer 2

在控制器初始化時讀取客戶端數據 -無需使用ng-init 。

myApp.controller('ClientesCtrl', function ($scope, $http, $routeParams) {
    $scope.pagename = "Clientes";

    $http.get("scripts/data/clientes.json")
        .success( function(data) {
            $scope.pagedClientes = data;
        })
        .error(function(data) {});

    $scope.add_cliente = function() { //Function - Add Cliente
        $scope.formprevent = true;
        $http.post('scripts/php/db.php?action=add_cliente',
            {
                'cod': $scope.cad.cod,
                [... more data ...]
            }
        )
        .success(function (data, status, headers, config) {})
        .error(function (data, status, headers, config) {});
    };
});

控制器可以嵌套。 在div上定義控制器，該div包裹需要客戶數據的區域 。 與ProjectsController相同。 您甚至可以將兩個控制器合並為一個。

<div ng-controller="ClientesCtrl">
    <div class="col-md-3" >
        <div ng-init="get_cliente();>
            <div class="label">{{pagedClientes.length || "00"}}</div>
            <div class="text">clientes totais</div>
        </div>
    </div>
    ....