Properly using an Angular MVC setup

Question

Feel free to clear up any misunderstandings you see here; I'm not a front end guy.

Now, I've read that much of the logic shouldn't exist in the controller, and that it should be put somewhere else. But most places I look that show code don't specify which file it belongs in. On this project that I've inherited I have 4 files that deal with the main functionality:

• A controller - autoDeploy.js
• A service - autoDeploy.service.js
• A module - autoDeploy.module.js
• Directives - directives.js

directives.js just contains the templates that I want to inject into the DOM upon the click of a button, the directives will be referenced later.

autoDeploy.module.js does all of the module.config and $stateProvider routing stuff; I don't touch it beyond my initial modification to point to the new page I'm making so it can be properly routed to.

autoDeploy.service.js: In the examples I've seen, the .factory()'s (or .service()) last parameter usually opens up as a function, and all of the functionality in the file happens inside there. Mine isn't like that, it's an iife with the factory being a standalone command followed by what looks like a constructor. Here's what I have:

(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

Why did the original developer...

• Use as an iife?
• Return the service variable after making it a function mapping?
• Put all of the functionality in the constructor like function?

My guess to the above 2nd and 3rd answers is that it is the constructor for the service and the controller can some how know it's a usable object because we pass it in as a parameter to the controller as you can see on the top line of the code below. I also don't know much about the parameters for the "constructor", but I can look those up later.

Now for the controller. Unlike the service above, the controller declaration does open up as a function in the parameters of .controller() as I've seen other places. Here it is, simplified (methods with similar functionality are cut out):

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 + "]}]")
            });
        };
    }
]);

Please, let me know if you see anything in the controller that should belong in the autoDeploy.service.js file. Furthermore, if anyone has experience with this file naming convention, I'd love to hear an explanation as to why there are files named *.service.js and *.module.js, and if the *.service.js file has anything to do with the concept of services and factories, or if it's intended to be conceptual, as if it's just a reference to being the back end services component.