فصل ۱-۱: معرفی و اجرای اولین برنامه انگولار ۴

18 993

امروزه ورود به دنیای برنامه‌نویسی حرفه‌ای چیزی نیست جز فراگیری تکنیک‌ها و فریم‌ورک‌های مدرن سمت کاربر یا Frontend و سمت سرور یا Backend. پس از طی کردن نزدیک به ۶ فصل از مطالب مربوط به فریم ورک قدرتمند انگولار ۲ اینبار قصد داریم در سری جدید دوره‌های آموزشی شرکت روکسو، به توضیح مفصل (۰ تا ۱۰۰) آموزش فارسی فریم ورک قدرتمند انگولار ۲ بپردازیم. لازم به ذکر است، جهت ورود به این دوره آموزشی باید همواره پیش نیازهای زیر را گذرانده باشید. اما نکته‌ی مهمی‌ای که در این آموزش‌ها وجود دارد این است، برای ورود به دوره آموزشی انگولار ۴ تحت هیچ شرایطی نیاز به یادگیری نسخه‌های ۱ و ۲ این فریم‌ورک نیست، زیر این آموزش‌ها نیز به صورت گام به گام و ۰ تا ۱۰۰ ارائه می‌شوند:

  • تسلط به مفاهیم مقدماتی تا پیشرفته ساختار CSS
  • تسلط به مفاهیم مقدماتی تا پیشرفته ساختار HTML
  • تسلط به مفاهیم مقدماتی و متوسطه زبان برنامه‌نویسی JavaScript

Angular 4 (انگولار ۴) چیست؟

انگولار فریم ورک قدرتمندی‌ست که بر پایه‌ی MVC ایجاد شده و از آن جهت تولید نرم‌افزارهای مدرن در سطح وب، موبایل و دسکتاپ، استفاده می‌کنند. این فریم ورک به زبان برنامه‌نویسی جاوا اسکریپت نوشته شده است. به صورت تخصصی تر باید خدمت شما عرض کنیم که از انگولار به عنوان یک ابزاری برای ساخت نرم‌افزارهای تک صفحه‌ای (Single Page Apps) یا SPA استفاده می‌شود. این سوال برای شما پیش می‌آید که SPA یا نرم‌افزارهای تک صفحه‌ای چیست؟ نرم‌افزارهای مبتنی بر وب یا موبایل که با تکنولوژی SPA ساخته می‌شوند بدین صورت عمل می‌کنند که به هنگام کلیک کردن روی یک لینک در این نرم‌افزارها، صفحه بدون رفرش شدن به صفحه جدیدی منتقل می‌شود. یعنی بدون اینکه صفحه‌ی وب سایت شما از صفر و مجددا بارگذاری شود، کاربر به صفحه جدیدی منتقل خواهد شد. همچنین این صفحات دارای حافظه ماندگار بوده و کاربر پس از کلیک روی دکمه‌های Back یا Next در مرورگر به صفحات قبل یا بعد بدون refresh شدن (بارگذاری مجدد) صفحه انتقال پیدا می‌کند. Gmail مثال بسیار مناسبی به عنوان یک نرم‌افزار تک صفحه‌ای یا SPA است. با انگولار می‌توانید دنیای برنامه‌نویسی خود را تغییر داده و نرم‌افزارهایی با سرعت اجرایی فوق العاده بالا مثل اپلیکیشن‌های موبایل در بستر اینترنت ایجاد کنید.

تاریخچه‌ی انگولار

انگولار ۱ تحت عنوان AngularJs در سال  ۲۰۰۹ توسط کمپانی قدرتمند گوگل زیر نظر آقای Misko Hevery ارائه گردید. این نسخه از انگولار در مدت زمان بسیار کوتاهی با استقبال بی‌نظیر برنامه‌نویسان سمت کاربر، روبه‌رو شد. زیرا به عنوان یکی از فریم‌ورک‌های سریع برای تولید نرم‌افزارهای تحت وب و بر پایه JavaScript وارد دنیای برنامه‌نویسان شده بود و آنها را به شدت تحت تاثیر قرار داد.

