我有一个 AngularJS应用程序，其中所有控制器都在一个文件中，我想将其分解并分离每个控制器，然后将其重构为基于组件，因为它推荐用于 AngularJS 1.5 及更高版本。 我当前的结构如下所示：
.controller('HomeController', ['$scope', function ($scope){
//logic
}
])
所有其他控制器在我的应用程序中的同一个文件"控制器.js"中也是如此.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>'
})
参考：指南：到组件的路由
结语
John Papa写了一个非常好的angularjs风格指南，你应该看看并使用对你有价值的东西。但是，正如@MikeFeltman所说，angularjs 1.5 组件应用程序样式实践并不准确;因此，您应该查看Todd Motto的指南修订版，包括组件应用实践。
免责声明：我认为在制作组件之前将控制器转换为指令是没有意义的，您可以直接声明组件，因为组件是特殊指令，并且它们带有控制器，因此对您来说很方便。