AngularJS 1.5 component example

angularjs angularjs-components
MBX picture MBX · Dec 23, 2015 · Viewed 12.2k times · Source

I'm working on an Angularjs project using .component() with template property, but I don't know how to use templateUrl. Is there anyone familiar with that can provides me a working example? Thanks.

Answer

Dor Cohen picture Dor Cohen · Mar 8, 2016

To use the angular component properly I recommend using controllerAs syntax.

angular.module('myApp')
    .component('groupComponent', {
        templateUrl: 'app/components/group.html',
        controller: function GroupController(){
              this.innerProp = "inner";
        },
        controllerAs: 'GroupCtrl',
        bindings: {
            input: '<'
        }
    });

And on group.html you can consume at the following way:

<div>
{{GroupCtrl.input}}
{{GroupCtrl.inner}}
</div>

From the parent control You can pass any parameter as binding to the component, in this case from the parent HTML: 

<group-component input="someModel">
</group-component>

Related questions

AngularJS 1.5+ Components do not support Watchers, what is the work around?

I've been upgrading my custom directives to the new component architecture. I've read that components do not support watchers. Is this correct? If so how do you detect changes on an object? For a basic example I have custom component …

Read More
angularjs 1.5 component dependency injection

this may sound newb, but I have been following this tutorial for angularjs component. I am new to components and how do I inject a constant Utils or authService to my component like this? app.component('tlOverallHeader', { bindings: { data: '=…

Read More
How to watch component binding change using Angular component

How can I listen to angular component binding change and perform actions? angular.module('myapp') .component('myComponent', { templateUrl: 'some.html', controller: MyController, controllerAs: 'myCtrl', bindings: { items: '<' } }); now when items changes I want to perform another action using …

Read More