What is a directive?
A directive is an extension of the html vocabulary that allow us to create new behaviors. This technology lets the developers create reusable components that can be used within the whole application and even provide their own custom components. The direct can be applied as an attribute, element, class and even as a comment, using the camelCase syntax. However, because HTML is case insensitive, we can use a lowercase form.Using AngularJS built- in directives
By default, a framework brings with it a basic set of directives such as iterate over an array, execute a custom behavior when an element is clicked, or even show a given element based on a condition expression, and many others.The ng-app Directive.
The ng-app directive is the first directive we need to understand because it defines the root of an angularjs application. Applied to one of the elements, in general HTML of body or your div tag. We can use it without any parameter.Example One
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS
ng-app directive</title>
<script
src=”js/angular.min.js”></script>
</head>
<body>
{{“Hello
Friend”}}
</body>
</html>
Example Two
<!DOCTYPE html>
<html >
<head>
<title>AngularJS
ng-app directive</title>
<script
src=”js/angular.min.js”></script>
</head>
<body ng-app>
{{“Hello
Friend”}}
</body>
</html>
Example Three
<!DOCTYPE html>
<html
ng-app=”staying”>
<head>
<title>AngularJS
ng-app directive</title>
<script
src=”js/angular.min.js”></script>
<script
type=”text/javascript”>
Var staying =
angular.model(“staying”, {});
</script>
</head>
<body >
</body>
</html>
The ng-controller directive;
We will learn ng-controller then we need to know about controller that what is controller?Controller
A Controller is a javascript object, created by a standard javascript constructor.in angular, a controller is define by a javascript constructor function that is used to augment the angular scopeNg-cotroller
We can attach any controller to the view using the ng-cotroller directive. After using this directive, the view and controller start to share the same scope and are ready work together.Example
<!DOCTYPE html>
<html
ng-app=”staying”>
<head>
<title>AngularJS
ng-app directive</title>
<script
src=”js/angular.min.js”></script>
<script
type=”text/javascript”>
Var staying =
angular.model(“staying”, {});
Staying.controller(“stayingCtrl”,
function($scope)
{
});
</script>
</head>
<body
ng-controller=”stayingCtrl”>
</body>
</html>
Nested Controllers
Sometime,
our controller can become too complex, and it might bt interesting to split the
behavior into separated controllers. This can be achieved by creating nesting
controllers, which means registering
controllers hat will work only inside a specific element of the view
<body ng-controller=”homeController”
<div
ng-controller=”homeNestedController”></div>
</body>
The ng-bind directive
The ng-bind directive is generally applied to a span element and replaces the contentof the element with the results of the provided expressionExample
<!doctype html>
<html ng-app="something ">
<head>
<title>myApp </title>
<script src="angular.js"></script>
<script>
var something = angular.module("something", []);
something.controller("somethingController ", function ($scope) {
$scope.appTitle = "myApp";
});
</script>
</head>
<body ng-controller="somethingController">
<h3 ng-bind="appTitle"></h3>
</body>
</html>
<html ng-app="something ">
<head>
<title>myApp </title>
<script src="angular.js"></script>
<script>
var something = angular.module("something", []);
something.controller("somethingController ", function ($scope) {
$scope.appTitle = "myApp";
});
</script>
</head>
<body ng-controller="somethingController">
<h3 ng-bind="appTitle"></h3>
</body>
</html>
The ng-bind-html directive
Sometimes, it might be necessary to bind a string of raw HTML. In this case, the ng-bind-html directive can be used in the same way as ng-bind.Example
<!doctype html>
<html ng-app="something">
<head>
<title>angulerjs Diective</title>
<script src="angular.js"></script>
<script src="angular-sanitize.js"></script>
<script>
var something = angular.module("something", []);
something.controller("somethinfController ", function ($scope) {
$ scope.appTitle = "<b> angulerjs Diective </b>";
});
</script>
</head>
<body ng-controller="somethinfController">
<h3 ng-bind-html="appTitle"></h3>
</body>
</html>
<html ng-app="something">
<head>
<title>angulerjs Diective</title>
<script src="angular.js"></script>
<script src="angular-sanitize.js"></script>
<script>
var something = angular.module("something", []);
something.controller("somethinfController ", function ($scope) {
$ scope.appTitle = "<b> angulerjs Diective </b>";
});
</script>
</head>
<body ng-controller="somethinfController">
<h3 ng-bind-html="appTitle"></h3>
</body>
</html>
The ng-repeat directive
The ng-repeat directive is really useful to iterate over arrays and objects. It can beused with any kind of element such as the rows of a table, the elements of a list, andeven the options of select.We must provide a special repeat expression that describes the array to iterate overthe variable that will hold each item in the iteration. The most basic expressionformat allows us to iterate over an array, attributing each element to a variable
Example
<!doctype html>
<html ng-app="something">
<head>
<title>AngularJs Directive </title>
<script src="angular.js"></script>
<script>
var something = angular.module("something ", []);
something.controller("somethingController ", function ($scope) {
$scope.appTitle = " AngularJs Directive ";
$scope.cars = [];
});
</script>
</head>
<body ng-controller="somethingController">
<h3 ng-bind="appTitle"></h3>
<table>
<thead>
<tr>
<th>Plate</th>
<th>Entrance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars">
<td><span ng-bind="car.plate"></span></td>
<td><span ng-bind="car.entrance"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
<html ng-app="something">
<head>
<title>AngularJs Directive </title>
<script src="angular.js"></script>
<script>
var something = angular.module("something ", []);
something.controller("somethingController ", function ($scope) {
$scope.appTitle = " AngularJs Directive ";
$scope.cars = [];
});
</script>
</head>
<body ng-controller="somethingController">
<h3 ng-bind="appTitle"></h3>
<table>
<thead>
<tr>
<th>Plate</th>
<th>Entrance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars">
<td><span ng-bind="car.plate"></span></td>
<td><span ng-bind="car.entrance"></span></td>
</tr>
</tbody>
</table>
</body>
</html>
No comments:
Post a Comment