Hello everyone , here we are going to take an overview of directives in angularjs. Angularjs provides us with a set of built-in directives which provides functionality to our application.We can also define our own directives in angularjs.
We can create a new directive by using the .directive function.If we want to invoke the new directive we have to make an HTML element with the same tag name as that of the directive.To name the directive we use a camel case name and to invoke it we use "-".
<body ng-app="myNewApp">
<test-directive></test-directive> #here we are invoking the directive so we are using a dash symbol
<script>
var app = angular.module("myNewApp", []);
app.directive("TestDirective", function() { #here we have named the directive
return {
template : "<h1>This is a test directive!</h1>"
};
});
</script>
</body>
AngularJs Directive are prefixed with ng-
- ng-app directive
- ng-init directive
- ng-model directive
- The ng-app directive helps us to initialize an angularjs application.
<div ng-app = "testApp">
</div>
- The ng-init directive helps us to initialize an application data.
<div ng-app="testApp" ng-init="firstName='Rahul'">
<p>Your First Name is : {{ firstName }}</p>
</div>
- The ng-model directive helps us to bind the value of HTML controls to application data.
<div ng-app="testApp" ng-init="firstName='Rahul'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>Your First Name is : {{ firstName }}</p>
</div>
0 Comment(s)