javascript - 需要 angularjs SPA 的建议

标签 javascript angularjs

我正在写SPA,SPA一直具有几乎相同的结构(DOM)(除了授权表单)。视觉上看起来完全一样,但它们之间几乎没有什么不同。模型在不同的情况下是不同的,应用程序的行为取决于此时使用的模型。例如,一个模型如下所示:

<table class="matrix" ng-if="search_result_type=='find_company'">
    <tr ng-class="{matrix_row: !row.show}" ng-style="multiStyle(row, this)" class="animation" ng-repeat="row in search_result | filter:cacheTemplate track by $index">
        <td class="properties">{{row.name}}</td>
        <td class="properties" ng-if="isArray(row.contact)" ng-click="row.close!='disable' && row.show!=true ? row.show=true : null" colspan="{{row.show ? 2 : 1}}">
            <div ng-show="!row.show" ng-class="{multi_close : isMulti(row)}">{{row.contact[0].name}}</div>
            <div ng-repeat="ctx in row.contact track by $index" class="matrix_row multi_cell" style="line-height: 3; width: 100%; position: relative;" ng-show="row.show" ng-click="row.close!='disable' ? alert('загрузка контакта '+ ctx.name) : null">
                <div style="display: inline-block; width: 49%;">{{ctx.name}}</div>
                <div style="display: inline-block; width: 49%;">{{ctx.phone}}</div>
                <div class="block" ng-if="$index==row.contact.length-1" ng-mouseover="row.close='disable'" ng-mouseleave="row.close='enable'" ng-click="row.close!='enable'? row.show=false : null"></div>
            </div>

        </td>
        <td class="properties" ng-if="!isArray(row.contact)">{{row.contact}}</td>
        <td class="properties"  ng-show="!row.show">{{row.company_phone}}</td>
        <td class="properties">{{row.Legal_address}}</td>
    </tr>
</table>

第二个模型:

 <table class="matrix" ng-if="search_result_type=='find_calculation'">
    <tr ng-class="{matrix_row: !row.show}" class="animation" ng-click="loadCalculation(row.id)" ng-style="multiStyle(row, this)" ng-repeat="row in search_result | filter:cacheTemplate track by $index">
        <td class="properties">{{row.name}}</td>
        <td class="properties">{{row.a_limit | currency:'RUB '}}</td>
        <td class="properties">{{row.total_price | currency:'RUB '}}</td>
        <td class="properties">{{row.amount}}</td>
        <td class="properties">{{row.date}}</td>
    </tr>
</table>

最后一个:

 <table class="matrix"  ng-if="search_result_type=='load_calculation'" ng-repeat="park in parks track by $index" ng-init="parentIndex = $index">
        <tbody>
            <tr ng-repeat="process in processes | filter : { park: parentIndex } track by $index">
                <td class="properties">{{process[1]}}</td>
                <td class="properties">{{process[2]}}</td>
                <td class="properties">{{process[3]}}</td>
                <td class="properties">{{process[4]}}</td>
                <td class="properties">{{process[5]}}</td>
                <td class="properties">{{process[6]}}</td>
            </tr>
        </tbody>
    </table>

我不是在寻找答案,而是在寻求建议。我需要使用多少个 Controller ?每个型号一个?如果我让这个html结构完全一样会更好吗?

最佳答案

只会使用 1 个 Controller ,其中 html 包含一些内容,例如

您还可以为此 Controller 编写一个工厂来处理相关的内容。 我认为不需要多个 Controller ,但我想如果您使用一个或多个 Controller ,这非常取决于您的代码。

关于javascript - 需要 angularjs SPA 的建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45054135/

相关文章:

javascript - Angularjs ng-click 指令内部。 ControllerAs 连接问题

javascript - React API 处理 Fetch 调用中的错误 : TypeError-Cannot read property 'temp' of undefined

javascript - 如何将数据从 Controller 传递到ajax调用AngularJS的指令

javascript - typescript 索引签名访问器

javascript - .removeChild() 不起作用

angularjs - 使用 ui-router 时, Controller 可以从父 Controller 继承范围吗

javascript - 在 Rails 中部署 Angular2 演示应用程序还是作为独立应用程序?

AngularJS - 指令双向绑定(bind)不适用于隔离范围

javascript - 如何在node.js中同步从Amazon S3存储桶下载文件

javascript - 如何使用 jQuery 循环遍历 HTML 元素和 JSON?