Question

此代码来自我正在使用ASP.Net MVC和AngularJS一起玩的演示。讨论是在youtube视频here上进行的，源代码在评论中进行了链接。有问题的代码部分位于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));

在同一模块源文件中，第二个模块名为＆＃39; commonModule＆＃39;被定义并引用为主模块的依赖项。这个commonModule使用了viewModelHelper，如下所示：

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

Answer 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){
    ...
}

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

1 个答案: