بخش های اصلی

آموزش AngularJS

آموزش AngularJS – نصب و تنظیمات محیطی

برای شرع یادگیری AngularJS، نیازی به تنظیم محیط تان ندارین. دلیل این امر ساده ست، محیط AngularJS بصورت آنلاین موجوده، بنابراین می توانید تمام مثال های آنلاین را همزمان با یادگیریِ تئوریِ آن ها، اجرا کنین. این امر به شما اعتماد به نفس کافی راجع به چیزی که در حال یادگیری آن هستین میده و همچنین امکان بررسی نتیجه با آپشن های دیگه را هم برای تان فراهم می کنه. مثال ها را به راحتی تغییر بدین و بصورت آنلاین اجرایشان کنین.

در این بخش راجع به چگونگی تنظیم کتابخانه ی AngularJS برای استفاده در طراحی برنامه ی وب، صحبت خواهیم کرد. همچنین مروری کوتاه بر ساختار دایرکتوری و مفاهیم آن خواهیم داشت.

وقتی لینکِ https://angularjs.org/ را باز می کنین، دو گزینه برای دانلود کتابخانه ی AngularJS می بینین:

angularjs environment download

  • View on GitHub – روی این دکمه کلیک کنین تا به GutHub برین و تمام اسکریپت های جدید را دریافت کنین.
  • Download AngularJS 1 – یا روی این دکمه کلیک کنین- صفحه ای بشکل زیر به شما نمایش داده خواهد شد –

angularjs environment download

  •  این صفحه آپشن های متفاوتی از کاربردهای AngularJS را به شما نشان میده، بصورت زیر:
    •  دانلود و هاست کردن فایل ها بصورت محلی
      • دو آپشن متفاوت وجود داره،  legacy (قدیمی تر) و latest (جدیدترین). خود نام ها مفهومشان را شرح میدن. legacy نسخه ای پایین تر از 1.2.x داره و latest نسخه ی 1.5.x را داره.
      •  میتوانیم از نسخه های minified (کوچک شده)، uncompressed (غیر فشرده) یا zipped (فشرده) هم استفاده کنیم.
    • CDN access – به DCN هم دسترسی دارین. CDN دسترسی به تمام جهان را جهت دسترسی به مراکز سنتی -که در این مورد google host است- امکان پذیر می کنه. به این معنی که استفاده از CDN مسئولیت هاست کردن فایل های سرورتان را به مجموعه ای از فایل های خارجی تغییر میده. همچنین این مزیت را به شما میده تا اگه بازدید کننده ی صفحه ی وب تان از قبل یک کپی از AngularJS از همان CDN را دانلود کرده باشه، دیگه نیازی به دانلود مجدد آن نداشته باشه.
  • Try the AngularJS 2– برای دانلود نسخه ی AngularJS beta 2 روی این دکمه کلیک کنین. این نسخه نسبت به legacy و latest در AngularJS 1 خیلی سریعه، از موبایل پشتیبانی می کنه و انعطاف پذیرتره.

در این آموزش از نسخه هایِ CDN کتابخانه، استفاه می کنیم.

مثال

حالا اجازه بدین یک مثال با استفاده از کتابخانه ی AngularJS بنویسیم. مانند زیر یک فایل HTML به نام myfirstexample.html ایجاد می کنیم:

<!doctype html>
   
   
      
   
   
   Welcome {{helloTo.title}} to the world of SoftSkill!
      
      
      
      
   

بخش های زیر جزئیات کد بالا را توضیح میدن:

Include کردنِ AngularJS

در صفحه ی HTML، فایل جاوا اسکریپتِ AngularJS را include کردیم، بنابراین میتوانیم از AngularJS استفاده کنیم.

 

اگه میخواین AngularJS را به آخرین نسخه ی آن، به روز رسانی کنین، از سورس اسکریپت زیر استفاده کنین یا آخرین نسخه ی AngularJS را در سایت رسمی آن بررسی کنین.

 

اشاره به برنامه ی AngularJS

در ادامه به مشخص می کنیم که کدام قسمت های HTML، شامل AngularJS بشن. این عمل با اضافه کردنِ خصیصه ی (attribute) ng-app به ریشه ی عنصر HTML در برنامه ی AngularJS قابل انجامِه. می توانید به شکل زیر، این خصیصه را به عنصر html یا به عنصر body اضافه کنین –

 

View (نمایش)

view، بخشِ زیرِه:

Welcome {{helloTo.title}} to the world of SoftSkill!

ng-controller به AngularJS میگه که کدام controllerها بهمراه این view استفاده میشن. helloTo.title به AngularJS میگه که مقدارِ “model” به نامِ helloTo.title را به صورت HTML در این مکان بنویسه.

Controller (کنترلر)

بخش کنترلر بشکل زیرِه:

 

این کد یک تابعِ controller به نام HelloController را در ماژولِ angular که نامش myapp هست، ثبت میکنه. راجع به ماژول ها و controllerها در بخش های مربوطه شان بیش تر یاد خواهیم گرفت. تابعِ controller، با فراخوانی تابعِ angular.module(...).controller(...) در angular ثبت میشه.

پارامترِ $scope که به تابعِ controller پاس داده شده، همان model است. تابعِ controller یک شیءِ جاوا اسکریپت به نام helloTo را اضافه می کنه و در این شیء، فیلدِ title را اضافه می کنه.

اجرا

کد بالا را با نام myfirstexample.html ذخیره کنین و در هر مرورگری که میخواین  باز کنین. خروجی ای به شکل زیر خواهید دید:

Welcome AngularJS to the world of SoftSkill!

زمانی که صفحه در مرورگر بارگذاری میشه، موارد زیر اتفاق می افتند:

  • سندِ HTML در مرورگر بارگذاری میشه و توسط مرورگر ارزیابی میشه. فایل جاوا اسکریپتِ AngularJS بارگذاری میشه، شیءِ angular global ایجاد میشه. بعد، جاوا اسکریپتی که توابعِ controller را ثبت می کنه، اجرا میشه.
  • سپس AngularJS، برای برنامه های AngularJS و Viewها، HTML را پویش می کنه. وقتی view مستقر میشه، view را به تابعِ controller مربوطه اش متصل می کنه.
  • بعد، AngularJS، توابعِ controller را اجرا می کنه و بعد viewها را با داده هایی از model که توسطِ controller جمع شده ان، تفسیر می کنه. اکنون صفحه آماده ست.

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

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

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

تبلیغات

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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