javascript - 将 Controller 拆分为单独的文件

Question

我的 Angular 设置如下所示:

var dashboard = angular.module('Dashboard', ["ngRoute", "highcharts-ng"]);

dashboard.config(function($routeProvider, $locationProvider){
        $routeProvider.when('/route1', {
            templateUrl: 'route1.html',
            controller: 'DefaultCtrl'
        });
    })
.controller('DefaultCtrl', function($scope, $rootScope, $http, settings){
    function($scope, $rootScope, $http, settings){
        $http.get("http://admin.gmserver.net/games/all?userId=" + settings.userId).success(function(data){
            $scope.games = data;
            $rootScope.gameId = "";
            $rootScope.gameName = "";
            $rootScope.apiName = "";
            $rootScope.$broadcast("loaded");
        });
    }
})

这成功了。然后我尝试将它们分成多个文件(每个 Controller 一个)，现在看起来像这样:

模块文件:

angular.module('Dashboard', ["ngRoute", "highcharts-ng"]);

angular.module('Dashboard').config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider){
        $routeProvider.when('/route1', {
            templateUrl: 'route1.html',
            controller: 'DefaultCtrl'
        });
    }
])

Controller 文件:

angular.module('Dashboard').controller("DefaultCtrl", ['$scope', '$rootScope', '$http', 'settings',
    function($scope, $rootScope, $http, settings){
        $http.get("http://admin.gmserver.net/games/all?userId=" + settings.userId).success(function(data){
            $scope.games = data;
            $rootScope.gameId = "";
            $rootScope.gameName = "";
            $rootScope.apiName = "";
            $rootScope.$broadcast("loaded");
        });
    }
]);

现在，当我加载页面时，我得到:

我正在加载这样的文件:

<script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="/media/js/highcharts-ng.min.js"></script>
<!-- Begin app code -->
<script src="/admin/Dashboard.js"></script>
<!-- Built with smarty -->
<script>
    angular.module('Dashboard').value("settings", {
        userId: "{$userId}",
        secret: "{$secret}"
    });
</script>
<script src="/admin/components/default/DefaultController.js"></script>
<script src="/admin/components/game/GameController.js"></script>
<script src="/admin/components/leaderboard/LeaderboardController.js"></script>
<script src="/admin/components/newsFeed/NewsFeedController.js"></script>

我确实注意到，注释掉以下其中一项可以阻止“噢，快照”错误。

• DefaultController.js 文件
• 内联 JavaScript
• highcharts-ng.min.js 文件

编辑:

我将模块的名称更改为我的站点名称，并使 Dashboard 成为如下依赖项:

angular.module('GMServer', ["ngRoute", "highcharts-ng", "Dashboard"]);
angular.module('Dashboard')

这解决了“哦，啪”问题，但现在我收到此错误:https://docs.angularjs.org/error/$injector/nomod?p0=Dashboard

Answer 1

我不完全确定当您调用相同的 angular.module 时会发生什么好几次了，但我会避免这样做。

您想要全局保存模块，以便可以在不同的文件中引用它，而不是调用 angular.module('Dashboard')每次:

    window.Dashboard = angular.module('Dashboard', ["ngRoute", "highcharts-ng"]);

    window.Dashboard.config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider){
            $routeProvider.when('/route1', {
                templateUrl: 'route1.html',
                controller: 'DefaultCtrl'
            });
        }
    ])

和

    window.Dashboard.controller("DefaultCtrl", ['$scope', '$rootScope', '$http', 'settings',
        function($scope, $rootScope, $http, settings){
            $http.get("http://admin.gmserver.net/games/all?userId=" + settings.userId).success(function(data){
                $scope.games = data;
                $rootScope.gameId = "";
                $rootScope.gameName = "";
                $rootScope.apiName = "";
                $rootScope.$broadcast("loaded");
            });
        }
    ]);

您只需要确保您的 <script>标签以正确的顺序包含。

不过要避免污染窗口对象，您可能想要命名 window.App 下的所有内容。或者使用 requireJS 或 Browserify 之类的东西。

<小时/>

编辑

正如 @Sunil 和 documented here 所指出的那样，检索像 OP 所做的那样的模块是完全安全的。