انگولار ۲ به عنوان یک بازنویسی مجدد از انگولار ۱ ایجاد شد این نسخه از فریم‌ورک قدرتمند انگولار در سال ۲۰۱۶ و پس از ۶ سال تلاش مداوم مجموعه‌ی گوگل تولید و ارائه شد. این نسخه بسیار متفاوت تر از نسخه ۱ بود و هیچگونه شباهت ساختاری با آن نداشت، هوش بالاتر و ارائه‌ی تکنیک‌های منحصر بفرد، این فریم‌ورک را در بالاترین رده‌ی جهانی نگه‌ داشت. همچنین پس از این تغییرات عظیم نام اصلی نیز از AngularJs به Angular 2 تغییر پیدا کرد.

انگولار ۴ به عنوان یک ویرایش قدرتمند‌تر از انگولار ۲ ایجاد شد. این نسخه در سال ۲۰۱۷ روانه دنیای برنامه‌نویسان گردید. نکته‌ی قابل توجه این است که تغییرات خیلی وسیعی در این نسخه نسبت به انگولار ۲ ایجاد نشد بلکه ساختار قبلی ویرایش و امکانات جدیدی به آن اضافه شد.

شاید این سوال برای شما پیش بیاید که انگولار ۳ چرا منتشر نشد؟ نسخه ۳ به عنوان یک ویرایش مقدماتی از نسخه ۲ نادیده و بنا به تشخیص کمپانی گوگل تولید مطرح نشد.

با توجه به اینکه خواندن مقدمات همواره برای ما آزاردهنده‌تر از همیشه هستند، قصد داریم سریعا به دنیای برنامه‌نویسی وب با استفاده از انگولار شیرجه زده و مفاهیم اصلی را ارائه کنیم. در هر قسمت در صورت نیاز به توضیحات بیشتر، ارائه‌هایی خواهیم داشت.

رابط خط فرمان انگولار یا Angular CLI چیست؟

رابط خط فرمان انگولار یا Angular Command Line Interface به عنوان یک ابزار برای ایجاد و مدیریت ساده نرم‌افزارها است. یعنی شما می‌توانید با استفاده از ابزار تنها با نوشتن چند دستور ساده فایل‌های خود را ایجاد کرده و آنها را مدیریت کنید. و در نتیجه به جای آنکه با موس کار کرده و مدت زمان زیادی را صرف ایجاد فایل‌ها کنید، روی برنامه‌ی خود تمرکز کرده و امکانات نرم‌افزار خود را افزایش می‌دهید. برای نصب استفاده از این ابزار باید ابتدا Node.js را روی سیستم یا سرور خود نصب کنید.

Node.js به عنوان یک پلتفرم یا فضای کاری جهت اجرای سریع و همزمان Real-Time نرم‌افزارها در بستر یک سرور امن توسط شرکت گوگل ایجاد شد. ابزار nodejs به شما کمک می‌کند تا وابستگی‌های موردنیاز برای تولید یک نرم‌افزار را به راحتی هرچه تمام تر دانلود کرده و در پروژه خود مورد استفاده قرار دهید.

برای نصب نود روی این لینک کلیک کرده و سپس در انتهای صفحه دکمه‌ی سمت چپ که عبارت Recommended for Most Users به همراه آخرین نسخه نود روی آن درج شده را دانلود کنید.

پس از اینکه نرم‌افزار Nodejs.org را دانلود و نصب کردید، یک پوشه جهت کار با پروژه‌ی خود در هر مسیری که دوست دارید ایجاد کنید. سپس از طریق CMD یا خط فرمان ویندوز به مسیر پوشه‌ی خود با فرمان زیر بروید:

پس از ورود به فولدر، باید تمام وابستگی‌های مورد نیاز را با استفاده از دستور npm که مخفف عبارت node package manager است در فولدر برنامه نصب کنیم. بنابراین دستور زیر را اعمال خواهیم کرد:

