Difference between header-bar and class=bar-header

Question

There are two ways in which one can make headers using Ionic framework.

<div class="bar bar-header bar-dark">
        <h1 class="title">Title</h1>
</div>

And

<header-bar title="'Title'" type="bar-dark">
 </header-bar>

Links in Documentation : For first : http://ionicframework.com/docs/components/ For second : http://ionicframework.com/docs/angularjs/views/header/

What is the difference between them?

Answer 1

The first is native HTML elements using the predefined CSS class names.

The second is using an AngularJS directive. Basically it is a custom element that at runtime will be replaced by a template. See here for the actual AngularJS directive definition. You can see the template that replaces the original element.

Directives like this will play an interesting part of the future of the web. There is a standard on its way in Web Components that will standardize these kind of markup constructs. Besides directives in AngularJS there is another popular way of doing this style of components using Polymer.