Using component in angularjs 1.5

[S kumar]

I am working on component based architecture using angular 1.5 and have created a component similar to below in my application I can able to access functions /properties in the controller function within component file like below .But if I move controller to a separate file and getting error "controller is not defined" at Somecomponent.js .Can anyone help me what is the cause of this issue?

Somecomponent.js

(function(){
angular.module('myapp')
    .component('myComponent', {
        templateUrl: 'some.html',
        controller: MyController, //error at this line
        controllerAs: 'myCtrl',
        bindings: {
            items: '<'
        }
    });
function MyController()
{
}
})();

Thanks in advance

[Sander Elias]

Hi S,

Your code should just work. At least while you define your function as in this example by a function declaration. However, it will fail if you use an function expression to define your function.

Regards

Sander

[S kumar]

Thanks Sander.The above example is working fine. I want controller logic in a separate file ,so  I moved controller function to a separate file and getting error at Somecomponent.js file.

MyController.js

function MyController()
{
	
}

[S kumar]

I did similar to this but getting error "controller is not defined at component file.

SompeComponet.js

(function(){

angular.module('myapp')

    .component('myComponent', {

        templateUrl: 'some.html',

        controller: MyController, //error at this line

        controllerAs: 'myCtrl',

        bindings: {

            items: '<'

        }

    });

MyController.$inject=[dependencies];

})();

MyController.js

(function(){

function MyController(dependencies)

{

 

}

})();

Regards,

kumar

[Sander Elias]

Hi S,

Well, that explains it. If you move your controller to a separate file, you should import it somehow into your component file. I don't know what module/build system you are using, so I can't tell you how to accomplish this.

Now your component (as it sits inside IIFE) can not find your controller. Also, defining controllers on the global scope does not work since 1.3B15, and is a bad practice to begin with.

Regards

Sander

[S kumar]

Thank you. I appreciate your time . Is this good practice to put component definition and controller logic in the  same file ?

I googled but could not find any examples showing component definition and controller logic in a separate file, it could be great if you could provide some example demonstrating this.

Thanks

[Sander Elias]

Hi,

Yes, it is currently considered a best practice to place them in the same file.

If you don't want to do that, you can use the module system, and define the controller using the module.controller pattern. Then you can use the controller names string in your component.

Regards

Sander

[S kumar]

Thank you so much.