这个 angularjs 代码在工厂及其功能方面做了什么答案

【问题标题】：What is this angularjs code doing with regards the factory and its function这个 angularjs 代码在工厂及其功能方面做了什么
【发布时间】：2016-03-18 15:00:29
【问题描述】：

这段代码来自我正在使用 ASP.Net MVC 和 AngularJS 一起玩的演示。讨论是在 youtube 视频here 上进行的，源代码链接在 cmets 中。有问题的代码部分位于 Angular 模块定义的主要 JavaScript 源文件中。我对 AngularJS 很熟悉，但是我不明白这种语法。我的猜测是工厂定义使用的函数只是被分成不同的区域，而不是全部包含在工厂本身的同一代码块中？

见下文

为什么要像这样（都在括号内）用包装器来定义这个函数？它不在任何控制器或服务中。它只是在与模块定义相同的文件中。

是否只是将工厂函数的定义与工厂定义本身分开？

还有，最后(window.MyApp))的目的是什么；服务？

有问题的功能：

(function (myApp) {
    var viewModelHelper = function ($http, $q, $window, $location) {

        var self = this;

        self.modelIsValid = true;
        self.modelErrors = [];

        self.resetModelErrors = function () {
            self.modelErrors = [];
            self.modelIsValid = true;
        }

        self.apiGet = function (uri, data, success, failure, always) {
            self.modelIsValid = true;
            $http.get(MyApp.rootPath + uri, data)
                .then(function (result) {
                    success(result);
                    if (always != null)
                        always();
                }, function (result) {
                    if (failure != null) {
                        failure(result);
                    }
                    else {
                        var errorMessage = result.status + ':' + result.statusText;
                        if (result.data != null && result.data.Message != null)
                            errorMessage += ' - ' + result.data.Message;
                        self.modelErrors = [errorMessage];
                        self.modelIsValid = false;
                    }
                    if (always != null)
                        always();
                });
        }

        self.apiPost = function (uri, data, success, failure, always) {
            self.modelIsValid = true;
            $http.post(MyApp.rootPath + uri, data)
                .then(function (result) {
                    success(result);
                    if (always != null)
                        always();
                }, function (result) {
                    if (failure != null) {
                        failure(result);
                    }
                    else {
                        var errorMessage = result.status + ':' + result.statusText;
                        if (result.data != null && result.data.Message != null)
                            errorMessage += ' - ' + result.data.Message;
                        self.modelErrors = [errorMessage];
                        self.modelIsValid = false;
                    }
                    if (always != null)
                        always();
                });
        }

        self.goBack = function () {
            $window.history.back();
        }

        self.navigateTo = function (path) {
            $location.path(MyApp.rootPath + path);
        }

        self.refreshPage = function (path) {
            $window.location.href = MyApp.rootPath + path;
        }

        self.clone = function (obj) {
            return JSON.parse(JSON.stringify(obj))
        }

        return this;
    };
    myApp.viewModelHelper = viewModelHelper;
}(window.MyApp));

在同一个模块源文件中，名为“commonModule”的第二个模块被定义并作为主模块的依赖项引用。这个 commonModule 像这样使用 viewModelHelper：

commonModule.factory('viewModelHelper', function ($http, $q, $window, $location) {
    return MyApp.viewModelHelper($http, $q, $window, $location);
});

【问题讨论】：

不能真正说出它在做什么，但函数的声明方式称为立即调用函数 (IIF)。所以它在声明后立即调用自己，所以它不会等待其他人调用它，并将 window.MyApp 的值作为 myApp 的值传入。

标签： angularjs asp.net-mvc

【解决方案1】：

我认为这种代码风格只是一种不同的方法。正如 Queti 在评论中所说，代码使用 IIFE，这是避免全局范围和许多其他事情的推荐方法。

对于 AngularJS 风格指南，要走的路是 John Papa Github：

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

阅读它你会更多地了解 IIFE，并看到你展示的这段代码有一些缺陷，比如没有被保存以供缩小。

除此之外，您显示的代码可以翻译成：

commonModule.factory('viewModelHelper', viewModelHelper);

viewModelHelper.$inject = ['$http', '$q', '$window', '$location'];
function viewModelHelper($http, $q, $window, $location){
    ...
}

【讨论】：