Question

我正在使用带有角度js的弹簧启动应用程序并且撞墙。我有启动应用程序的骨头完成，但我遇到控制器js文件的问题。当我运行spring boot应用程序时，我得到一个白色的空白屏幕。我哪里出错了，还有一种更清洁或更有效的控制器编码方式吗？我将如何添加不同的控制器，就像我一直在做的那样？

    angular.module('myApp', ['ngRoute']).controller('shipwreckListController', function($scope, $state, popupService, $window, Shipwreck) {
    $scope.shipwrecks = Shipwreck.query(); // Fetch all shipwrecks, - issues a GET to api/vi/shipwrecks
    $scope.deleteShipwreck = function(shipwreck) {
        if(popupService.showPopup('Really delete this?')){
            shipwreck.$delete(function(){
                $scope.shipwrecks = Shipwreck.query();
                $state.go('shipwrecks');
            });
        }
    };
}).controller('shipwreckViewController', function($scope, $stateParams, Shipwreck){
    $scope.shipwreck = Shipwreck.get({id: $stateParams.id}); // get a single shipwreck. Issue a GET to /api/v1/shipwrecks/:id
}).controller('shipwreckCreateController', function($scope, $state, $stateParams, Shipwreck){
    $scope.shipwreck = new Shipwreck(); // create new shipwreck instance, properties will be set via ng-model on UI
    $scope.addShipwreck = function() {
        $scope.shipwreck.$save(function() {
            $state.go('shipwrecks'); // on success go back to the list
        });
    };
}).controller('shipwreckEditController', function($scope, $state, $stateParams, Shipwreck){
    $scope.updateShipwreck = function() {
        $scope.shipwreck.$update(function(){
            $state.go('shipwrecks');
        });
    };
    $scope.loadShipwreck = function() {
    $scope.shipwreck = Shipwreck.get({id: $stateParams.id})};

    $scope.loadShipwreck();

});

Answer 1

我之前没有使用过Spring Boot，所以我不确定为什么它没有正确加载。以某种方式通过Spring Boot注入Shipwreck和popupService的引用吗？如果没有，您将需要在模块声明中引用定义它们的模块。

关于你的第二个问题，设计一个“更干净”和更“高效”的代码库需要你将“东西”分成他们自己的文件。基本上每个“东西”1个文件。在这种情况下，每个控制器有1个文件，模块声明有1个文件。

模块本身明确地定义如下：

angular.module('myApp', ['ngRoute', 'other dependency', 'another', 'etc']);

您可以使用以下语法将控制器（和其他内容）添加到您已在另一个文件中定义的模块中：

angular.module('myApp').controller(...);

然后你应该有一个捆绑过程，将模块中的所有相关文件合并到一个文件中。通常，这将“缩小”您的js文件，这需要进一步调整您的代码以确保它“缩小安全”。默认情况下，Angular的依赖注入格式不安全。这是一个“缩小安全”控制器的例子：

angular
 .module('myApp')
 .controller('controllerName', ['$scope', '$state', 'etc', function($scope, $state, etc){
      //note that the index order of $scope
      //and other dependencies is important 1 matches 1, 2 matches 2, etc.
  }]);

AngularJS数据绑定控制器

1 个答案: