我正在使用angularJS应用程序，其中所有控制器都在一个文件中，我希望将其拆分并分离每个控制器，然后根据angularJS 1.5及以上版本推荐将其重构为组件。我目前的结构如下：
.controller('HomeController', ['$scope', function ($scope){
//logic
}
])
并且所有其他控制器都在同一个文件“controllers.js”中，在我的app.js中我做了：
var app = angular.module('app', [
'services',
'controllers',
]);
您建议将控制器分解为组件，感谢您的答案和建议。
如果您正在使用$scope，您可以从范围更改为controllerAs语法，即$scope.foo = 'bar' - > <p>{{ foo }}</p>将成为this.foo = 'bar' - > <p>{{ $ctrl.foo }}</p>。
由此：
app.controller('HomeController', ['$scope', function ($scope){
$scope.title = 'Home';
}]);
对此：
app.controller('HomeController', [function (){
this.title = 'Home';
}]);
之后，您可以通过两种方式声明组件：
使用现有控制器的部分重构：
app.component('homeComponent', {
controller: 'HomeController'
});
或者，完全重构替换控制器：
app.component('homeComponent', {
controller: [ function (){
this.title = 'Home';
}]
});
假设您正在使用ui-router（它与ngRoute非常相似，所以它不会成为问题）。
由此：
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home/home.html',
controller: 'HomeController'
})
对此，对于ui-router 1.0+：
$stateProvider
.state('home', {
url: '/',
component: 'homeComponent'
})
或者，对于旧版本：
$stateProvider
.state('home', {
url: '/',
template: '<home-component></home-component>'
})
有一个非常好的style guide for angularjs written by John Papa，你应该看看，并使用什么是值得的。然而，正如@MikeFeltman所说的那样，angularjs 1.5组件的应用程序风格实践并不准确;因此，您应该查看指南的Todd Motto's revised version，包括组件应用程序实践。
免责声明：我认为在制作组件之前将控制器转换为指令没有意义，您可以直接声明组件，因为组件是特殊指令，它们带有控制器，因此对您来说很方便。