دستورالعمل های Angular JS برای گسترش صفحات HTML مورد استفاده قرار می گیرند. آنها دستورات خاصی هستند که با پیشوند ng- می آیند. بیاید تا با آنها بیشتر آشنا شویم :
⦁ ng-app : شروع کننده ی برنامه ی Angular JS می باشد و مقدار دهی اولیه ی برنامه را انجام می دهد.
⦁ ng-init : داده های برنامه را الویت بندی می کند. ( مقدار دهی اولیه می کند )
⦁ ng-model : مقدار کنترل ها را به داده های اپلیکیشن پیوند می دهد.
⦁ ng-repeat : یک عنصر HTML را تکرار می کند.
دستورالعمل ng-app :
این دستور العمل شروع کننده برنامه ی Angular JS می باشد و به طور خودکار برنامه را درزمان بارگذاری صفحه اجرا می کند. همچنین از این دستور برای بارگذاری انواع ماژول ها در Angular JS استفاده می شود. نحوه ی استفاده از آن را ببنید :
<div ng-app="">
...
</div>
دستورالعمل ng-init :
این دستور العمل برای مقدار دهی اولیه یک برنامه Angular JS استفاده می شود. در مثال زیر ما آرایه هایی مربوط به چند کشور را مقدار دهی می کنیم.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>
دستورالعمل ng-model :
این دستور العمل برای مشخص کردن مدل یا متغیر استفاده می شود. در مثال زیر ما مدلی با نام name را مشخص کرده ایم.
<""=div ng-app>
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
<div/>
دستورالعمل ng-repeat :
این دستور عناصر HTML را تکرار می کند. در مثال زیر ما آرایه های مربوط به چند کشور را تکرار می کنیم.
<""=div ng-app>
...
<p>List of Countries with locale:</p>
<ol>
<"li ng-repeat="country in countries>>
{{ Country: ' + country.name + ', Locale: ' + country.locale' }}
<li/>
<ol/>
<div/>
مثال کاربردی :
<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ Country: ' + country.name + ', Locale: ' + country.locale' }}
<li/>
<ol/>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
<script/>
</body>
</html>