پس از اجرای دستور فوق، با دستور زیر ابزار cli انگولار را نصب می‌کنیم:

کلمه‌ی g مخفف global بوده و در صورت اعمال ابزار cli روی کامپیوتر شما نصب می‌شود. در صورتیکه node را به درستی نصب کرده باشید تمام وابستگی‌ها در سیستم شخصی شما و فضای localhost ایجاد می‌شود.

حال در ادامه برای ایجاد یک پروژه جدید انگولار ۴ دستور زیر را تایپ می‌کنیم:

همانطور که ملاحظه می‌کنید با نصب cli خط فرمان ng برای شما فعال شده و با نوشتن دستور فوق یک فولدر به نام my-first-app ایجاد شده که محتویات درون آن شامل تمام وابستگی‌ها فایل‌های موردنیاز برای شروع یک برنامه‌ی انگولاری است. بنابراین باید خروجی شما به صورت زیر باشد:

همانطور که ملاحظه می‌کنید یک سری فایل در پوشه جدید شما ایجاد شده است که به صورت خودکار توسط خط فرمان انگولار (Angular CLI) تولید شده است.

حال با استفاده از دستور زیر وارد پوشه‌ی اصلی برنامه می‌شویم:

توصیه می کنیم این مطالب را هم بخوانید
1 از 14

پس از ورود به ااین پوشه در صورت وارد کردن دستور زیر تمام فایل‌های انگولار ۴ پردازش و کامپایل شده و در نهایت در مسیر http://localhost:4200 وب سایت شما در دسترس خواهد بود:

در صورتیکه این کار را به درستی انجام داده باشید با ورود به آدرس http://localhost:4200 با عبارت Welcome to app که به صورت زیر است، روبه‌رو خواهید شد.

اولین صفحه نمایش انگولار ۴

به شما تبریک می‌گوییم تا به اینجای کار توانستید اولین پروژه‌ی انگولار ۴ خود را ایجاد کنید. در فصل ۱-۲ به آموزش توضیحات مرتبط با cli خواهیم پرداخت با ما همراه باشید.

جهت عضویت در گروه برنامه نویسی روکسو در تلگرام روی اینجا کلیک کنید.

توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)

آموزش حرفه ای انگولار ۵ به زبان فارسی


فصل ۱

فصل ۲

فصل ۳:‌ خطایابی (Debugging) در انگولار ۴

فصل ۴

فصل ۵

فصل ۶

فصل ۷

فصل ۸: معرفی Observable یا مشاهده کننده‌ها در انگولار ۴

فصل ۹

فصل ۱۰: معرفی فیلترها یا Pipes در انگولار ۴

فصل ۱۱: معرفی درخواست‌های Http در انگولار ۴

