AngularJS డిరెక్టివ్

ఆంగుళర్ జిఎస్ మీరు కలిగిఉండే అనేక నామాలను ఉపయోగించడానికి అనుమతిస్తుంది.ఆదేశాలునూతన అంశాలను హ్టిఎమ్ఎల్ విస్తరించడానికి ఉపయోగించవచ్చు.

ఆంగుళర్ జిఎస్ ఒక బుల్లట్ ఆదేశాలను కలిగి ఉంది, మీ అప్లికేషన్కు ఫంక్షనలిటీని అందిస్తుంది.

AngularJS కూడా మీరు స్వంత ఆదేశాలను నిర్వహించడానికి అనుమతిస్తుంది.

AngularJS డిరెక్టివ్

AngularJS ఆదేశాలు ముందుకు పొడిన హైల్టెక్స్ హైల్టెక్స్ అట్రిబ్యూట్స్ ఉంటాయి ng-。

ng-app ఆదేశం ఆంగులార్ డాటా అప్లికేషన్ ప్రారంభం చేస్తుంది.

ng-init ఆదేశం అప్లికేషన్ డాటా ప్రారంభం చేస్తుంది.

ng-model 指令将 HTML 控件（input, select, textarea）的值绑定到应用程序数据。

దయచేసి ఆంగులార్ డాటా ఆదేశాల పునఃప్రారంభం కోసం మా ఆంగులార్ డాటా ఆదేశాల పునఃప్రారంభం లో చదవండి.

ఇన్స్టాన్స్

<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

స్వయంగా ప్రయత్నించండి

ng-app ఆదేశం ఆంగులార్ డాటా అప్లికేషన్ యొక్క 'యజమాని' గా గుర్తిస్తుంది అని ఆంగులార్ డాటా అనుసరిస్తుంది.

డాటా బంధింపు

ప్రకటనలో: {{ firstName }} ప్రకటనలో, డాటా బంధింపు ఆదేశం ఒక ఆంగులార్ డాటా బంధింపు ప్రకటన ఉంది.

AngularJS లో డాటా బంధింపు ఆంగులార్ డాటా ను ఆంగులార్ డాటాబైండింగ్ తో బంధిస్తుంది.

{{ firstName }} మరియు ng-model="firstName" బంధించబడ్డాయి.

తదుపరి ఉదాహరణలో, రెండు టెక్స్ట్ ఫీల్డ్స్ రెండు ng-model ఆదేశాల ద్వారా బంధించబడ్డాయి:

ఇన్స్టాన్స్

<div ng-app="" ng-init="quantity=1;price=5">
పరిమాణం: <input type="number" ng-model="quantity">
ఖర్చులు:    <input type="number" ng-model="price">
డాలర్ లో మొత్తం: {{ quantity * price }}

స్వయంగా ప్రయత్నించండి

ఉపయోగించండి: ng-init సాధారణంగా లేదు. మీరు కంట్రోలర్ బాధ్యత లోపల డాటా ప్రారంభం చేయాలని నేర్చుకుంటారు.

హైల్టెక్స్ ఎల్లిమెంట్ క్లోన్ చేస్తుంది

ng-repeat ఆదేశం మరియు హైల్టెక్స్ ఎల్లిమెంట్ క్లోన్ చేస్తుంది:

ఇన్స్టాన్స్

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

స్వయంగా ప్రయత్నించండి

ng-repeat ఆదేశం వాస్తవానికి పెరిగిన అంశాలకు ప్రతి ఒక్కరికి వర్తిస్తుందిఒక్క సారి హైల్టెక్స్ ఎల్లిమెంట్ క్లోన్ చేస్తుంది。

పదార్థం పెరిగిన అంశాల కోసం ఉపయోగిస్తారు ng-repeat ఆదేశం:

ఇన్స్టాన్స్

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

స్వయంగా ప్రయత్నించండి

AngularJS 非常适合数据库 CRUD（创建、读取、更新、删除）应用程序。

想象一下，如果这些对象是来自数据库的记录。

ng-app 指令

ng-app 指令定义 AngularJS 应用程序的根元素。

当加载网页时，ng-app 指令将自动引导（自动初始化）应用程序。

ng-init 指令

ng-init 指令定义 AngularJS 应用程序的初始值。

通常，您不会使用 ng-init。您将改用控制器或模块。

稍后您将了解有关控制器和模块的更多信息。

ng-model 指令

ng-model 指令将 HTML 控件（input, select, textarea）的值绑定到应用程序数据。

ng-model 指令还可以：

క్రింది చిప్పల్లో మరింత సమాచారం చదవండి: ng-model డిరెక్టివ్స్ సమాచారం.

కొత్త డిరెక్టివ్స్ సృష్టించడం

అంగుళర్ జిఎస్ ప్రత్యక్ష డిరెక్టివ్స్ కంటే ప్రత్యేకంగా మీరు సొంత డిరెక్టివ్స్ సృష్టించవచ్చు.

కొత్త డిరెక్టివ్స్ ని సృష్టించడానికి .directive ఫంక్షన్ ద్వారా సృష్టించబడిన.

కొత్త డిరెక్టివ్స్ ని కాల్ చేయడానికి కొత్త టాగ్ పేరుతో హెచ్ఎంఎల్ ఎలమెంట్ సృష్టించండి.

డిరెక్టివ్స్ పేరును హుండర్ కేస్ విధంగా వాడాలి,w3TestDirectiveకానీ దానిని కాల్ చేయటంలో హైఫెన్ చేర్చి పేరును వాడాలి,w3-test-directive:

ఇన్స్టాన్స్

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  });
});
</script>
</body>

స్వయంగా ప్రయత్నించండి

మీరు క్రింది విధంగా డిరెక్టివ్స్ ని కాల్ చేయవచ్చు:

ఈ ఉదాహరణలన్నీ అదే ఫలితాన్ని ఇవ్వగలవు:

ఎలమెంట్ పేరు

<w3-test-directive></w3-test-directive>

స్వయంగా ప్రయత్నించండి

అట్రిబ్యూట్

<div w3-test-directive></div>

స్వయంగా ప్రయత్నించండి

క్లాస్

<div class="w3-test-directive"></div>

స్వయంగా ప్రయత్నించండి

కామెంట్

<!-- directive: w3-test-directive -->

స్వయంగా ప్రయత్నించండి

పరిమితి

మీరు మీ డిరెక్టివ్స్ మాత్రమే కొన్ని పద్ధతులద్వారా కాల్ చేయగలరు.

ఇన్స్టాన్స్

ఒక విలువను జోడించడం ద్వారా "A" యొక్క restrict అట్రిబ్యూట్, ఈ డిరెక్టివ్ మాత్రమే అట్రిబ్యూట్ ద్వారా కాల్ చేయబడగలదు:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  });
});

స్వయంగా ప్రయత్నించండి

న్యాయమైన restrict విలువలు ఉన్నాయి:

అప్రమేయంగా ఈ విలువ ఉంటుంది EAఇది అర్థం చేస్తుంది ఎందుకంటే కేంద్రక పేరు మరియు లక్షణాల పేరు కూడా డిరెక్టివ్స్ కి కాల్ చేయబడతాయి.