编辑：

Question

我的角度设置看起来像这样：

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

这很有效。然后我尝试将它们分成多个文件（每个控制器一个），现在它看起来像这样：

模块文件：

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

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

控制器文件：

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

现在当我加载页面时，我得到了这个：

Aw, Snap

我正在加载这样的文件：

<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>

我注意到注释掉以下其中一个会停止Aw，Snap错误。

DefaultController.js档案
内联JavaScript
highcharts-ng.min.js档案

编辑：

我将模块的名称更改为我的网站名称，并使Dashboard依赖于此：

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

这解决了“Aw，Snap”问题，但现在我收到此错误：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这样的内容。

修改

像OP一样检索模块是非常安全的@Sunil和documented here

将控制器拆分为单独的文件

编辑：

1 个答案: