AngularJS
Directives
Directives are attributes starting
with ng- prefix that provide the way to you to extend the HTML with new
attributes called Directives.
AngularJS provides lot of build-in
directives that can be used to extend the html. You can also create your own (custom)
directives.
Most
common directives:
ng-app:
This directive starts an AngularJS Application.
ng-init:
This directive initializes application data.
ng-model:
This directive defines the model that is variable to be used in AngularJS.
AngularJS
Directives Example
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="TestController" ng-init="message='Guest'">
First Name: <input type="text" ng-model="firstname"><br>
Last Name: <input type="text" ng-model="lastname"><br>
Address: <input type="text" ng-model="address">
<br>
<p ng-bind="fullname()"></p>
<p>Addess: {{address}} </p>
</div>
<script>
var myapp = angular.module('myApp', []);
myapp.controller('TestController', function ($scope) {
$scope.firstname = "Alok";
$scope.address = "Delhi";
$scope.lastname = "Singh"
$scope.fullname = function () {
return $scope.firstname + " " + $scope.lastname;
};
});
</script>
</body>
</html>
ng-app
directive: This directive starts an AngularJS Application.
<div ng-app="myApp" ng-controller="TestController">
----
-----
</div>
ng-init
directive: ng-init directive initializes the initial
values for an AngularJS application.
<div ng-app="myApp" ng-controller="TestController" ng-init="message='Guest'">
<p>welcome {{message}}</p>
</div>
ng-model
directive: This directive defines the model
that is variable to be used in AngularJS. ng-model
directive can use for two-way binding to bind the model to the view.
<div ng-app="myApp" ng-controller="EmployeeController">
Name: <input type="text" ng-model="WebsiteName" />
<p ng-bind="WebsiteName"></p>
<p>{{WebsiteName}}</p>
</div>
<script>
var myapp = angular.module('myApp', []);
myapp.controller('EmployeeController', function ($scope) {
$scope.WebsiteName = "www.code-view.com";
});
</script>
There of list of directive available
in AngularJS.
AngularJS provide facility that you can also create our own or custom directive
AngularJS provide facility that you can also create our own or custom directive
AngularJS
Custom Directive
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" welcome-directive></div>
<script>
var myapp = angular.module("myApp", []);
myapp.directive("welcomeDirective", function () {
return {
template: "This is a custom
directive"
};
});
</script>
</body>
</html>
