Javascript 正确使用角度MVC设置

请随时澄清您在这里看到的任何误解；我不是一个前端的家伙

现在，我读到很多逻辑不应该存在于控制器中，而应该放在其他地方。但我看到的大多数显示代码都没有指定它属于哪个文件。在我继承的这个项目中，我有4个文件处理主要功能：

• 控制器-

  autoDeploy.js

• 服务-

  autoDeploy.service.js

• 模块-

  autoDeploy.module.js

• 指令-

  Directives.js

directives.js

只包含我希望在单击按钮时注入DOM的模板，稍后将引用这些指令

autoDeploy.module.js

执行所有的

module.config

和

$stateProvider

路由工作；除了我最初的修改之外，我不会去触摸它，以指向我正在制作的新页面，这样它就可以被正确地路由到

autoDeploy.service.js

：在我看到的示例中，

.factory（）

的最后一个参数（或

.service（）

）通常作为函数打开，文件中的所有功能都发生在其中。我的不是那样的，它是一个iLife，工厂是一个独立的命令，后面是一个构造函数。以下是我所拥有的：

(function () { //start iife

    'use strict';


    angular.module('gms.autoDeploy')
        .factory('AutoDeployService', ["$http", "$q", "$log", "$cookies", "APP_CONFIGS", "SweetAlert", "$timeout", "GridSettingsService", "APP_USER", AutoDeployService]);

    function AutoDeployService($http, $q, $log, $cookies, APP_CONFIGS, $timeout, SweetAlert, GridSettingsService, APP_USER) {
        //return service object at bottom of function

        function returnOne() {
            return "one";
        }

        var service = {
            returnOne: returnOne
        };

        return service;

    } //end AutoDeployService
}()); //end iife

为什么最初的开发者

• 作为一种生活
• 将

  服务

  变量设置为函数映射后返回该变量
• 把所有的功能都放在类似构造函数的函数中

我对上述第二和第三个答案的猜测是，它是服务的构造函数，控制器可以知道它是一个可用对象，因为我们将它作为参数传递给控制器，如下面代码的顶行所示。我对“构造函数”的参数也不太了解，但我可以稍后查找这些参数

现在是控制器。与上面的服务不同，控制器声明在

.controller（）

的参数中作为函数打开，正如我在其他地方看到的那样。这里是简化的（删除了具有类似功能的方法）：

angular.module（“gms.autoDeploy”）.controller（'AutoDeployController'，['$scope'，'$compile'，'AutoDeployService'，
函数（$scope、$compile、AutoDeployService）{
var vm=这个；
init（）；
函数init（）{
vm.isinstated=true；
vm.data={
“参数”：[]
};
}
//从服务调用函数以显示我们可以通过
//从控制器到服务的数据
vm.change=函数（）{
vm.message=AutoDeployService.returnOne（“非一”）；
};
//分配给按钮的函数单击DOM
//将模板插入标记所在位置的指令
vm.addCopy=函数（ev、ATTR）{
var copy=angular.element（document.createElement（'copy'））；
var el=$compile（copy）（vm）；
元素（document.getElementsByTagName（“tib副本”））.append（副本）；
vm.inserther=el；
};
//此方法从通过单击按钮动态添加的以下字段中提取数据：
//-TIBCO服务器
//-TIBCO域
//-TIBCO应用程序
vm.getTibPromotionData=函数（）{
//添加所有TIBCO服务器
var servers=document.getElementsByName（“tibServer”）；
var tibSvrList=[]；
对于（var i=0；i

---

如果您在控制器中看到任何应该属于

autoDeploy.service.js

文件的内容，请告诉我。此外，如果有人有过这种文件命名约定的经验，我很想听听关于为什么会有名为

*.service.js

和

*.module.js

的文件，以及

*.service.js

文件是否与服务和工厂的概念有关，或者它是否是概念性的，就好像它只是对后端服务组件的引用。

controller中的方法论完全倒退到典型的角度方法论，即数据模型用于驱动视图，而不是dom操作方法。这是一个值得学习的坏榜样。文件名是概念性的，并且是任意的请参见：谢谢@charlietfl。我喜欢阅读，学到了一些东西。但最终，我仍然不知道控制器中的方法应该放在哪里。如您所见，它们使用

this

和

$compile

变量来创建和插入元素。否则我怎么做？我需要在点击一个按钮时动态添加模板，除了在控制器中，我看不到如何在其他任何地方进行添加。我应该向服务中添加什么以使其工作，还是应该为该功能创建另一个要驻留的文件？通常您会使用

angular.module("gms.autoDeploy").controller('AutoDeployController', ['$scope', '$compile', 'AutoDeployService',
    function ($scope, $compile, AutoDeployService) {
        var vm = this;

        init();

        function init() {
            vm.isInstantiated = true;
            vm.data = {
                "parameter": []
            };

        }

        // calling a function from the service to show that we can pass
        // data from controller to service
        vm.change = function () {
            vm.message = AutoDeployService.returnOne("not one");
        };

        //function assigned to button click on the DOM allowing
        // the directive to inject the template where the <tib-copy> tag is
        vm.addCopy = function (ev, attrs) {
            var copy = angular.element(document.createElement('copy'));
            var el = $compile(copy)(vm);
            angular.element(document.getElementsByTagName("tib-copy")).append(copy);
            vm.insertHere = el;
        };

        // This method extracts data from the following fields dynamically added by the click of a button:
        //  - TIBCO Server(s)
        //  - TIBCO Domain(s)
        //  - TIBCO Application(s)
        vm.getTibPromotionData = function () {
            // Add all TIBCO servers
            var servers = document.getElementsByName("tibServer");
            var tibSvrList = [];
            for (var i = 0; i < servers.length; i++) {
                tibSvrList.push(servers[i].value);
            }

            // Add all TIBCO domains
            var domains = document.getElementsByName("tibDomain");
            var tibDomainList = [];
            for (i = 0; i < domains.length; i++) {
                tibDomainList.push(domains[i].value);
            }

            // Add all applications
            var tibApps = document.getElementsByName("tibApp");
            var tibAppList = [];
            for (i = 0; i < tibApps.length; i++) {
                tibAppList.push(tibApps[i].value);
            }


            // Add the processed data to the final JSON
            vm.data.parameter.push({
                "name": "TIBCO_Promotion",
                "value": JSON.stringify("[{\"server\":[" + tibSvrList + "]},{\"domain\":[" + tibDomainList + "]},{\"application\":[" + tibAppList + "]}]")
            });
        };
    }
]);