Question

按照Angular 1.5教程，他们将controller包裹在component()中，就像这样

angular.
module('myList').
component('myList', {
  templateUrl: 'template.html',
  controller: ['MyList',
    function MyController($scope){
      var self = this;
      $scope.get({
        id : '0'
      }).then(function(response){
        return self.contents;
      })
    }
  ]
});

为了准备迁移到Angular2，将controller置于自己的js文件中的最佳做法是什么？
我应该遵循这个例子，还是应该因为担心而将此代码分成2个文件？
注意：我刚刚意识到component()课程已于去年1.5出现，并且在此版本发布之前我已经被教程误导了。

Answer 1

我建议您将实体保留在不同的文件中，即使是module项目注册。让我解释一下这个简单的例子：

让我们假设您有一些更大的模块，其中包含UI内容module('uiStuff')。所以我建议这样的结构：

uiStuff（文件夹）

uiStuff.module.js
uiStuff.service.js

myList（文件夹）
- myList.component.js
- myList.controller.js
- myList.partial.html

您的模块文件将始终包含仅注册角度实体 - 服务，组件，指令等。将来，它会为您提供一些优势，因为Angular2中的此代码不需要您可以摆脱这些文件很容易。

示例 uiStuff.module.js ：

angular.module('uiStuff')
  .service('someService', SomeService)
  .component('myList', myListComponent);

其中SomeService - 一些函数构造函数，myListComponent是Component对象。我们在下面看到 myList.component.js ：

var myListComponent = {
    bindings: {
       variable:'<'
    },
    templateUrl: 'myList.partial.html',
    controller: MyController
    // and all other component settings
}

与控制器和HTML模板一样，只需单独的文件。当然，在我看来，考虑到迁移，最好切换到TypeScript语言，它会为你简化很多事情。

<强>结论：但无论如何，我的观点对于es5，es6和TypeScript AngularJs迁移策略都是通用的：

将实体保存在不同的文件中（控制器，组件，服务等）
将模块注册在单独的文件中（例如uiStuff.module.js）
尝试遵循Angular2命名惯例（name.service.js，name.component.js等。）

Answer 2

我建议： / * in mylist.controller.js * /

   function MyController($scope){
     //your code
    }

现在在我的视图/ Component中，

declare var MyController:any;

@Component({
    selector: 'app-elem',
    templateUrl: 'test.html'
})

export class MyComponent {  
  new MyController(this)
}

这里有一些建议，http://blog.rangle.io/upgrade-your-application-to-angular-2-with-ng-upgrade/

使用组件或使用单独的控制器

2 个答案: