خانه \\ Angular JS \\ آموزش فشرده Angular 2 از ابتدا تا انتها - بخش دوم

  • آموزش فشرده Angular 2 از ابتدا تا انتها - بخش دوم
آموزش فشرده Angular 2 از ابتدا تا انتها - بخش دوم
1395/11/12 - 17:01:11 // Angular JS // 3 نظر // 8349 بازدید

تعریف و بررسی Component در Angular 2 .

تعریف و بررسی Component در Angular 2 .

بدنه پروژه های Angular 2 در عمل Component ها میباشند. در واقع یک پروژه آنگولار حاوی مجموعه ای از Component هاست. برای روشن شدن مطلب به تصویر زیر دقت کنید.

 

در تصویر بالا در ابتدا از طریق Import هسته Angular در سطح Component قرار میگیرد. بدنه Component حاوی یک Selector که نام قابل استفاده آن Component در View ها است بوده و Template در اصل HTML قابل استفاده و مورد نیاز Component را تایین میکند. در تصویر مشهود است که در عمل Event هم برای Click تعریف شده و بعدا توسط متد SayMyName می توان بدنه Event را تعریف نمود. در سطح کلاس Component که توسط Export ایجاد شده مقدار دهی اولیه متغیر توسط متد سازنده انجام شده است.

با ایجاد چنین کامپوننتی ما فقط یک Button خواهیم داشت که با کلیک بر روی آن در Console عبارت Max نمایش داده خواهد شد. ضمننا به This هم به عنوان اشاره گر کلاس دقت نمایید. در سطح کلاس This به معنای خود کلاس و محتوای درونی آن می باشد.

بررسی نقش Service ها در پروژه آنگولار.

سرویسها نقش ارسال و دریافت داده ها را در سطح Component ها یا بین آنها بر عهده دارند، وگرنه خود Component به خودی خود دستش به داده های سطح سرور نخواهد رسید.

نصب و ایجاد یک پروژه آنگولار

برای کار با آنگولار 2 به NPM و در اصل NodeJS نیاز داریم. اول NodeJS را نصب و یکبار سیستم را Restart نمایید. برای نصب به آدرس

https://nodejs.org/en

مراجعه نمایید.بهتر از فعلن نسخه 6 را دانلود و نصب نمایید، مگر آنکه نسخ بعدی Stable شده باشد.

 

پس از نصب Nodejs و ریستارت سیستم از طریق Github میتوان Quick Start را به سادگی دانلود نمود. Quick Start یک پروژه خالی ولی آماده از همه تنظیمات و فایلهای لازمه برای یک پروژه صفر کیلومتر میباشد. به آدرس زیر مراجعه کنید.

https://github.com/angular/quickstart

پروژه Quick Start را به صورت Zip دانلود نمایید.درون درایو C یک فولدر به نام Projects بسازید و درون آن یک فولدر دیگر به نام myapp ایجاد و Quick Start را به صورت کامل درون آن Unzip نمایید.

از طریق Command Prompt و دستور CD درون فولدر myapp بروید.

  
 

بهترین ابزار و عمومی ترین برنامه کار برای Script ها ، VS Code میباشد. در اینجا هم من از VSCode استفاده خواهم نمود. پس VsCode را باز کنید و از طریق

New>Open Folder

و آدرس دهی فولدر myapp پروژه را باز کنید.

 
 
 

حال میتوانید همه فایلهای پروژه را یک به یک درون VS Code باز و Edit کنید. نگاهی به درون Package.Json بیندازید . تغریبا همه تنظیمات و Version بندی Script ها و ... درون این فایل وجود دارد و میتوانید اگر از آنها مطلع هستید و نیاز به تغییر دارید، در آنها تغییر ایجاد کنید.

 
 
 
 
 
 
علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
مطالب مرتبط
نظرات کاربران

  • محمد
    1396/05/23 - 00:23:51

    0
    0
    سلام و خداقوت یه سوال داشتم.اینکه من VS2017 رو نصب دارم روی سیستمم.لازمه این کارایی که گفتید برای اجرا و ساخت آنگولار رو هم انجام بدم؟

  • محمد
    1396/05/23 - 00:33:17

    0
    0
    سلام و خداقوت یه سوال داشتم.اینکه من VS2017 رو نصب دارم روی سیستمم.لازمه این کارایی که گفتید برای اجرا و ساخت آنگولار رو هم انجام بدم؟

  • محمد
    1396/05/23 - 00:45:47

    0
    0
    سلام و خداقوت یه سوال داشتم.اینکه من VS2017 رو نصب دارم روی سیستمم.لازمه این کارایی که گفتید برای اجرا و ساخت آنگولار رو هم انجام بدم؟
     
     ---
     
    به نظر من اصلن آنگولار را درون VS نبرید و با NodeJS کار کنید. نهایتا از VS به عنوان Editor استفاده کنید. 
ارسال نظر