آموزش شروع کار با Angular

آموزش شروع کار با Angular

Angular یک پلت فرم است که ساخت برنامه های وب را آسان می کند.
Angular ترکیبی از قالب های اخباری، Dependency Injection و بهترین شیوه های یکپارچه سازی برای حل چالش های توسعه است.
Angular توانایی برنامه نویسان را برای ساخت برنامه های کاربردی وب، موبایل یا دسکتاپ بالا می برد.

پیش نیازها

در این مقاله ما فرض را بر این می گذاریم که شما در حال حاضر با جاوا اسکریپت آشنا هستید و مفاهیم کلاس و ماژول را می دانید.
تمامی مثال های این مقاله با استفاده از Type Script نوشته می شود.

گام اول:آموزش نصب کردن محیط توسعه Angular

Angular CLI یک ابزار رابط خط فرمان است که می تواند یک پروژه را ایجاد کند، فایل ها را اضافه کند و وظایف مختلفی مانند testing، bundling و deployment را انجام دهد.
قبل از اینکه بتوانید کاری انجام دهید، شما باید محیط توسعه خود را نصب کنید.
بنابراین در گام اول اگر Node.js و npm روی سیستم شما از قبل نصب نیست، می بایست ابتدا Node.js و npm را نصب نمایید.
برای نصب node.js شما می توانید از لینک https://nodejs.org/en/download آخرین نسخه آن را دانلود نمایید که با نصب آن npm هم نصب خواهد شد.
بعد از نصب می توانید با اجرای دستور node –v بر روی پنجره Command Prompt از نصب آخرین نسخه node.js که نسخه 8.x یا بالاتر می باشد اطمینان حاصل نمایید. همچنین شما می توانید با اجرای دستور npm –v نسخه npm نصبی بر روی سیستم خود را مشاهده نمایید که حداقل می بایست نسخه 5.x یا بالاتر باشد.
نسخه های قدیمی تر خطاهایی تولید می کنند، اما نسخه های جدیدتر خوب هستند و توصیه می شود که از نسخه های بالاتر تر استفاده نمایید.
سپس Angular CLI را با استفاده از دستور زیر به صورت Globally بر روی سیستم خود نصب نمایید.

گام دوم:آموزش ایجاد یک پروژه جدید Angular

پنجره Command Prompt را باز کنید.
با اجرای دستور زیر، یک پروژه جدید و برنامه ی پیش فرض ایجاد کنید:

Angular CLI پکیج های مورد نیاز npm را نصب می کند، فایل های پروژه را ایجاد می کند و پروژه را با یک برنامه پیش فرض ساده پر می کند.
این امر می تواند مدتی زمان ببرد.
شما می توانید با استفاده از دستور ng add یک pre-packaged را به یک پروژه جدید اضافه کنید.

گام سوم:آموزش راه اندازی Application مربوط به Angular 6

در این مرحله به دایرکتوری پروژه بروید و سرور را راه اندازی کنید.

دستور ng serve سرور را راه اندازی می کند، فایل های خود را تماشا می کند و برنامه را دوباره بازسازی می کند، همچنان که شما آن فایل ها را تغییر می دهید.
با استفاده از گزینه –open یا (just -o) مرورگر شما به طور خودکار در http: // localhost: 4200 / باز خواهد شد.
برنامه شما با پیام، شما را خوش آمد می گوید:

گام چهارم:آموزش ویرایش اولین کامپوننت Angular

CLI اولین کامپوننت Angular را برای شما ایجاد کرد.
این کامپوننت، کامپوننت ریشه (root component) است و به نام app-root است.
شما می توانید آن را در /src/app/app.component.ts پیدا کنید.
فایل component را باز کنید و عنوان آن را از «app» به « My First Angular App!» تغییر دهید.

browser به طور خودکار با عنوان جدید بارگذاری می شود. این خوب است، اما می تواند بهتر باشد.
فایل src/app/app.component.css را باز کنید و روی style آن کمی کار کنید.

تا اینجا از شما انتظار می رود که یک برنامه Hello World ساده را انجام دهید .

بررسی فایل پروژه Angular

یک پروژه Angular CLI پایه ای برای آزمایش های سریع و راه حل های سازمانی است.
اولین فایلی که شما باید چک کنید فایل README.md است.
این فایل شامل بعضی از اطلاعات اولیه در مورد نحوه استفاده از دستورات CLI است.
برخی از فایل های ایجاد شده ممکن است برای شما نا آشنا باشد.

فولدر src

برنامه شما در پوشه src قرار می گیرد.
تمام کامپوننت های Angular، الگوها، سبک ها، تصاویر، و هر چیز دیگری که برنامه شما نیاز دارد، اینجا قرار دارد.

فولدر ریشه (root folder)

فولدر src/ یکی از موارد درون پوشه ریشه پروژه است. فایل های دیگر به ساخت، تست، نگهداری، مستند سازی و استفاده از برنامه کمک می کنند. این فایل ها در پوشه ریشه در کنار src/قرار دارند.

برای مطالعه سرفصل دوره آموزش عملی ASP.NET Core & Angular 6 & KendoUI کلیک نمایید .