بخش های اصلی

آموزش AngularJS

آموزش AngularJS – دستورات

دستورات AngularJS برای گسترش HTML استفاده میشن. این دستورات خصیصه های (attributes) خاصی هستن که با پیشوندِ ng- شروع میشن. راجع به دستورات زیر صحبت خواهیم کرد:

  • ng-app – این دستور یک برنامه ی AngularJS را شروع می کنه.
  • ng-init – این دستور داده های برنامه را مقداردهی اولیه می کنه.
  • ng-model – این دستور modelای را تعریف میکنه که یک متغیر برای استفاده در AngularJS است.
  • ng-repeat – این دستور عناصر html را برای هر آیتم در مجموعه تکرار می کنه.

دستورِ ng-app

دستورِ ng-app، یک برنامه ی AngularJS را شروع می کنه. این دستور، عنصرِ root را تعریف می کنه. زمانی که صفحه ی وبِ حاوی برنامه ی AngularJS بارگذاری میشه، این دستور بصورت اتوماتیک برنامه را مقدار دهی اولیه می کنه یا بصورت خودکار راه اندازی می کنه. همچنین برای بارگذاری ماژول های مختلفِ AngularJS در برنامه ی AngularJS هم به کار میره. در مثال زیر، برنامه ی پیش فرضِ AngularJS را با استفاده از خصیصه ی (attribute) ng-app، از یک عنصر div، تعریف کرده ایم.

<div ng-app = "">
   ...
</div>

دستور ng-init

دستور ng-init، داده ی برنامه ی AngularJS را مقداردهی اولیه می کنه. این دستور برای گذاشتن مقادیر در متغیرها جهت استفاده در برنامه به کار میره. در مثال زیر، آرایه ای از countries (کشورها) را مقداردهی اولیه کرده ایم. برای تعریف آرایه ای از countries (کشورها)، از دستورِ JSON استفاده کرده ایم.

<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

دستورِ ng-model، مدل/متغیر را برای استفاده در برنامه ی AngularJS، تعریف می کنه. در مثال زیر، modelای با نامِ “name” تعریف کرده ایم.

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>​

دستورِ ng-repeat

دستورِ ng-repeat، عناصرِ html را برای هر آیتم در مجموعه تکرار می کنه. در مثال زیر، آرایه ی countries را تکرار کرده ایم.

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

مثال

مثال زیر تمام دستورات بالا را نشان میده.

testAngularJS.htm

<html>
   
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

خروجی

testAngularJS.htm را در مرورگر باز کنین. نام تان را وارد کنین و نتیجه را ببینین.

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد