This example demonstrate the code sample for Directive Hello World program. Follow the instructions from this page to get started.
Instruction: Type your name in the text field below:

Notes

  • hello directive with name attribute
  • hello.html template used to display text and input field in above demo
  • HelloModule defining "hello" directive included as dependency in the angular app
Code Example
			
<!DOCTYPE html>
<html ng-app="HelloApp">
<head>
<title>AngularJS - Custom Directive Hello World - Code Example</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="HelloCtrl" class="container">
<div class="page-header"><h2>AngularJS - Custom Directive Hello World - Code Example</h2></div>
<hello name="Calvin Hobbes"></hello>
<bye></bye>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
angular.module('HelloApp', ['HelloModule'])
.controller('HelloCtrl', ['$scope', function($scope){

}])
</script>
</body>
</html>
comments powered by Disqus