Create new directive

examples/try/demo_directive.html

<!DOCTYPE html>
<html>
<head>
    <title>My Directive</title>
    <meta charset="utf-8">
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=yes">

    <script src="../angular/angular.min.js"></script>
    <script src="demo_directive.js"></script>
    <script src="demo_directive_definition.js"></script>
</head>
<body>

<h1>Demo</h1>
<div ng-app="DemoApp">
    <div ng-controller="DemoController">
      <div my-demo></div>
      <div my:demo></div>
      <div my_demo></div>
      <div data-my-demo></div>
      <div x-my-demo></div>
      <hr>
      <div><my-demo></div>
      <div><my-demo></my-demo></div>
    </div>
</div>

</body>
</html>

examples/try/demo_directive.js

angular.module('DemoApp', ['DemoDirective'])
    .controller('DemoController', ['$scope', function($scope) {
        $scope.language = {
            name: 'Perl',
        };
    }]);

examples/try/demo_directive_definition.js

angular.module('DemoDirective', [])
    .directive('myDemo', function() {
        return {
            template: 'Name: {{language.name}}'
        };
    });