دستور العمل های آنگولار جی اس-AngularJS Directive

در این بخش با دستورات یا directive آنگولار جی اس آشنا خواهید شد. angular directives

AngularJS به شما اجازه می دهد که HTML را با ویژگی های جدید به نام Directives گسترش دهید.

AngularJS دارای مجموعه ای از دستورات ساخته شده است که قابلیت برنامه های کاربردی شما را فراهم می کند.

AngularJS همچنین به شما اجازه می دهد دستورات خود را تعریف کنید.

مقالات

دستورالعمل AngularJS

Directive -دستورالعمل AngularJS ویژگیهای HTML را با پیشوند ng- تمدید می کنند.

دستور ng-app یک برنامه AngularJS را راه اندازی می کند.

دستور ng-init مقدار داده های برنامه را اولویت می دهد.

Directive – دستورالعمل ng-model مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.

درباره دستورالعمل AngularJS در مرجع دستورالعمل AngularJS ما بخوانید.

مثال:

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

<p>You wrote: {{ firstName }}</p>

</div>

دستور ng-app همچنین به AngularJS می گوید که عنصر <div> صاحب برنامه AngularJS است.

اتصال داده -Data Binding

اصطلاح {{firstName}}، در مثال بالا، بیانگر اتصال داده AngularJS است.

اتصال داده در AngularJS عبارات AngularJS را با داده های AngularJS متصل می کند.

{{firstName}} با ng-model = “firstName” محدود شده است.

در مثال بعدی، دو فیلد متنی همراه با دو دستورالعمل ng-model هستند:

مثال:

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

Quantity: <input type="number" ng-model="quantity">

Costs: <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

استفاده از ng-init بسیار رایج نیست. شما خواهید آموخت که چگونه داده های اولیه را در فصل مربوط به کنترل کننده ها را اولویت بندی کنید.

تکرار عناصر HTML

دستورالعمل ng-repeat یک عنصر HTML را تکرار می کند:

مثال:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

<ul>

</li>

</ul>

</div>

دستورالعمل ng-repeat یک بار برای همیشه از اجزای یک مجموعه یک عنصر HTML را کلون می کند.

دستورالعمل ng-repeat به عنوان آرایه ای از اشیاء استفاده می شود:

مثال:

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

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<div ng-app="" ng-init="names=[

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},

{name:'Kai',country:'Denmark'}]">

<ul>

</li>

</ul>

</div>

AngularJS برای پایگاه داده CRUD (Create Read Update Clean) مناسب است.فقط تصور کنید اگر این اشیاء از یک پایگاه داده ثبت شده باشند.

دستورالعمل ng-app

دستور ng-app عنصر ریشه یک برنامه AngularJS را تعریف می کند.

دستورالعمل ng-application هنگامی که یک صفحه وب بارگذاری می شود بوت استرپ خودکار auto-bootstrap (مقدار دهی اولیه بصورت خودکار) برنامه را انجام می دهد.

دستورالعمل ng-init – انگولار جی اس

دستورالعمل ng-init مقادیر اولیه برای یک برنامه AngularJS را تعریف می کند.

به طور معمول شما از ng-init استفاده نخواهید کرد. شما از یک کنترل کننده یا ماژول استفاده می کنید.

بعدا در مورد کنترل کننده ها و ماژول ها بیشتر خواهیم دانست.

دستور العمل ng-model:

Directive دستورالعمل ng-model مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.

Directive دستورالعمل ng-model همچنین می تواند:

– فراهم کردن تاییدیه نوع داده های برنامه مثل (شماره، ایمیل، موارد نیاز).

– وضعیت داده های برنامه را ارائه دهید (نامعتبر، کثیف، لمس شده، خطا).

ارائه کلاس CSS برای عناصر HTML.

– عناصر HTML را به فرم HTML متصل کنید.

در فصل بعدی بیشتر درباره دستورالعمل ng-model مطالعه خواهیم کرد.

ایجاد دستورالعمل جدید در آنگولار جی اس – Directive در angular js

علاوه بر تمام دستورالعمل های داخلی AngularJS، شما می توانید دستورات خود را ایجاد کنید.

دستورالعمل های جدید با استفاده از عملکرد .directive ایجاد می شوند.

برای فراخوانی دستور جدید، یک عنصر HTML با همان نام برچسب به عنوان دستور جدید ایجاد کنید.

هنگام نامگذاری یک دستور، شما باید از نام نام شتر، 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>

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

app.directive("w3TestDirective", function() {

return {

template : "<h1>Made by a directive!</h1>"

};

});

</script>

</body>

شما می توانید یک دستور را با استفاده از موارد زیر ایجاد کنید:

نام عنصر
صفت
کلاس
اظهار نظر
مثالهای زیر همه نتیجه ی مشابهی تولید خواهند کرد:

نام عنصر-element name

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

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

خصوصیت – Attribute

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

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

کلاس – class

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

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

کامنت – Comment

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

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

محدودیت ها:

شما می توانید دستورات خود را تنها با برخی از روش ها محدود کنید.

مثال:

با اضافه کردن یک ویژگی محدود با مقدار “A”، دستورالعمل تنها می تواند توسط صفات مورد استفاده قرار گیرد:

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

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

app.directive("w3TestDirective", function() {

return {

restrict : "A",

template : "<h1>Made by a directive!</h1>"

};

});

مقادیر محدود قانونی عبارتند از:

E برای نام عنصر
A برای خصوصیت
C برای کلاس
M برای نظر
به طور پیش فرض مقدار EA است، به این معنی که هر دو عنصر نام و نام ویژگی می توانند از دستور استفاده کنند.

5/5 - (1 امتیاز)

دستور العمل های آنگولار جی اس-AngularJS Directive

دستورالعمل AngularJS

اتصال داده -Data Binding

تکرار عناصر HTML

دستورالعمل ng-app

ایجاد دستورالعمل جدید در آنگولار جی اس – Directive در angular js

محدودیت ها:

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

دستورالعمل AngularJS

اتصال داده -Data Binding

تکرار عناصر HTML

دستورالعمل ng-app

ایجاد دستورالعمل جدید در آنگولار جی اس – Directive در angular js

محدودیت ها:

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

دیدگاهتان را بنویسید لغو پاسخ