立即调用Angular 1的函数表达式抛出异常

Question

我正在阅读Angular Style Guid并建议使用立即调用函数表达式（IIFE）。当我转换我的应用程序以使用它时，每次运行它时，我都会在运行时开始获取exception。例外是因为它无法找到应用程序模块。

我确保在我的布局页面（asp.net项目）中以正确的顺序包含以下文件

<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/toolkit.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/angular-resource.min.js"></script>
<script src="~/App/DocumentationApp.js"></script>
<script src="~/App/Controllers/DocumentationListController.js"></script>
<script src="~/App/Services/TopicsService.js"></script>

如果我删除了IIFE实现，它都可以正常运行而没有任何错误。我究竟做错了什么？这可能是因为我在共享的asp.net布局中使用JQuery吗？在布局运行之后，我的视图中使用了ng-app指令。

IIFE版本

  

DocumentationApp.js

(function () {
    'use strict';
    angular.module('documentationApp', ['ngRoute', 'ngResource'])
        .config(configureRoutes);

    function configureRoutes($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/app/Templates/index.html',
            controller: 'DocumentationListController'
        }).otherwise({
            redirectTo: '/',
        })
    }
})

  

DocumentationListController.js

(function () {
    'use strict';
    angular
        .module('documentationApp')
        .controller('DocumentationListController', DocumentationListController);

    function DocumentationListController(topicService) {
        var viewModel = this;
        viewModel.name = 'bob';
        topicService.get().$promise
            .then(function (response) {
                viewModel.model = response;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
})

  

TopicsService.js

(function () {
    'use strict';
    angular
        .module('documentationApp')
        .factory('topicService', getTopics);

    function getTopics($resource) {
        return $resource('/api/documentation/GetTopics');
    }
})

非IIFE版本

  

DocumentationApp.js

angular.module('documentationApp', ['ngRoute', 'ngResource'])
    .config(configureRoutes);

function configureRoutes($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/app/Templates/index.html',
        controller: 'DocumentationListController'
    }).otherwise({
        redirectTo: '/',
    })
}

  

DocumentationListController.js

angular
    .module('documentationApp')
    .controller('DocumentationListController', DocumentationListController);

function DocumentationListController(topicService) {
    var viewModel = this;
    viewModel.name = 'bob';
    topicService.get().$promise
        .then(function (response) {
            viewModel.model = response;
        })
        .catch(function (error) {
            console.log(error);
        });
}

  

TopicsService.js

angular
    .module('documentationApp')
    .factory('topicService', getTopics);

function getTopics($resource) {
    return $resource('/api/documentation/GetTopics');
}