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

我有一个角度设置，看起来像这样：

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

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

这起作用了。然后我尝试将它们分割成多个文件，每个控制器一个文件，现在看起来如下：

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

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

模块文件：

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

现在，当我加载页面时，我得到以下信息：

我加载的文件如下所示：

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

<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的问题，但现在我得到了这个错误：

我不完全确定当您多次调用同一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.App下命名所有内容，或者使用诸如requireJS或Browserify之类的工具

编辑

---

在@Sunil和

控制台中出现的错误是什么？您是否已将控制器文件包含在index.html中？我无法打开控制台，它会锁定您是否正在加载带有标记的控制器文件？我怀疑这会导致这种情况，但我只是想排除它。@DevinH。我更新了问题是的，我删除了我的评论，因为我是在你添加HTML代码之前开始写的。多次调用angular.module'myModuleName'是非常安全的。这是检索模块的预期方式。是的，很高兴知道。你永远都不知道我是谁。谢谢你知道，关于angular，这是有记录的。此外，代码可以自由查看，因此它不像是一个秘密。