18 نظر
  1. رعنا

    سلام، من سری اول که اگولار رو توی مسیر پروژه ام نصبش کردم به درستی اجرا شد و تغیراتت هم به درستی میتونستم ببینم ولی بعد از اینکه سیستمم رو خاموش کردم دیگه موفق به اجرای برنامه ام نشدم باید قبل هر بار اجرا ng serve بزنم، ممنون میشم راهنماییم کنید

    1. مجتبی

      با اجرای ng-server تا زمانیکه بنچره command باز باشه، سرور در حال اجرا است
      با فشار دادن کلیدهای ترکیبی Ctrl+C و تایید یا بستن پنجره Command، سرور داخلی غیر فعال می‌شه

  2. kasra

    salam khaste nabashid.
    man ye moshkeli hast ke chand rooze darigiresh shodam,
    vaghti dastoore ng new nameApp ro vared mikonam file angular-cli.json sakhte nemishe!
    barname doros kar mikone vali in filo(angular-cli.json) nemitoonam peyda konam!
    mamnoon misham komakam konid

    1. روکسو

      سلام وقت شما بخیر لطفا فارسی تایپ کنید
      آخرین ورژن انگولار رو نصب کردید؟ انگولار ۶ یا ۵؟

    2. مجتبی

      از انگولار نسخه ۶ به بعد فایل angular-cli.json به angular.json تغییر نام داده شده

  3. حمیده

    سلام و خسته نباشید
    آیا برای اجرای پروژه انگولار باید وب سروری مثل xampp در ویندوز run باشد؟ nodejs بعنوان وب سرور است ؟ چطور متوجه شوم که node یا هر وب سرور دیگری در حال اجراست؟ چون پروژه با دستور ng-serve اجرا میشود

  4. سعید

    من یه مشکلی دارم با انگولار ، اونم اینه که تو حالت افلاین نمیشه باهاش کار کرد…. یعنی حتما باید به اینترنت وصل باشیم تا یه سری پیشنیازهیی رو بگیره.. ایا راهی هست که بشه به صورت افلاین با انگولار کار کرد؟؟؟؟

    1. مجتبی

      برای اولین بار که پروژه جدید ساخته می‌شه
      پوشه مربوطه رو کپی کنید و داشته باشید
      و برای هر پروژه جدید از پوشه یک کپی بگیری و روی اون کار کنید
      اینطوری دیگه نیازی به دانلود کامل پروژه برای هر بار نیست و بدون اینترنت می‌تونید پروژه جدید داشته باشید

  5. حمید

    این آموزش ها عالی هست، خسته نباشید داره واقعاً کارِ به این تمیزی و با این سطح پیشرفته آموزشی

    یه نکته هم اینکه برای نصب cli حتماً باید نسخه nodejs حداقل ۶٫۹ باشه و نسخه npm حداقل ۳ باشه

  6. محمد

    فکر کنم عکسی پایین صفحه بوده و لود نمیشه!! بررسی کنید

  7. رامین صلحی

    واقعا خیلی زحمت کشیدی عالیییییییییییییییی ممنون از شما

  8. محمد

    آموزش ها خوبه مرسی ❤️
    پلیییز استاپ سی‌این «همانطور که ملاحظه میکنید»، «همانطور که مشاهده میکنید» و ….
    نصف آموزش با این دو عبارت پر شده!

  9. حسین

    سلام

    ممنون عالی بود
    پیشنیاز انگولار ۴ چیه ؟

    انگولار ۴ چه فرقی با angularjs داره و کدوم بهتره؟

    1. روکسو

      با سلام و احترام
      پیش نیاز انگولار ۴ زبان برنامه نویسی تایپ اسکریپت و اشنایی با زبان جاوا اسکریپت هست.
      انگولار ۴ از نظر ساختاری کاملا متقاوت با انگولار js می باشد. گوگل بنای را روی فریم ورک انگولار ۴ قرار داده است بنابراین پیشنهاد می‌کنیم ورژن ۴ به بالا را فرا بگیرید.

  10. AliReza

    وقتی ng new my-first-app
    این ارور رو میده
    ‘ng’ is not recognized as an internal or external command,
    operable program or batch file.

    1. روکسو

      شما انگولار را به درستی نصب نکرده‌اید. باید ابتدا node و سپس npm را نصب کنید و در نهایت angular/cli را از طریق npm روی سیستم خود ذخیره کنید.

      1. seji

        سلام .
        این رفیقمون اقا AliReza درست میگه و مشگلی هست هنگام نصبش.
        آقا بهنام صحیح فرمودند و باید از دستور زیر استفاده بشه تا مشگل برطرف بشه
        لطفا تصحیح کنید کدتون رو . درستش اینه :
        npm install -g @angular/cli
        به این صورت هم میشه استفاده کردش :
        npm i -g @angular/cli

    2. بهنام

      در آموزش این بخش نیاز به اصلاح داره و به همین دلیل هست که این خطا رو مشاهده میکنید
      npm install @angular/cli
      —————————-
      دستور صحیح
      npm install @angular/cli -g
      هساش که cli رو به صورت global نصب میکنه تا بتونید از دستور ng به صورت سراسری استفاده کنید.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.