بخش های اصلی

آموزش 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 است.
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

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

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

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

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

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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