AngularJS 1.5 component example

Question

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.

Solution 1

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>

Solution 2

templateUrl is the path to your template file.

For example

app.component('myview', {
  bindings: {
    items: '='
  },
  templateUrl: 'mycollection/view.html',
  controller: function ListCtrl() {}
});

view.html

<h1> Welcome to this view </h1>

As shown in above example, you must have view.html file inside mycollection directory.