angularjs template

by Akram kamal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body ng-app="MyApp">
  <my-widget></my-widget>
  <my-widget-replace></my-widget-replace>
  <my-widget-template></my-widget-template>
</body>

JavaScript

var app = angular.module("MyApp", []);

app.directive("myWidget", function() {
  return {
    restrict: "E",
    template: "<p>Hello World 1</p>"
  };
});

app.directive("myWidgetReplace", function() {
  return {
    restrict: "E",
    replace: true,
    template: "<p>Hello World 2</p>"
  };
});

app.directive("myWidgetTemplate", function() {
  return {
    restrict: "E",
    replace: true,
    templateUrl: "widget.html"
  };
});