Html Class custom directive

In this example, We are using Class type directive for showing page header. We have a directive with name pageHeader and we are using “restrict: 'C',” which mean this is an Class type directive. We can use this class anywhere with the HTML class attribute in any html element. Example:<div class="page-header"></div>
See example below:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="Example" class="container">
    <div class="page-header"></div>
</body>
</html>
<script>
    angular.module('Example', [])
   .directive("pageHeader", function () {
       return {
           restrict: 'C',
           template: '<div class="jumbotron container"><h3>Example 3:</h3><span>This is class type of directive</span></div>'
       }
   })
</script>

Output