AngularJS 1

Setup

To use components with AngularJS v1, add the component tag in an Angular template and call Component.render() to render the components.

One way to do this is in your HTML template and your controller:

<div ng-controller="myCtrl">
<component key=aldlk load=md></component>
</div>
angular.module('myApp').controller('myCtrl', [function () {
Component.render()
}])

Another way is to use a directive:

<div ng-controller="myCtrl">
<div demo></div>
</div>
angular.module('myApp').directive('demo', [function () {
return {
template: '<component key=mladl load=md-mi></component>',
link: function (scope, ele, attrs) {
Component.render()
}
}
}])

Either way works equally well, so you can use whichever method you prefer.

You can use Component.render() by itself or with a callback or promise. See the section on Component.render for more.

Example

The following example shows 2 components being rendered: 1 with the controller approach (aldlk: the card) and 1 with the directive approach (mladl: the side menu).

Rendering multiple components

You can render multiple components the same way as a single component, and you only need to call Component.render() once:

<div ng-controller="myCtrl">
<component key=aldlk load=md></component>
<component key=ekaob load=b></component>
</div>
angular.module('myApp').controller('myCtrl', [function () {
Component.render()
}])

Re-rendering

You can call Component.render() as often as you’d like in your Angular code (or elsewhere). This method will not lead to an API call every time; if a component has already been fetched once, Component.render() will use that data instead of making another API call.

See the section on Component.render for more.