What is the best way to write a controller code in Component-based architecture APP?

There are several ways to write a controller in AngularJs. I do not know which is the best way to write a controller code file? Which one is the best approach?

1) The controller inside the component file

myApp.component.js

(function () {
  'use strict';

  angular
    .module('myApp')
    .component('myComponent', {
        templateUrl: 'test.html',
        controller: function() {
            var $ctrl = this;
        }
    });
})();

2) Component and controller in separate files

myApp.component.js

(function () {
  'use strict';

  angular
    .module('myApp')
    .component('myComponent', {
        templateUrl: 'test.html',
        controller: 'myController'
    });
})();

myController.controller.js

(function () {
  'use strict';

  angular
    .module('myApp')
    .controller('myController', function () {
    var $ctrl = this;
    });
})();

Source: AngularJS