logo-mini

AngularJS بخشنامه

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

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

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


از AngularJS بخشنامه

از AngularJS دستورات توسعه یافته ویژگی های HTML با پیشوند ng- .

ng-app بخشنامه یک برنامه AngularJS را مقدار دهی اولیه.

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

ng-model بخشنامه ارزش کنترل های HTML (ورودی، انتخاب، متنی) به داده های نرم افزار متصل می شود.

مثال

<div ng-app=”” ng-init=”firstName=’John'”>

<p>Name: <input type=”text” ng-model=”firstName”></p>

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

</div>

خودت آن را امتحان کن “

ng-app بخشنامه همچنین از AngularJS که عنصر <div> «مالک» از برنامه از AngularJS است می گوید.


داده ها اتصال

{{ firstName }} بیان، در مثال بالا، یک از AngularJS داده ها اتصال بیان است.

اطلاعات اتصال در AngularJS متصل از AngularJS عبارت با AngularJS داده است.

{{ firstName }} با محدود ng-model="firstName" .

در مثال بعدی دو زمینه متن همراه با دو دستورالعمل NG-مدل محدود:

مثال

<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>

خودت آن را امتحان کن “

با استفاده از 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>

خودت آن را امتحان کن “

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>

خودت آن را امتحان کن “

از AngularJS مناسب برای CRUD پایگاه داده (ایجاد خوانده به روز رسانی حذف) برنامه های کاربردی است.
فقط تصور کنید اگر این اشیاء رکورد از پایگاه داده بودند.


رهنمود ng-app

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

ng-app بخشنامه خودکار راه انداز (به طور خودکار مقداردهی اولیه) نرم افزار هنگامی که یک صفحه وب لود می شود.


رهنمود ng-init 

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

به طور معمول، شما NG-init انجام استفاده نمی کند. شما یک کنترل کننده یا ماژول استفاده کنید.

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


رهنمود ng-model

ng-model بخشنامه ارزش کنترل های HTML (ورودی، انتخاب، متنی) به داده های نرم افزار متصل می شود.

ng-model بخشنامه همچنین می توانید:

  • فراهم می کند که اعتبار سنجی نوع برای داده های برنامه (تعداد، ایمیل، مورد نیاز).
  • فراهم می کند که وضعیت برای داده های برنامه (نامعتبر، کثیف، لمس کرد، خطا).
  • ارائه کلاس های CSS برای عناصر HTML.
  • عناصر HTML اتصال به فرم های HTML.

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


ایجاد جدید بخشنامه

علاوه بر تمام ساخته شده است در 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>

خودت آن را امتحان کن “

صفت

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

خودت آن را امتحان کن “

کلاس

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

خودت آن را امتحان کن “

اظهار نظر

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

خودت آن را امتحان کن “


محدودیت های

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

مثال

با اضافه کردن یک restrict ملک با ارزش "A" ، دستور تنها می تواند با ویژگی استناد:

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

app.directive(“w3TestDirective”, function() {

    return {

        restrict : “A”,

        template : “<h1>Made by a directive!</h1>”

    };

});

خودت آن را امتحان کن “

مقادیر محدود قانونی:

  • E برای نام عنصر
  • برای صفت
  • C برای کلاس
  • M برای نظر

به طور پیش فرض مقدار EA ، به این معنی که هر دو نام نامهای ویژگی و عنصر می تواند دستور احضار کند.


نظر بدهید