AngularJS 1 : Component basics

[cjmling]

How to use and exmples are present here https://docs.angularjs.org/guide/component

Some extra quick notes.

Bindings :

Most likely you will only need < and &

Example :

<chandu-bandu name="chandrajeet" profile="profile"></chandu-bandu>

@ use when you want to pass string value from that component element into component js. For value that will not change. For example name in this case. You will have that variable available in ctrl.name but in $onInit

< use when you want to pass data as object into the component js. Its one way binding . Read more https://docs.angularjs.org/api/ng/service/$compile#-scope-

Complete codes.

index.php <chandu-bandu name="chandrajeet" ></chandu-bandu>

whatever.html <div>{{ $ctrl.profile }}</div>

Whatever is set to ctrl.xx in index.js will be available in template.

index.js

.component('chanduBandu', {
        templateUrl: 'whatever.html',
        bindings: {
            name: '@',
        },
        controller: function ChanduBanduController(any dependency here or leave it blank) {
            var ctrl = this;            
       ctrl.$onInit = function () {
        ctrl.profile = {job: 'Dev'};
                console.log(ctrl.name)
            };
        },
    });

SEO : angularjs create a component

[cjmling]

Note: Seems like camel case doesn't work

<chandu-bandu firstName="chandrajeet" ></chandu-bandu>
bindings: {
    firstName: '@'
}

but this work

<chandu-bandu first-name="chandrajeet" ></chandu-bandu>
bindings: {
    firstName: '@'
}