آموزش انگولار JS - جلسه دوم

جلسه اول آموزش انگولار یکسری موارد رو درباره انگولار JS یاد گرفتیم و یک نمونه کدبسیار ساده رو باهم بررسی کردیم.

در این جلسه میخام نحوه کد نویسی با انگولار JS رو بهتون یاد بدم.

پیش نیاز‌های یادگیری انگولار JS :

HTML
CSS
JavaScript

هر سه پیشنیاز بالا جزوه ملزومات یادگیری انگولار JS می‌باشد.

خب میریم سراغ آموزشمون قدم اول اینکلود کردن کتابخانه انگولار در سند HTML هست.مثلا من از CDN گوگل استفاده کردم .

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

توجه داشته باشید که کد‌بالا رو باید در قسمت head باید قرار بدهید.

حالا برای اینکه به مرورگر بفهمونیم وب اپلیکیشن ما انگولار JS هست کنار تگ HTML عبارت ng-app (با اینکار مرورگر می‌فهمه وب اپلیکشن ما از نوع انگولار هست و دستورات انگولار JS بعد از اون اجرا میشه) اضافه می‌کنیم.

در حاضر کدهای ما باید بصورت زیر باشه :

<!doctype html>
<html ng-app>
   <!-- htto://farhadhp.ir -->
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
   </head>
   <body>

   </body>
</html>

کمی بیشتر درباره ng-app :

همانطور که گفتم ng-app مشخص کننده یک وب اپلیکشن انگولار JS هست.لزومی نداره ما عبارت ng-app رو در کنار تگ html بنویسیم ما حتی میتونیم ng-app رو در کنار تگ body هم اضافه کنیم یا حتی در کنار تگ div نیز استفاده کنیم. آنچیزی که حائز اهمیته اینه که ما هر جایی که عبارت ng-app رو بنویسیم بعد از اون می‌تونیم کدهای انگولاری خودم رو بنویسم تا اجرا بشه در غیر این صورت کدهای انگولاری ما اجرا نخواهد شد.

ما می‌تونیم به ng-appمون اسم هم بصورت زیر اضافه کنیم :

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

در کد بالا ما برای اپلیکشن انگولاری خودمون اسم (farhad) رو گذاشتیم.

خب بخش بعدی انگولار که مهمه و باید همین ابتدا بهتون معرفی کنم ng-model هستش.

با ng-model میتونیم مقادیر input یا ... رو بگیرم.

یکی دیگه از دستورات مهم ng-bind هستش که کارش اینه که innerHTML عناصر رو تغییر بده.

خب برای درک بهتر مفاهیم بالا به مثال زیر توجه کنید :

<!doctype html>
<html ng-app>
   <!-- htto://farhadhp.ir -->
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
   </head>
   <body>
      <div>
         <label>اسمتون رو در کادر زیر بنویسید</label>
         <p>Name: <input type="text" ng-model="name"></p>
         <h1 ng-bind="name"></h1>
      </div>
   </body>
</html>

کد بالا رو در یک فایل قرار داده و با پسوند .html ذخیر کنید تا نتیجه رو مشاهده کنید.

توضیحات کد : ما یک input نوشتیم و انگولار مدل (ng-model) اون رو برابر name قرار دادیم.

در خط بعد از اومدیم و ng-bind رو برابر انگولار مدل name کردیم. با اینکار مقدار مدل انگولار name در عنصر h1 ما innerHTML می‌شود (هر چیزی که در داخل input بنویسیم داخل تگ h1 قرار داده خواهد شد.)

این جلسه رو هم، همین جا به پایان میرسونم اگر سوالی در مورد این جلسه داشتید در بخش نظرات مطرح کنید.