将控制器保存在不同的文件中在 Angular 中不起作用答案

【问题标题】：Keeping controllers in different files not working in Angular将控制器保存在不同的文件中在 Angular 中不起作用
【发布时间】：2015-05-21 13:19:18
【问题描述】：

我目前正在我的routes.js 中定义我的全局模块，但由于某种原因，没有创建其他控制器，并且我不断收到错误消息，说我的主应用程序模块“LiveAPP”不可用。这是我的代码：

routes.js

angular.module('LiveAPP', ['ngRoute'])

.config(function($routeProvider, $httpProvider) {
$routeProvider
  .when('/', {
    templateUrl : '/home.html',
    controller  : 'mainCtrl'
  })
  .when('/signup',{
    templateUrl : '/signup.html',
    controller  : 'signUpCtrl'
  })
  .when('/artist',{
    templateUrl : '/artistpage.html',
    controller  : 'artistCtrl'
  })
})

mainCtrl.js

angular.module('LiveAPP')
.controller('mainCtrl', ['$scope','$http', '$location',mainCtrl]);

function mainCtrl($scope,$http,$location){
  $scope.somefunc = function(artistname){
    dataFactory.ArtistfromSpotify()
    .success(function(data, status, headers, config){
      console.log(data)
    })

  }
};

signUpCtrl

angular.module('LiveAPP')
.controller('signUpCtrl', ['$scope','$http',signUpCtrl]);

function signUpCtrl($scope,$http){
  $scope.user = {
    email:'',
    password:''
  }

  $scope.postreq = function(user){
    $http({
          method: "post",
          url: "/signup",
          data:{
            user_username:user.email,
            user_password:user.password
          }      
      }).success(function(data){

        console.log("User posted to the database")
      });
};
}

艺术家Ctrl

angular.module('LiveAPP')
.controller('artistCtrl', ['$scope',function($scope){
  $scope.myRating = 
  {number:3}
}])
.directive("rateYo", function() {
    return {
        restrict: "A",
        scope: {
            rating: "="
        },
        template: "<div id='rateYo'></div>",
        link: function( scope, ele, attrs ) {
            console.log(scope.rating.number)
            $(ele).rateYo({
                rating: scope.rating.number
            });
        }
    };
});

我的印象是我可以使用angular.model('liveAPP').controller(...) 检索主 liveAPP 模块并在其他文件中添加控制器，但由于某种原因它不起作用。有人知道吗？

【问题讨论】：

您需要将您的 signUpCtrl 更改为
您是否在任何控制器文件之前加载routes.js？
这就是为什么我总是提倡每个文件一个模块。您可以按任何顺序加载文件，而不会遇到这些问题。

标签： angularjs

【解决方案1】：

为了详细说明我上面的评论，当您跨文件重复使用相同的模块时，您需要以正确的顺序加载文件以满足依赖关系，并确保在使用之前创建模块。

避免此问题的一种简单方法是为每个文件指定一个模块。例如

mainCtrl.js

(function() {
    angular.module('LiveAPP.main', [])

        .controller('mainCtrl', ...);
})();

在你的routes.js

(function() {
    angular.module('LiveAPP', [
        'ngRoute',
        'LiveAPP.main'
    ])

        .config(function($routeProvider, $httpProvider) {
            $routeProvider.when('/', {
                templateUrl: '/home.html',
                controller: 'mainCtrl'
            })...
        });
})();

【讨论】：

那么为每个控制器定义新模块是最佳实践吗？这就是我最初所做的，然后只是将它们全部注入到 routes.js 中，但后来我想在 routes.js 中创建一个工厂，我希望能够在控制器模块中使用这个工厂的功能，但在那里遇到了麻烦也。我应该为工厂创建新文件吗？如果是这样，我将如何确保我可以在各种控制器中使用这些功能？会不会就是这样angular.module('LiveAPP.main', ['factory'])？
我不知道我是否称其为 最佳实践，但它肯定是 angular-seed 项目的结构。我会说至少为每个文件定义新模块。在每个文件中只做一件事可能更整洁，但这取决于你。是的，您只需在需要的依赖项列表中包含所需的模块即可。
谢谢菲尔。这有帮助。

【解决方案2】：

很可能您的 html 文件包含的 js 文件顺序错误。您需要确保 routes.js 首先出现在 html 中。

【讨论】：

【解决方案3】：

你需要把 signUpCtrl.js 改成

angular.module('LiveAPP.controller', [])
.controller('signUpCtrl', ['$scope','$http',signUpCtrl]);

并将 LiveAPP.controller 注入到您的全局模块中

angular.module('LiveAPP', ['ngRoute', 'LiveAPP.controller'])

您不能在多个模块中拥有 LiveAPP。在所有控制器上进行相同的更新，并将模块名称注入到 routes.js

【讨论】：

这是不正确的。 angular.module(moduleName) 是 getter。传递依赖项的第二个数组参数使其成为 setter.