بخش های اصلی

آموزش AngularJS

آموزش AngularJS - ساخت اولین برنامه

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

  • app – این دستور یک برنامه ی AngularJS را تعریف می کنه و به HTML لینک می کنه.
  • ng-model – این دستور مقادیر داده های برنامه ی AngularJS را به کنترل های ورودی HTML متصل می کنه.
  • ng-bind – این دستور داده های برنامه ی AngularJS را به تگ های HTML متصل می کنه.

مراحل ایجاد برنامه ی AngularJS

مرحله ی 1- بارگذاری فریم ورک

ایجاد یک فریم ورک جاوا اسکریپت خالص که با تگِ

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

مرحله ی 2 – تعریف برنامه ی AngularJS با استفاده از دستور ng-app

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

مرحله ی 3 – تعریف نام مدل با استفاده از دستور ng-model

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

مرحله ی 4 – اتصال مقدار مدل تعریف شده در بالا با استفاده از دستورِ ng-bind

<p>Hello <span ng-bind = "name"></span>!</p>

مراحل اجرای برنامه ی AngularJS

از سه مرحله ی بالا در یک صفحه ی HTML استفاده کنین.

testAngularJS.htm

<html>
   
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

خروجی

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

چگونگی ادغامِ AngularJS با HTML

  •  ng-app، دستور شروع برنامه ی AngularJS را مشخص می کنه.
  • ng-model، دستور میده تا یک متغیر از نوعِ model به نام “name” ایجاد بشه و در صفحه ی html، داخل divای که دارای دستورِ ng-app باشه، استفاده میشه.
  •  سپس هر وقت که کاربر چیزی در جعبه ی متن (text box) وارد می کنه، ng-bind، از نامِ model برای نمایش در تگِ span html استفاده می کنه.
  •  تگ بسته ی نشان دهنده ی پایان برنامه ی AngularJS است.

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

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

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

تبلیغات

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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