ANGULAR JS | Types of Directives in Angular JS By. Sunrise Computers

ANGULAR JS

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-app

ng-app directive से AngularJS Application की शुरुआत होती है | ये Application का root element होता है | ये AngularJS को automatically initialize करता है | HTML Document पर सिर्फ एक ही ng-app directive होती है |

Syntax

1. <html|body|div ng-app="">

---------

</html|body|div>

2. <html|body|div ng-app="myapp">

---------

</html|body|div>

ng-app Attribute's Parameters

ng-app = "" : ng-app attribute की value; optional है | value पर module name दिया जाता है |

Source Code

</head><body>

Enter Name: <input type = "text" ng-model = "name"><br />

Hello ! <span ng-bind = "name"></span><br />

</div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-bind

ng-bind directive का इस्तेमाल HTML Element के किसी भी प्रकार के text content को bind या replace करने के लिए किया जाता है | ng-bind directive से HTML Element पर expression की value को bind किया जाता है |

Syntax

As Attribute:

</element>

As Class:

</element>

ng-bind Attribute's Parameters

expression : यहाँ पर expression या variable दिया जाता है |

Source Code

</head><body>

Fruit : <span ng-bind = "f"></span><br />

</div>

{{"Fruit : " + f}}<br />

</div>

Fruit : <span class="ng-bind: f"></span>

</div></div>

</body></html>

Example for Replacing Text Content of Element

Source Code

</head><body>

Message : <span ng-bind = "wish" />Welcome to Sunrise Computer<br />

</div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-bind-html

ng-bind-html directive का इस्तेमाल HTML को AngularJS Application पर bind या replace करने के लिए किया जाता है | ng-bind और ng-bind-html ये दोनों एक जैसे है | लेकिन ng-bind directive ये HTML को interpret नहीं करता है और ng-bind-html ये HTML को interpret करता है | ng-bind-html पर दिए हुए HTML को 'ngSanitize' इस function द्वारा interpret किया जाता है | ng-bind-html इस directive के लिए 'angular-sanitize.js' को HTML Document पर insert किया जाता है |

Syntax

</element>

ng-bind-html Attribute's Parameters

expression : यहाँ पर expression या variable दिया जाता है |

Source Code

</head><body>

Message : <span ng-bind-html = "message"></span><br />

</div>

var myapp = angular.module("bindApp",['ngSanitize']);

myapp.controller("ctrl", function($scope)

{

$scope.message = "<b><i>Hello World</i></b>";

});

</script>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-blur

ng-blur directive ये HTML Element के focus lose(blur) होने पर दिया हुआ expression execute करता है |<input>, <select>, <textarea> और <a> इन Elements के लिए ng-blur directive का इस्तेमाल किया जाता है |

Syntax

</element>

ng-blur Attribute's Parameters

expression : यहाँ पर expression या variable दिया जाता है |

Source Code

</head><body>

<input value="Click Me"

ng-init="{myinput}"

ng-focus="myinput='Focus'"

ng-blur="myinput='Blur'" />

<p>{{myinput}}</p>

</div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-change

ng-change directive ये HTML Element के change होने पर दिया हुआ expression execute करता है | ng-change ये हर element के value के change होने पर expression execute होता है | ng-change directive ये <input>, <select>, और <textarea> इन elements के लिए होता है | ng-change directive के साथ ng-model directive का इस्तेमाल करना जरुरी होता है |

Syntax

</element>

ng-change Attribute's Parameters

expression : यहाँ पर expression या variable दिया जाता है |

Source Code

</head><body>

Enter Name : <input type="text" ng-model="myinput" ng-change="inputchange()" /><br />

Input Change : {{input}}<br /><br />

Checkbox Change : {{checkbox}}<br /><br />

Select Language : <select ng-model="dropdown" ng-change="dropdownchange()">

<option value="O Level">O Level</option>

</select><br />

Dropdown Change : {{DropDownStatus}}

</div>

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

app.controller("ctrl", function ($scope) {

$scope.checkboxchange = function(){

$scope.checkbox = $scope.check;

}

$scope.inputchange = function () {

$scope.input = $scope.myinput;

}

$scope.dropdownchange = function () {

$scope.DropDownStatus = $scope.dropdown;

}

})

</script>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-init

ng-init directive का इस्तेमाल variable initialization के लिए किया जाता है | application start होने पर variable को initialize किया जाता है | Initialized किया हुआ variable application पर कहा भी इस्तेमाल किया जा सकता है |

Syntax

</element>

ng-init Attribute's Parameters

expression : यहाँ पर variable(s) दिया जाता है |

अगर एक से ज्यादा variables initialize करने हो तो हर variable को semi-colon(;) से seperate किया जाता है |`

Source Code

</head>

{{var1}}<br />

{{var2}}<br />

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-controller

ng-controller directive से AngularJS Application को control किया जाता है | ये directive application पर variables, functions और objects को लिखने की अनुमति देता है | इससे AngularJS और भी आसान हो जाता है |

Syntax

</element>

ng-controller Attribute's Parameters

expression : यहाँ पर controller name दिया जाता है |

Source Code

</head><body>

</div>

var app = angular.module('myapp', []);

app.controller('ctrl', function($scope){

$scope.myVar = "Hello World";

});

</script>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-list

ng-list directive ये seperator के साथ normal text को array या list में convert करता है | ng-list directive सिर्फ <input> और <textarea> elements के लिए इस्तेमाल किया जाता है |

Syntax

</element>

ng-list Attribute's Parameters

seperator : यहाँ पर seperator दिया जाता है | अगर दिया नहीं जाता है तो comma(,) ये default seperator होता है |

Note :- list के हर item को dot(.) से seperate किया जाएगा |

Source Code

</head><body>

</div>

</body> </html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-mouseover

HTML Element पर जब mouse cursor को लाया जाता है तब दिया हुआ expression execute होता है |

Syntax

</element>

ng-mouseover Attribute's Parameters

expression : यहाँ पर expression दिया जाता है | ng-mouseover और ng-mouseenter ये दोनों directives एक जैसे होती है |

Source Code

</head><body>

<div ng-init="c = 0" ng-mouseover="c = c + 1">Click Me</div>

<p>Mouse Over {{c}} time(s)</p>

</div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-maxlength

ng-maxlength directive ये HTML Element पर maxlength attribute को add या replace कर देता है | ng-maxlength directive दिए जानेवाले characters की length पर रोक नहीं लगाता है | ng-maxlength directive ये editable elements(<input>, <textarea>) के लिए इस्तेमाल किया जाता है |

Syntax

</element>

ng-maxlength Attribute's Parameters

charLength : यहाँ पर maximum characters की length दी जाती है |

Source Code

</head><body>

<p ng-if="Form.name.$invalid">Enter Less than 10 characters</p>

</form></div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-minlength

ng-minlength directive ये HTML Element पर maxlength attribute को add या replace कर देता है | ng-minlength directive ये editable elements(<input>, <textarea>) के लिए इस्तेमाल किया जाता है |

Syntax

</element>

ng-minlength Attribute's Parameters

charLength : यहाँ पर minimum characters की length दी जाती है |

Source Code

</head><body>

<p ng-if="Form.name.$invalid">Enter Minimum 10 characters</p>

</form></div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-copy

ng-copy directive ये जब किसी HTML Element का content copy(ctrl+c) किया जाता है तब दिया हुआ expression execute करता है |

Syntax

</element>

ng-copy Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Source Code

</head><body>

Copy Me.

</p>

<p>Copied {{c}} times.</p>

</div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-cut

ng-cut directive ये जब किसी HTML Element का content cut(ctrl+x) किया जाता है तब दिया हुआ expression execute करता है |

Syntax

</element>

ng-cut Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Source Code

</head><body>

<input ng-init="c = 0" ng-cut="c = c + 1"

value="cut me cut me cut me cut me cut me " />

<p>Cut {{c}} times.</p>

</div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-paste

ng-paste directive ये जब किसी HTML Element का content copy(ctrl+c) या cut(ctrl+x) करके paste(ctrl+v) किया जाता है तब दिया हुआ expression execute करता है |

Syntax

</element>

ng-paste Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Source Code

</head><body>

<input ng-init="c = 0" ng-paste="c = c + 1"

placeholder="paste here" />

<p>Paste {{c}} times.</p>

</div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-mouseup

HTML Element पर जब mouse click किया जाता है तब दिया हुआ expression execute होता है |

Syntax

</element>

ng-mouseup Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Note :- ng-mouseup, ng-mouseup और ng-click ये तीनों directives एक जैसे है |

Source Code

</head><body>

<div ng-init="c = 0" ng-mouseup="c = c + 1">Click Me</div>

<p>Clicked {{c}} time(s)</p>

</div></body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-mousemove

HTML Element पर जब mouse cursor को move किया जाता है तब दिया हुआ expression execute होता है |

Syntax

</element>

ng-mousemove Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Source Code

</head><body>

<div ng-init="c = 0" ng-mousemove="c = c + 1">Click Me</div>

<p>Mouse Leave {{c}} time(s)</p>

</div></body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-mouseenter

HTML Element पर जब mouse cursor को लाया जाता है तब दिया हुआ expression execute होता है |

Syntax

</element>

ng-mouseenter Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Note :- ng-mouseenter और ng-mouseover ये दोनों directives एक जैसे होती है |

Source Code

</head><body>

<div ng-init="c = 0" ng-mouseenter="c = c + 1">Click Me</div>

<p>Mouse Over {{c}} time(s)</p>

</div></body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-submit

ये जब form submit किया जाता है तब दिया हुआ expression execute होता है |

Syntax

</element>

ng-submit Attribute's Parameters

expression : यहाँ पर expression दिया जाता है | expression पर function call किया जाता है |

Source Code

</head><body>

<button type="submit">Submit</button>

</form>

<p>{{message}}</p>

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

myapp.controller("ctrl", function($scope){

$scope.myFunction = function () {

$scope.message = "Button Clicked.";

}

});

</script> </div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-open

ng-open directive को <details> element पर open attribute को set करने के लिए इस्तेमाल किया जाता है |

अगर दिया हुआ expression true होता है तो details का data दिखाई देता है |

Syntax

</details>

ng-open Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Source Code

</head><body>

<p>Hello World</p>

</details></div>

</body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-click

ये जब User द्वारा click किया जाता है तब दिया हुआ expression execute होता है |

Syntax

</element>

ng-click Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Source Code

</head><body>

Click Me.

</p>

<p>Clicked {{c}} times.</p>

</div></body></html>

ANGULAR JS | DIRECTIVES | DIRECTIVES ng-dblclick

ये जब किसी HTML Element पर double click किया जाता है तब दिया हुआ expression execute करता है |

Syntax

</element>

ng-dblclick Attribute's Parameters

expression : यहाँ पर expression दिया जाता है |

Source Code

</head><body>

Double Click Me.

</p>

<p>Double clicked {{c}} times.</p>

</div></body></html>

For Any Doubt Clear on Telegram Discussion Group

Join Us On Social Media

For Any Query WhatsApp Now

Search This Blog

SUNRISE | ANGULAR JS

ANGULAR JS | Types of Directives in Angular JS By. Sunrise Computers

Comments

Post a Comment