AngularJS 1.6.7控制器分解和重构为组件

我有一个angularJS应用程序，其中所有控制器都在一个文件中，我希望将其分解并分离每个控制器，然后根据angularJS 1.5及以上版本的建议将其重构为基于组件的。我当前的结构如下所示：

.controller('HomeController', ['$scope', function ($scope){
    //logic
}
])

所有其他控制器都在同一个文件“controllers.js”中，在我的app.js中，我会：

    var app = angular.module('app', [
      'services',
      'controllers',
]);

---

您建议如何将控制器分解为组件，谢谢您的回答和建议。

如果您使用的是

$scope

，您可以从scope改为

controllerAs

语法开始，即

$scope.foo='bar'

->

{foo}

将变成

this.foo='bar'

->

{{ctrl.foo}}

controllerAs语法 由此：

app.controller('HomeController', ['$scope', function ($scope){
    $scope.title = 'Home';
}]);

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'home/home.html',
    controller: 'HomeController'
})

为此：

app.controller('HomeController', [function (){
    this.title = 'Home';
}]);

声明组件 之后，您可以通过两种方式声明组件：

使用现有控制器进行部分重构：

app.component('homeComponent', {
    controller: 'HomeController'
});

app.component('homeComponent', {
    controller: [ function (){
        this.title = 'Home';
    }]
});

或者，完全重构替换控制器：

app.component('homeComponent', {
    controller: 'HomeController'
});

app.component('homeComponent', {
    controller: [ function (){
        this.title = 'Home';
    }]
});

重构路由器 假设您使用的是

ui路由器

（它与

ngRoute

非常相似，所以不会有问题）

由此：

app.controller('HomeController', ['$scope', function ($scope){
    $scope.title = 'Home';
}]);

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'home/home.html',
    controller: 'HomeController'
})

为此，对于

ui路由器1.0+

：

$stateProvider
  .state('home', {
    url: '/',
    component: 'homeComponent'
  })

或者，对于旧版本：

$stateProvider
  .state('home', {
    url: '/',
    template: '<home-component></home-component>'
  })

$stateProvider
.州（“家”{
url:“/”，
模板：“”
})

参考号：

最后的想法 有一个很好的例子，你应该看看，并用对你有价值的东西。然而，正如所知，angularjs 1.5组件应用程序风格实践并不准确；因此，您应该了解本指南的内容，包括组件应用程序实践

免责声明：我认为在制作组件之前将控制器转换为指令没有任何意义，您可以直接声明组件，因为组件是特殊指令，它们带有控制器，因此对您来说很方便

---

如果您使用的是

$scope

，您可以从scope改为

controllerAs

语法开始，也就是说，

$scope.foo='bar'

->

{{foo}

将变成

this.foo='bar'

{ctrl.foo}

controllerAs语法 由此：

app.controller('HomeController', ['$scope', function ($scope){
    $scope.title = 'Home';
}]);

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'home/home.html',
    controller: 'HomeController'
})

为此：

app.controller('HomeController', [function (){
    this.title = 'Home';
}]);

声明组件 之后，您可以通过两种方式声明组件：

使用现有控制器进行部分重构：

app.component('homeComponent', {
    controller: 'HomeController'
});

app.component('homeComponent', {
    controller: [ function (){
        this.title = 'Home';
    }]
});

或者，完全重构替换控制器：

app.component('homeComponent', {
    controller: 'HomeController'
});

app.component('homeComponent', {
    controller: [ function (){
        this.title = 'Home';
    }]
});

重构路由器 假设您使用的是

ui路由器

（它与

ngRoute

非常相似，所以不会有问题）

由此：

app.controller('HomeController', ['$scope', function ($scope){
    $scope.title = 'Home';
}]);

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'home/home.html',
    controller: 'HomeController'
})

为此，对于

ui路由器1.0+

：

$stateProvider
  .state('home', {
    url: '/',
    component: 'homeComponent'
  })

或者，对于旧版本：

$stateProvider
  .state('home', {
    url: '/',
    template: '<home-component></home-component>'
  })

$stateProvider
.州（“家”{
url:“/”，
模板：“”
})

参考号：

最后的想法 有一个很好的例子，你应该看看，并用对你有价值的东西。然而，正如所知，angularjs 1.5组件应用程序风格实践并不准确；因此，您应该了解本指南的内容，包括组件应用程序实践

免责声明：我认为在制作组件之前将控制器转换为指令没有任何意义，您可以直接声明组件，因为组件是特殊指令，它们带有控制器，因此对您来说很方便

---

它不一定是“推荐的”，它只是使它类似于Angular 2+。您的所有控制器都将被隔离。最好先将它们转换为指令，因为它们与组件没有太大区别@AlekseySolovey，这是真的，它使应用程序易于维护，我将遵循教程，感谢这个很棒的答案：）我看过这篇文章。我还从控制器到组件重构了5到6个angular应用程序。我看不出先走一步有什么好处。这是一个额外的，有时更复杂的步骤。也不需要在组件控制器内部使用vm。我认为那篇文章是可疑的。而且，很少有人写关于这次迁移的文章。阿维夫·本·约瑟夫就是其中之一，而且做得很好。我高度推荐他的博客：。他实际上也有一本关于这个主题的书。@MikeFeltman谢谢：）你能提供一个更好的解决方案吗？它不一定是“推荐的”，它只是使它类似于Angular 2+。您的所有控制器都将被隔离。最好先将它们转换为指令，因为它们与组件没有太大区别@AlekseySolovey，这是真的，它使应用程序易于维护，我将遵循教程，感谢这个很棒的答案：）我看过这篇文章。我还从控制器到组件重构了5到6个angular应用程序。我看不出先走一步有什么好处。这是一个额外的，有时更复杂的步骤。也不需要在组件控制器内部使用vm。我认为那篇文章是可疑的。而且，很少有人写关于这次迁移的文章。阿维夫·本·约瑟夫就是其中之一，而且做得很好。我高度推荐他的博客：。实际上他也有一本关于这个主题的书。@MikeFeltman谢谢：）你能提供一个更好的解决方案吗？如果可以的话，直接转到ui路由器1.0+并转到组件。它工作得非常好，感觉非常干净。谢谢大家，现在我在注册控制器时遇到了问题，因为我使用的是webpack，所以我想我应该将home.component.js添加到所有组件的列表中，这些组件被捆绑到一个js文件中，该文件名为index.html？另外，John Papa的样式指南是《圣经》，但我最后一次看到，自从他搬到ng2后，他并没有真正保持它的最新状态。Todd的座右铭已经修改了，以反映Angular 1.5及更高版本的最佳实践@Lenilson de Castro感谢您提供清晰的指导，我有一个问题，如果我想在页面中包含一个组件，而不是通过路由，该怎么办，例如，我有搜索组件i