CODEWITHSUNDEEP
angularjsangularjs-components
MBX
MBX

Reputation: 154

AngularJS 1.5 component example

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.

Upvotes: 3

Views: 13958

Answers (2)

Dor Cohen
Dor Cohen

Reputation: 17080

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>

Upvotes: 3

Vivek
Vivek

Reputation: 13238

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.

Upvotes: 1

Related Questions