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>
شما می توانید یک دستور با استفاده از فراخوانی:
- نام عنصر
- صفت
- کلاس
- اظهار نظر
مثال های زیر تمام خواهد همان نتیجه را تولید:
محدودیت های
شما می توانید دستورات خود را محدود به تنها با برخی از روش استناد شده است.
مثال
با اضافه کردن یک 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 ، به این معنی که هر دو نام نامهای ویژگی و عنصر می تواند دستور احضار کند.
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید؟در گفتگو ها شرکت کنید.