انجام پروژه angular

انگولار چیست؟
انگولار( Angular) یک چارچوب متن باز توسعه یا فریم ورک برنامه نویسی جاوا اسکریپت فرانت اند است که توسط گوگل ساخته شده است. با انگولار می توانید PWA (برنامه های وب پیشرو) ، SPA (برنامه های تک صفحه ای) و موارد دیگر بسازید. انگولار دومین چارچوب فرانت اند است که بیشتر مورد استفاده قرار می گیرد. همان چیزی است که توسعه دهندگان را قادر می سازد تا به راحتی با استفاده از زبان های برنامه نویسی مانند جاوا اسکریپت، تایپ اسکریپت و دارت برنامه های تک صفحه ای ایجاد کنند.
اصلی‌ترین قسمت‌های سازنده انگولار به صورت زیر هستند:

     ماژول‌ها  (Modules)
    کامپوننت‌ها (Components)
     تمپلت‌ها  (Templates)
     متادیتا (Metadata)  
    دیتا بایندینگ (Data Binding)
    دایرکتیو (Directive)
     سرویس‌ها

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

انگولار و انگولار جی اس
هنگامی که در گوگل عبارت توسعه دهنده انگولار را سرچ میکنید، ممکن است متوجه شده باشید که اصطلاح انگولار گاهی به جای آن با انگولار جی اس استفاده می شود. این ممکن است مانع جستجوی شما برای بهترین توسعه دهنده انگولار شود. انگولار جی اس نسخه قبلی انگولار است که در حال حاضر در حال استفاده است. گوگل ورژن های زیر را برای فریم ورک برنامه نویسی جاوا اسکریپت ارائه کرده است:
انگولار جیاس، انگولار2، انگولار3، انگولار4، انگولار5، انگولار6، انگولار7
انگولار جی اس 2 بازنویسی کامل انگولار جی اس بود.
با بروزرسانی نسخه های انگولار ویژگیهای بیشتری به آن اضافه میشود که کدنویسی را راحتتر میکند و باعث بهبود سرعت و کارایی میشود.
تفاوت انگولار و انگولار جی اس
انگولار بر اساس تایپ اسکریپت است، در حالی که انگولار جی اس بر اساس جاوا اسکریپت است.
این دو چارچوب های متفاوتی دارند. انگولار جی اس از شرایط دامنه و کنترل کننده استفاده می کند، انگولار در عوض از سلسله مراتب مولفه ها استفاده می کند.
انگولار جی اس گزینه استفاده از شخصی سازی دستورالعمل های جدید را ارائه می دهد، در حالی که انگولار دستورالعمل های استانداردی را ارائه می دهد که به طور متفاوتی استفاده می شوند.
برخی از نقاط قوت انگولار شامل موارد زیر است:

    تایپ اسکریپت مورد استفاده در انگولار امکان بهینه سازی و سازگاری کد را فراهم می کند
    از چندین زبان برنامه نویسی پشتیبانی می کند
    مکانیزم مسیریابی ساده تر
    انتخاب خوب برای کاربردهای بزرگ و پیچیده
    آزمایش راحت تر
    انتخاب خوبی برای برنامه های دارای یک صفحه و رابط کاربری گسترده

این بدان معنی نیست که انگولارجی اس لزوماً انتخاب بدی است. این به نیازها و برنامه های آینده شما بستگی دارد.
یک فریلنسر توسعه دهنده انگولار چه کاری انجام می دهد؟

    فعالیت در سمت UI یا توسعه رابط کاربری نرم افزار   
    دانش (و تجربه) انگولار ، ترجیحاً نسخه ای که قصد کار با آن را دارید
    دانش HTML و CSS ، زیرا اینها مهارت های اساسی هستند که وقتی توسعه دهندگان به دنبال راه حل و اصلاح هستند ، به کار شمار می آیند.
    دانش هسته جاوا اسکریپت و تایپ اسکریپت، زیرا زبان برنامه نویسی پیشنهادی انگولار است.
    امکان ساخت ماژول ها و اجزای کامل
    امکان ساخت برنامه های تک صفحه ای
    درک خدمات وب مورد استفاده در سیستم
    دانش API مرورگر و REST  
    دانش گیت git، زیرا به شما امکان می دهد با خیال راحت ویژگی های جدید و روش های کدگذاری را تجربه کنید
    مهارت های نرم مانند توجه به جزئیات ، مهارت های ارتباطی خوب ، خلاقیت ، تفکر راه حل محور و توانایی کار در یک تیم

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

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

نرم افزار انگولار فریم ورک محبوب جاوا اسکریپته که توسط Google توسعه داده شده. این فریم ورک برای ساخت اپلیکیشنای وب تک صفحه‌ای (SPA) و همچنین اپلیکیشنای موبایل و دسکتاپ استفاده میشه. انگولار به دلیل معماری مدولار، کارایی بالا و قابلیتای پیشرفته، مورد توجه بسیاری از توسعه دهندگان قرار گرفته.

برای انجام پروژه angular باید موارد زیر رو در نظر داشته باشین.
ویژگی های angular

    استفاده از تایپ اسکریپت: انگولار به طور کامل از تایپ اسکریپت پشتیبانی می کنه که زبان برنامه نویسی مبتنی بر جاوا اسکریپته.
    معماری مدولار: انگولار از ساختار مدولار بهره می بره که باعث میشه کدها به صورت منظم و قابل مدیریت باشن.
    دو طرفه بودن دیتا بایندینگ (Two-way Data Binding): انگولار از بایندینگ دو طرفه داده ها پشتیبانی می کنه که هم زمان سازی بین مدل و ویو رو بهبود می بخشه و انجام پروژه انگولار رو راحت تر می کنه.
    Dependency Injection: تزریق وابستگی یکی از ویژگی های مهم انگولاره که مدیریت وابستگی ها رو آسون تر می کنه.
    تست‌پذیری: انگولار ابزارهایی برای تست واحد و تست یکپارچگی داره که توسعه دهندگان رو توی تست کدها یاری میده.
    Routing:angular  سیستم روتینگ پیشرفته ای داره که به راحتی می‌تونه اپلیکیشنای تک صفحه ای پیچیده ایجاد کنه. همین موضوع باعث انجام پروژه های انگولار دانشجویی به راحت ترین نحو ممکن میشه.
    Reactive Programming: استفاده از RxJS برای برنامه نویسی واکنشی و مدیریت بهتر رویدادها و داده ها.

کاربردها

    اپلیکیشن های تک صفحه ای  (SPA): برای ساخت اپلیکیشن های تک صفحه ای که نیاز به تعاملات پویا و سریع دارن از انگولار میتونین استفاده کنین. انجام پروژه angular در این زمینه بهترین انتخابتون می تونه باشه.
    وب اپلیکیشن های پیچیده:  angularمناسب برای توسعه وب اپلیکیشنای بزرگ و پیچیده با قابلیتای زیاده.
    اپلیکیشن های موبایل و دسکتاپ: با استفاده از ابزارهایی مانند Angular + NativeScript و Electron  می تونیم اپلیکیشنای موبایل و دسکتاپ پیشرفته ای توسعه بدیم.
    وب سایت های تجاری و تجارت الکترونیک: به دلیل ساختار مدولار و کارایی بالا، برای ساخت وب سایتای تجاری و تجارت الکترونیک می تونیم از انگولار استفاده کنیم.

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

نحوه یادگیری انگولار

برای انجام پروژه انگولار و یادگیری اون نیاز به پیش نیاز هایی داریم که توی این بخش اونارو بهتون معرفی می کنیم.

    HTML, CSS, JavaScript: قبل از شروع یادگیری انگولار، باید با مفاهیم پایه ای  HTML، CSS  و JavaScript آشنا باشین وگرنه توی یادگیری به مشکل می خورین.
    TypeScript: برای انجام پروژه های angular نیاز به آشنایی با TypeScript دارین که کمک بزرگی به شما می کنه.

منابع یادگیری انگولار

    مستندات رسمی انگولار: شما می تونین از Angular Documentation که جامع‌ترین و به‌روزترین منبع برای یادگیری انگولاره استفاده کنین.
    دوره های آنلاین:
        Coursera، Udemy، Pluralsight و LinkedIn Learning دوره های متنوعی توی این زمینه ها بهتون ارائه میدن، اما مشکلشون اینه که زبانشون انگلیسیه. با این حال سایت هایی مثل فرادرس وجود داره که به طور کامل آموزش این فریم ورک رو بهتون میدن.
    کانال های یوتیوب:
        کانال های یوتیوب زیادی وجود دارن که به شما آموزش انگولار میدن. با یه سرچ ساده می تونین آموزش های زبان فارسی این فریم ورک رو پیدا کنین.سرفصل های دوره

معرفی بیشتر و مقدمات دوره

آموزش Typescript

مفاهیم اصلی Angular بصورت جامع

آشنایی با Angular Material و طراحی ظاهر پروژه Fitness Application

اپ تناسب اندام (Fitness Application) - کار کردن با داده ها و اتصال به Firebase

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

آشنایی با Angular Universal برای Server Side Rendering

انیمیشن ها در انگولار - Angular Animations

پروژه دوم - مینی اپ اطلاعات پرداخت

پروژه سوم - Todo Pro Application

استفاده از تکنولوژی PWA در Angular

بروزرسانی ها در انگولار ۱۷

آشنایی با Webassembly و Rust

پروژه چهارم - گیم بین (پیاده سازی با انگولار ۱۸ بر بستر Gitlab)

پروژه پنجم - Movie

انجام پروژه های angular

د داریم یک پروژه ساده با Angular پیاده‌سازی کنیم. در مقاله ی بررسی دقیق سه فریمورک اصلی جاوااسکریپت، با فریم ورک Angular آشنایی نسبی پیدا کردید و متوجه محبوبیت این فریم ورک شدید. حالا در پایان این مقاله، شما این توانایی رو به دست خواهید آورد تا بدون هیچ آشنایی قبلی با angular ، یک اپلیکیشن ساده با این فریم ورک محبوب پیاده سازی کنید، با ساختار ابتدایی پروژه های angular آشنا شوید و همچنین با یک API به صورت ساده ارتباط برقرار کنید. دقت داشته باشید این مقاله پیش نیازهایی دارد و قصد ما آموزش جاوااسکریپت نیست. بنابراین انتظار میرود از قبل با جاوااسکریپت آشنا باشید. همچنین آشنایی با ES6 ، npm (برای آموزش به دوره ی رایگان آموزش npm در سایت سکان آکادمی مراجعه کنید) و typescript به درک بهتر این مقاله کمک میکند. البته از دستورات ساده ای استفاده خواهیم کرد و سعی میکنیم تمامی دستورات را به زبان ساده توضیح دهیم.
آماده سازی سیستم

امروزه برای هر پروژه جاوااسکریپتی، مدیریت پکیج‌ها، نیازمندی مهمی به نظر می‌آید. این کار توسط پکیج منیجرها انجام میشود. یکی از پکیج منیجرهای محبوب برای جاوااسکریپت، npm است. پس از نصب nodejs این پکیج منیجر به صورت پیشفرض روی سیستم عامل شما نصب خواهد شد. برای نصب nodejs کافیست به لینک زیر مراجعه کرده و nodejs را با توجه به سیستم عامل خود انتخاب نصب کنید:

https://nodejs.org

همچنین برای نوشتن کدهای پروژه به یک ویرایشگر کد نیاز خواهید داشت. میتوانید از هر ویرایشگری که مورد علاقه شماست استفاده کنید. به عنوان یک پیشنهاد میتوانید از VS Code استفاده کنید. این ویرایشگر رایگان، سبک و دارای رابط کاربری ساده و زیبایی بوده و کدنویسی در این ادیتور بسیار آسان است. برای دانلود VS Code روی لینک زیر کلیک کنید:

https://code.visualstudio.com

بعد از نصب این ویرایشگر، وارد قسمت extensions شده و angular language service را نصب کنید. این افزونه در هنگام کدنویسی به شما کمک خواهد کرد.
ساخت پروژه

برای ساخت یک پروژه SPA (مخفف Single Page Application یا اپلیکیشن تک صفحه‌ای) از angular/cli استفاده خواهیم کرد. ابتدا باید این cli (مخفف command line interface) را بر روی سیستم عامل خود نصب کنید. برای این کار، command line خود (مثل cmd در windows) را باز کرده و دستور زیر را اجرا کنید:

npm install -g @angular/cli

در دستور بالا از npm برای نصب پکیج استفاده کردیم. دستور install ، یک پکیج را نصب میکند. فلگ g- باعث خواهد شد این پکیج به صورت global نصب شود. هنگامی که پکیجی را به صورت global نصب کنید، در هر مسیری از سیستم که باشید، به این دستور دسترسی خواهید داشت. برای توضیحات بیشتر اینجا کلیک کنید.

از این پس به دستور ng در ترمینال دسترسی خواهیم داشت. با استفاده از این دستور، میتوان یک پروژه جدید ایجاد کرد. برای این کار، ابتدا در command line وارد مسیری که قصد ایجاد پروژه در آن را دارید، شده و سپس دستور زیر را اجرا کنید:

ng new my-app

در این دستور my-app نام پروژه ما خواهد بود (میتوانید به صورت دلخواه نام پروژه را انتخاب کنید). حال چند لحظه صبر کنید تا پروژه ساخته شده و وابستگی‌ها و پکیج‌ها نیز نصب شوند. بعد از اجرای این دستور، فولدری به نام my-app (نام پروژه‌ای که ساختیم) ساخته خواهد شد. فولدر ساخته شده را در ویرایشگر کد خود باز کنید.
توجه: در زمان نوشتن این مقاله از نسخه‌ی angular 9 استفاده شده است.

ساختار پروژه

اگر نگاهی به ساختار پروژه بندازید با آیتم‌های زیادی روبرو میشوید. در ابتدا شاید گنگ به نظر برسند اما به مرور با هر یک از موارد آشنا خواهید شد. نیازی نیست در ابتدای کار از همه‌ی موارد و قابلیت‌ها استفاده کنید.
برای شروع، نگاهی به فولدر src انداخته و در این فولدر، به فولدر app نگاه کنید. این فولدر به صورت پیشفرض دارای 5 فایل خواهد بود. فایل اصلی و ورودی اپلیکیشن ما app.module.ts است. 4 فایل دیگر نیز وجود دارند که فایل‌های کامپوننت پیشفرض ساخته شده توسط انگولار هستند (نام این فایل‌ها با app شروع شده که نام کامپوننت پیشفرض ساخته شده است). اجازه دهید قبل از شروع، ابتدا با ساختار یک کامپوننت در انگولار آشنا شویم.
ساختار کامپوننت در Angular

با ایجاد هر کامپوننت در انگولار 4 فایل ساخته خواهد شد. به عنوان مثال کامپوننت پیشفرض ساخته شده به نام app را در نظر بگیرید. این کامپوننت دارای 4 فایل مجزا است:
• app.component.html: این فایل، فایل template کامپوننت است و کدهای html در این فایل قرار میگیرد.
• app.component.css: این فایل شامل کدهای CSS و استایل کامپوننت خواهد بود.
• app.component.ts: این فایل شامل کدهای جاوااسکریپت کامپوننت است.
• app.component.spec.ts: در این فایل کدهای تست کامپوننت نوشته میشود.
همچنین برای ساخت یک کامپوننت دلخواه میتوانید از دستور زیر استفاده کنید:

ng generate comp

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

onent

تعریف پروژه

قصد داریم اپلیکیشن ساده‌ای بسازیم که قیمت دلاری یک کالا را از ورودی دریافت کرده و با دریافت قیمت لحظه‌ای دلار و سپس ضرب با قیمت ورودی، قیمت ریالی کالا را به عنوان خروجی نمایش دهد. برای دریافت قیمت لحظه ای دلار به تومان، از API زیر استفاده خواهیم کرد:

https://api.tgju.online/v1/data/sana/json

API بالا پاسخی با فرمت JSON به صورت زیر نمایش خواهد داد:

{
  "sana": {
    "data": [
      {
        "title": "سامانه سنا دلار خرید",
        "slug": "sana_buy_usd",
        "p": 258861,
        "d": 6137,
        "dp": 2.37,
        "dt": "low",
        "h": 258861,
        "l": 258861,
        "t": "۰۹:۰۳:۰۴",
        "updated_at": "2020-09-20 09:03:04"
      }
      // more data
    ]
    // api meta data
  }
}

ساخت اپلیکیشن

بیایید برای شروع، یک استایل کلی برای پروژه در نظر بگیریم. برای قسمت بالای صفحه، یک navbar ساده در نظر میگیریم که نام پروژه در اینجا قرار میگیرد. در صفحه نیز دو label در نظر میگیریم که قیمت‌ها را نمایش خواهد داد. یکی قیمت ریالی و دیگری قیمت دلاری. در زیر این label ها نیز یک input برای دریافت قیمت از کاربر و یک button برای دریافت قیمت لحظه‌ای ارز از API معرفی شده و تبدیل قیمت‌ها در نظر میگیریم.
قبل از اینکه وارد پیاده‌سازی شویم، اجازه دهید مفهوم ماژول‌ها در انگولار رو به طور مختصر بررسی کنیم. در انگولار برای استفاده از برخی از قابلیت‌ها مثل bind کردن دو طرفه یک داده (منظور از bind کردن دو طرفه یک داده این است که با تغییر داده در قسمت کدهای جاوااسکریپت، داده در قسمت template نیز تغییر داده شود و بلعکس) در form ها ، استفاده از Restful API خارجی ، سیستم routing و تغییر کامپوننت‌ها و ... میتوانید از ماژول‌هایی که در انگولار وجود دارند استفاده کنید (همچنین میتوانید به صورت سفارشی ماژول بسازید). برای استفاده از ماژول‌ها در اپلیکیشن میتوانیم ماژول مورد نظر را import کرده و در فایل app.module.ts در قسمت imports به اپلیکیشن اضافه کنیم. به طور مثال در کد زیر از ماژول‌های BrowserModule و FormModule استفاده شده:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

کدهای HTML زیر را در app.component.html قرار دهید:

<!-- Toolbar -->
<nav class="toolbar" role="banner">
    <span>{{appName}}</span>
</nav>
 
<div class="container">
    <div class="output-container">
        <div class="rial-price-output">Price: <strong>{{rialValue}}</strong> <small> rial</small></div>
        <div class="usd-price-output">USD: <strong>{{usdValue}}</strong> <small> USD</small></div>
    </div>
    <input type="number" class="usd-price-input" [(ngModel)]="usdValueInput" placeholder="Enter USD price..." />
    <button class="btn-convert" (click)="fetchPrice()">Convert</button>
</div>

اجازه دهید چند مورد را در کدهای بالا بررسی کنیم. همانطور که میبینید در کد بالا یک HTML ساده داریم که شامل navbar ، label ها ، input و button پروژه است. تنها شاید چند مورد برای شما تازگی داشته باشه:
• اولین مورد استفاده از {{ }} است. در angular برای استفاده از متغیرهایی که در app.component.ts قرار گرفته‌اند از {{ }} استفاده میشود (که به mustache معروف است). در قسمت بالا از متغیرهای appName و rialValue و usdValue استفاده کردیم تا توسط این متغیرها، قیمت‌ها و نام اپلیکیشن را نمایش دهیم (که در app.component.ts به عنوان متغیر تعریف خواهیم کرد).
• دومین مورد bind کردن دو طرفه یک متغیر هست. در angular برای bind کردن دو طرفه یک متغیر با یک input از ngModel استفاده میکنیم (در بالا bind شدن دو طرفه متغیرها توضیح داده شد). در مثال بالا وقتی مقدار input تغییر داده شود، مقدار usdValueInput نیز تغییر خواهد کرد. از طرفی با تغییر usdValueInput مقدار input نیز تغییر میکنه. نکته ای که باید دقت کنید این است که برای استفاده از bind کردن دو طرفه، ابتدا باید ماژول FormModule را در app.module.ts وارد کنید. این ماژول را میتوانید از angular/forms@ وارد پروژه کنید (در ادامه نحوه وارد کردن این ماژول توضیح داده شده است).

• سومین مورد این است که برای استفاده از event ها (مثل onclick) در template از قرار دادن نام event مورد نظر در () استفاده میکنیم. در قسمت بالا قصد داریم هر زمان بر روی button کلیک شد، متد fetchPrice (که در ادامه تعریف خواهیم کرد) فراخوانی شود. برای اینکار از (click) استفاده کرده و متد مورد نظر را به آن اختصاص میدهیم.

بیایید ماژول FormModule را برای bind کردن دو طرفه متغیرها به پروژه اضافه کنیم. کد زیر را در فایل app.module.ts قرار دهید:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

حال برای ایجاد استایل مورد نظر، کدهای CSS زیر را در app.component.css قرار دهید:

.toolbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #1976d2;
  color: white;
  font-weight: 600;
}

.container {
  margin: 120px 75px 0 75px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rial-price-output {
  font-size: 45px;
}

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

.usd-price-output {
  font-size: 45px;
  margin-top: 20px;
}

.usd-price-input {
  height: 40px;
  width: 230px;
  margin-top: 50px;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-radius: 5px;
  outline: none;
  font-size: 16px;

  transition: 200ms;
}

.usd-price-input:hover {
  border: 2px solid rgba(117, 177, 226, 0.4);
}

.usd-price-input:focus {
  border: 2px solid rgba(0, 86, 156, 0.4);
}

.btn-convert {
  cursor: pointer;
  margin-top: 30px;
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  font-size: 16px;
  color: white;
  background-color: #3ba5ec;

  transition: 200ms;
}

.btn-convert:hover {
  background-color: #2a8cce;
}

.btn-convert:active {
  background-color: #176da7;
}

حالا وقت این است که منطق برنامه را بنویسیم. قطعه کد زیر را در فایل app.component.ts قرار دهید (در ادامه به توضیح این کدها خواهیم پرداخت):

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  appName = "Angular Converter";

  rialValue: number = 0;
  usdValue: number = 0;
  usdValueInput: string = "";

  fetchPrice() {
    fetch("https://api.tgju.online/v1/data/sana/json")
      .then(result => {
        return result.json();
      })
      .then(data => {
        let usdItem = data.sana.data.find(i => i.slug === 'sana_buy_usd');
        let usd = parseInt(usdItem.p);
        
        this.usdValue = usd;
        this.rialValue = (parseInt(this.usdValueInput) | 0) * usd;
      })
      .catch(err => {
        console.log(err);
      });
  }
}

قطعه کد بالا شامل یکسری متغیر برای ذخیره و نمایش داده ها و یک متد برای دریافت قیمت و تبدیل قیمت است.
برای ساخت متغیرها در کامپوننت تنها کافیست آن‌ها را به عنوان متغیر در class در نظر بگیرید. میتوانید type این متغیرها را نیز تعریف کنید (این مورد از ویژگی‌های typescript است).
در کد بالا چهار متغیر برای کامپوننت در نظر گرفته شده. appName که نام پروژه ما را در بر میگیرد و در قسمت بالای صفحه در navbar نمایش داده میشود، rialValue و usdValue برای نمایش قیمت ریالی و دلاری کالا در template و usdValueInput که برای دریافت ورودی و قرار دادن مقدار input استفاده شده است.
همچنین کامپوننت ما دارای متدی به نام fetchPrice است که این متد با استفاده از fetch ، قیمت دلار را دریافت و با ضرب در مقدار ورودی کاربر (که در متغیر usdValueInput ذخیره شده است) ، قیمت ریالی کالا را محاسبه کرده و در متغیرهای کامپوننت ذخیره میکند. با تغییر این متغیرها در قسمت script، مقدار نمایشی در قسمت template نیز تغییر میکند.
اجرای پروژه
شروع یک پروژه انگولار 9 آشنا می‌شویم. برای ایجاد موفق هر پروژه «انگولار» (Angular) ‌به صوت لوکال باید سه نرم‌افزار زیر روی سیستم نصب باشند:
فهرست مطالب این نوشته
نصب نرم‌افزارها برای شروع یک پروژه انگولار ۹
ایجاد پروژه انگولار
997696

    VScode
        ویژوال استودیو کد (+) یک ادیتور سورس کد است که از سوی مایکروسافت برای ویندوز، لینوکس و macOS توسعه یافته است. این ادیتور امکان دیباگ کردن، استفاده از کنترل Git و گیت‌هاب به صورت داخلی، هایلایت کردن سینتکس، تکمیل هوشمند کد، اسنیپست و ریفکتور کردن کد را فراهم می‌سازد.
    Node
        Node.js (+) یک محیط زمان اجرای چند پلتفرمی برای جاوا اسکریپت است که کد این زبان را خارج از یک مرورگر اجرا می‌کند.
    Npm
        Npm (+) بزرگ‌ترین رجیستری نرم‌افزار جهان است. توسعه‌دهندگان اوپن سورس سراسر دنیا از npm برای اشتراک و استفاده از پکیج‌ها استفاده می‌کنند. بسیاری از سازمان‌ها نیز از npm برای مدیریت توسعه کد خود به صورت خصوصی بهره می‌گیرند.

نصب نرم‌افزارها برای شروع یک پروژه انگولار ۹

در این بخش با مراحل نصب نرم‌افزارهای مورد نیاز برای شروع یک پروژه انگولار ۹ آشنا می‌شویم.

آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS
فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس
کلیک کنید
نصب ویژوال استودیو کد

به منظور نوشتن کد باید از یک IDE استفاده کنیم. مایکروسافت یک IDE چندپلتفرمی و متن-باز توسعه داده است که صرف نظر از سیستم عاملی که استفاده می‌کنید، روی همه پلتفرم‌ها اجرا می‌شود. برای نصب این IDE به وب‌سایت آن (+) بروید و نسخه‌ای که مناسب شما است را دانلود کنید. مطمئن شوید که نسخه Stable را انتخاب می‌کنید.

پروژه انگولار 9

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

آموزش نصب و راه اندازی پایتون در VS Code (رایگان)
فیلم آموزش نصب و راه اندازی پایتون در VS Code (رایگان) در فرادرس
کلیک کنید
نصب Node و npm

انگولار نسخه 9 نیازمند حداقل Node.js نسخه 10.13 است. پیشنهاد می‌کنیم آخرین نسخه Node را که در زمان نگارش این مقاله 12.16.3 بوده است دانلود کنید. برای دانلود Node.js به این وب‌سایت (+) ‌بروید و پکیج مناسب سیستم عامل خود را انتخاب کنید. جدیدترین نسخه Node شامل آخرین قابلیت‌ها است. اگر یک پروژه سازمانی توسعه می‌دهید بهتر است پکیج Long Term Support را انتخاب کنید.

پروژه انگولار 9

پس از دانلود شدن، فایل نصب را روی سیستم خود باز کرده و مراحل نصب را پیگیری کنید. با نصب این پکیج، npm را نیز نصب کنید. زمانی که فرایند نصب پایان یافت، باید بتوانید شروع به پروژه انگولار شِل بکنید. برای بررسی این که نرم‌افزار با موفقیت نصب شده است یا نه، می‌توانید کارهای زیر را انجام دهید:

آموزش مقدماتی نود جی اس Node.js
فیلم آموزش مقدماتی نود جی اس Node.js در فرادرس
کلیک کنید

پاورشل یا اعلان فرمان ویندوز را باز کنید و دستورهای زیر را برای بررسی نسخه نرم‌افزارهای اخیراً نصب شده وارد کنید:

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

c:\> node -v
c:\> npm -v
c:\> code -v

نسخه‌های هر کدام از نرم‌افزارهای نصب‌شده در پاورشل نمایش می‌یابد. بدین ترتیب از نصب موفقیت‌آمیز همه این موارد مطمئن می‌شویم.

پروژه انگولار 9
ایجاد پروژه انگولار

برای این که بتوانیم یک پروژه انگولار ایجاد کنیم، باید از Angular CLI استفاده کنید. Angular CLI موجب می‌شود که ایجاد اپلیکیشن که آماده به کار باشد، آسان شود. نکته جالب در مورد استفاده از Angular CLI این است که از رویه‌های مناسب انگولار پیروی می‌کند. Angular CLI یک ابزار رابط خط فرمان است که با استفاده از آن می‌توانید اپلیکیشن‌های انگولار را مقداردهی، توسعه، چارچوب‌بندی و نگه‌داری کنید.

آموزش پروژه محور AngularJS و ASP.Net Web API با معماری MVC
فیلم آموزش پروژه محور AngularJS و ASP.Net Web API با معماری MVC در فرادرس
کلیک کنید
نصب Angular CLI

رویکردهای زیادی برای نصب Angular CLI وجود دارد. در این راهنما آن را با استفاده از ابزار مدیریت پکیج NPM درون ویژوال استودیو کد نصب خواهیم کرد. پاورشل یا اعلان فرمان ویندوز را باز کنید. یک دایرکتوری برای پروژه باز کنید. در این مثال پروژه‌ای در دایرکتوری خودش که در درایو C قرار دارد ایجاد خواهیم کرد:

C:\>mkdir angular-project

به این دایرکتوری جدید بروید:

C:\>cd angular-project

در اعلان فرمان دستور زیر را وارد کنید تا VScode باز شود:

c:\>code

زمانی که VScode باز شد، ترمینال را درون IDE باز کنید. به این منظور یا کلیدهای ترکیبی '+Ctrl را در نوار ناوبری بزنید و یا به منوی Terminal > New Terminal بروید. در ترمینال دستور زیر را وارد کرده و شروع به نصب Angular CLI در پروژه خود بکنید:

C:\angular-project> npm install -g @angular/cli@9

پروژه انگولار 9

احتمالاً از شما خواسته می‌شود که داد‌ه‌های مصرف خود را به صورت گمنام با تیم انگولار بر اساس سیاست حریم خصوصی گوگل به اشتراک بگذارید. انتخاب این گزینه به شما بستگی دارد. برای اشتراک این داده‌ها، حرف Y را وارد کرده و اینتر را بزنید. در غیر این صورت N را بزنید.

پروژه انگولار 9

نکته: اگر تصادفاً گزینه اشتراک بی‌نام داده‌ها را انتخاب کردید و سپس پشیمان شدید، همواره می‌توانید این گزینه را با وارد کردن دستور زیر غیر فعال کنید:

C:\angular-project> ng analytics off

اکنون که Angular CLI نصب شده است، می‌توانیم شروع به ایجاد یک پروژه انگولار از رابط خط فرمان بکنیم.
ایجاد پروژه انگولار از CLI

برای ایجاد یک پروژه جدید باید از دستور ng new استفاده کنیم. این دستور یک اپلیکیشن جدید انگولار را ایجاد و مقداردهی می‌کند که پروژه پیش‌فرض برای فضای کاری جدید است. برای کسب اطلاعات بیشتر در این خصوص به مستندات رسمی انگولار (+) مراجعه کنید. در ترمینال وی‌اس‌کد دستور زیر را وارد کنید. در این دستور shell-project نام اپلیکیشن/پروژه‌ای است که می‌خواهیم ایجاد کنیم:

C:\angular-project> ng new shell-project

از شما سؤال می‌شود آیا می‌خواهید مسیریابی انگولار را نیز اضافه کنید؟ (Y/N) بسته به نیازتان ممکن است بخواهید آن را نصب کنید. مثلاً اگر می‌خواهید در اپلیکیشن خود از مسیریابی استفاده کنید، حتماً باید آن را نصب کنید. در این راهنما چنین قصدی نداریم و حرف N را وارد می‌کنیم:

پروژه انگولار 9

یک بار دیگر از ما خواسته می‌شود قالب استایل‌شیتی که در این پروژه استفاده می‌کنیم را از میان گزینه‌های ارائه شده انتخاب کنیم. با استفاده از کلیدهای جهت بالا و پایین می‌توانید انتخاب کنید. در این راهنما از گزینه نخست یعنی CSS استفاده می‌کنیم.

پروژه انگولار 9

فرایند نصب چند دقیقه طول می‌کشد و به محض پایان یافتن پیامی به صورت زیر دریافت می‌کنید که نشان‌دهنده موفقیت‌آمیز بودن نصب است:

√ Packages installed successfully.

پروژه انگولار 9

اکنون که پروژه ایجاد شده است، باید آن را در VSCode باز کنیم. در نوار منوی فوقانی VSCode به منوی File > Open Folder بروید و سپس در پوشه angular-project زیرپوشه shell-project را انتخاب کنید.

پروژه انگولار 9

Visual Studio Code پروژه انگولار را که هم اینک ایجاد کردید بارگذاری می‌کند. در تصویر زیر می‌بینید که ساختار فایل پروژه شما در پنل سمت چپ VScode نمایش یافته است.

پروژه انگولار 9

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

C:\angular-project\shell-project> ng serve --port 333 –o

در دستور فوق به انگولار اعلام می‌کنیم که کد را بیلد کرده و اپلیکیشن را در مرورگر پیش‌فرض در حالی که به پورت 333 گوش می‌دهد باز کند.

نکته: برای کسب اطلاعات بیشتر در خصوص دستور ng serve و گزینه‌های مختلفی که دارد به مستندات رسمی انگولار (+) مراجعه کنید.

پروژه انگولار 9

در تصویر زیر مرورگری را می‌بینید که یک اپلیکیشن انگولار که ایجاد کرده‌ایم را نمایش می‌دهد. این صفحه شامل اطلاعات پیش‌فرضی است که از سوی انگولار درون فایل app.component.html عرضه شده است و به احتمال زیاد می‌خواهید آن‌ها را با چیزی که مناسب شما است جایگزین کنید.

پروژه انگولار 9

بدین ترتیب موفق شدید نخستین پروژه انگولار خود را ایجاد کنید و اینک بر عهده شما است که هر اپلیکیشنی که دوست دارید را خلق نمایید.
آموزش شروع کار با Angular
دوره های مرتبط با این مقاله
دوره آموزشی Java
دوره آموزشی Java Spring
دوره آموزشی Android
آموزش انگولار
دوره آموزشی MVC پروژه محور همراه با Design Pattern
دوره آموزشی MVC Core With Angular 6

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

حال برای اجرای پر
در سال‌های اخیر فریمورک‌های بسیار زیادی برای زبان برنامه‌نویسی جاوااسکریپت توسعه داده شده و اغلب این فریمورک‌ها نیز توانسته‌اند خروجی‌های مناسبی از خودشان نشان دهند. یکی از این فریمورک‌ها Angular نام دارد که توسط گوگل توسعه داده شده و برای ایجاد Front-End با کارایی بالا و حرفه‌ای بسیار مناسب است. با استفاده از انگولار شما می‌توانید پروژه‌هایی با مقیاس بزرگ و سازمانی را به خوبی توسعه دهید و به همین دلیل از آن به عنوان یک فریمورک حرفه‌ای نام برده می‌شود.
معرفی انگولار

انگولار به عنوان یک پلتفرم و فریمورک برای ایجاد کردن وبسایت‌های SPA یا همان تک صفحه‌ای با استفاده از HTML و TypeScript شناخته می‌شود. معماری یک برنامه Angular به مفاهیم اساسی خاصی وابسته است.

Angular یکی از محبوب‌‌ترین‌ها و پرکاربردی‌ترین فریمورک‌های جاوااسکریپت محسوب می‌شود که از علاقه‌مندان بسیار زیادی در حوزه برنامه‌نویسی جاوااسکریپت بهرمند است. این فریمورک با TypeScript نوشته شده و این بدان معنی است که اگر شما مایل به یادگیری انگولار هستید نیاز دارید در قدم اول TypeScript را یاد بگیرید.

انگولار چیست؟

انگولار یک فریمورک‌ برای ایجاد Front-End وبسایت است که شامل تعداد زیادی کتابخانه جاوااسکریپتی می‌شود، این کتابخانه‌ها ممکن است توسط هزاران نفر توسعه داده شده باشند، در نهایت این کتابخانه‌ها در قالب یک فریمورک جمع آوری شده‌اند تا شما بتوانید با استفاده از آن وبسایت‌های مد نظر خود را شکل دهید.

فریمورک چیست؟

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

انگولار یک فریمورک متن-باز است که به وسیله گوگل نگهداری و توسعه داده می‌شود، این کتابخانه به شما کمک می‌کند تا بتوانید وبسایت ‌های SPA را به سادگی ساخته و مدیریت کنید و همچنین کدهای ساختارمندتر و قابل مدیریت ساده‌تری داشته باشید.

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

    انگولار یک فریمورک ساختاری بر مبنای الگوی MVC است.
    انگولار  یک DOM مجازی ایجاد می‌کند که سرعت لود اطلاعات از جاوااسکریپت در HTML را بسیار بالا می‌ورد.
    با توجه به داشتن ساختار مشخص مورد استفاده شرکت‌های با تیم‌های بزرگ قرار میگیرد.
    شما می‌توانید به سادگی در انگولار unit تست بنویسید و از این جهت انگولار انتخاب بسیار مناسبی است.
    دارای پشتیبانی قوی از طرف گوگل و توسعه‌دهندگان جهانی است.
    قابلیت‌هایی از قبیل تزریق وابستگی، مسیریابی، انیمیشن، کپسوله‌سازی نما و موارد دیگر به شکل پیش فرض در انگولار وجود دارد
    انگولار یک فریمورک یکپارچه و ساختارمند برای ساخت وبسایت‌های SPA است.
    و...

پیش نیاز‌های یادگیری Angular

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

در صورتی که درک درستی از جاوااسکریپت و بعد تایپ اسکریپت ندارید شروع به یادگیری انگولار نکنید چون بعد از گذشت مقداری از پروسه یادگیری، دلسرد خواهید شد و قطعا از یادگیری انگولار صرفه نظر خواهید کرد.
سرفصل‌ها‌ی دوره آموزش انگولار

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

نصب و راه‌اندازی

ابتدایی‌ترین بخش کار با انگولار و یادگیری انگولار نصب و راه‌اندازی کردن پروژه‌ای بر اساس انگولار است که ما در این بخش به شکل مفصل موارد مورد نیاز برای راه‌اندازی پروژه را به شما آموزش خواهیم داد.

آشنایی با موارد پایه

در این بخش از آموزش انگولار مسائلی مثل انگولار چیست ؟ کامونتت‌ چیست ؟ appMoudule چیست ؟‌ و موارد دیگری که از مباحث پایه‌ انگولار هستند را توضیح خواهیم داد.

ارتباطات در کامپونِنت‌ها

کامونتت‌ها در انگولار قادر به صحبت با هم هستند، شما می‌توانید بین کامپونِنت‌های مختلف در یک پروژه انگولار اطلاعاتی را از پدر به فرزند یا برعکس از فرزند به پدر منتقل کنید.

کار با directive

directive دقیقا مانند attrbiute در HTML عمل میکند، در نظر بگیرید شما بتوانید برای المنت‌های HTML یک سری خصوصیات ایجاد کنید که این خصوصیات اقدامی را بر روی المنت مورد نظر در صفحه انجام می‌دهد.

چرخه‌زندگی

انگولار دارای سیستمی با عنوان چرخه‌ زندگی است که به شما اجازه می‌دهد در برخی از مراحل اجرای یک کامپوننت‌ اقدامی را انجام دهید.

برای مثال در زمان ایجاد یک کامپونِنت درخواست http به api خود بفرستید یا در صورت آپدیت شدن یک مقدار در کامپونِنت اطلاعاتی را در جای ذخیره کنید.

در این بخش شما را با متد‌های مختلف چرخه زندگی در انگولار آشنا میکنم. یادگیری درست و کاربردی چرخه‌زندگی در یادگیری و استفاده آسان‌تر Angular بسیار کاربردی است.

پروژه todo

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

آشنایی با سرویس‌ها

سرویس ها در انگولار

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

کار با فرم‌ها

ماژولِ فرم در انگولار می‌تواند به ما در ایجاد و مدیریت بهتر فرم‌ها کمک کند در این بخش به شکل مفصل و کاربردی، فرم‌ها در انگولار را به شما آموزش خواهم داد.

و...

بخش‌های بیشتر دیگری در این دوره وجود دارد که پیشنهاد میکنیم کمی به پایین اسکرول کنید تا بتوانید به شکل کامل با بخش‌های و قسمت‌های آن به شکل کامل آشنا شوید.
سوالات متداول
?
پیش‌نیاز‌های یادگیری انگولار؟
?
ورژن انگولار دوره چیست؟
?
تا چه سطحی با آنگولار آشنا می‌شویم؟
?
چقدر طول می‌کشد انگولار یاد بگیرم؟
?
انگولار برای چه پروژه‌هایی مفید است؟
گارانتی بازگشت وجه

برای آنکه به شما اطمینان دهیم، که ما از محتوای دوره‌های خود ۱۰۰ درصد مطمئن هستیم، برای این دوره گارانتی بازگشت وجه قرار داده‌ایم و این به این معنی است که اگر شما محتوای این دوره را به شکل کامل مشاهده کنید، اما نتیجه‌ای که به شما قول دادیم را دریافت نکنید ۱۰۰ درصد مبلغ پرداختی شما را برگشت خواهیم زد.
مراحل و فرایند گارانتی
جلسات دوره
بخش اول قدم ابتدایی
بخش دوم نصب و راه‌اندازی
بخش سوم آشنایی با موارد پایه
بخش چهارم ارتباطات در کامپونِنت‌ها
بخش پنجم کار با directive ها
بخش ششم چرخه‌زندگی
بخش هفتم پروژه todo
بخش هشتم آشنایی با سرویس‌ها
بخش نهم سیستم‌ روت‌ها
بخش دهم آشنایی با Observable
بخش یازدهم درخواست HTTP وآموزش Angular 6
مباحث پایه Angular 6

    انگولار 6 - مقدمه
    انگولار 6 - معرفی
    انگولار 6 - نصب محیط
    انگولار 6 - ایجاد پروژه جدید
    انگولار 6 - کامپوننت ها (Components)
    انگولار 6 - ماژول ها (Module)
    انگولار 6 - اتصال داده (Data Binding)
    انگولار 6 - اتصال رویداد (Event Binding)
    انگولار 6 - قالب ها (Templates)
    انگولار 6 - دستورالعمل ها (Directives)
    انگولار 6 - Pipes ها
    انگولار 6 - مسیریابی (Routing)
    انگولار 6 - سرویس ها (Services)
    انگولار 6 - Http Client
    انگولار 6 - فرم ها (Forms)
    انگولار 6 - انیمیشن (Animations)
    انگولار 6 - متریال (Materials)
    انگولار 6 - CLIتبدیل شدن به یک توسعه دهنده Angular
با یادگیری نحوه ایجاد برنامه های وب قوی با استفاده از چارچوب Angular ، مهارت های برنامه نویسی موجود خود را پیش ببرید. بیاموزید که چگونه از معماری جدید مبتنی بر جزء برای ایجاد برنامه های کارآمد و بین پلتفرم استفاده کنید. نحوه استفاده از ساختارها ، الگوها ، تشخیص تغییر ، اتصال داده ها و موارد دیگر را مشاهده کنید.

Explore Web Development with Angular
Take your existing programming skills forward by learning how to build robust web apps using the Angular framework. Learn how to leverage the new component-based architecture to create efficient, cross-platform apps. See how to use structures, templates, change detection, data binding, and more.
مدت زمان:۱۵ ساعت ۵۷ دقیقه
تعداد دوره ها: ۷
قیمت: ۲۳۴,۴۰۰ تومان(۳۳۵,۰۰۰ تومان)
تعداد مدرسین: ۶

دوره آموزشی یادگیری جامع انگولار (2019)
عکس مدرس Justin Schwartzenberger

Justin Schwartzenberger
دوره آموزشی یادگیری جامع انگولار (2019)
Angular Essential Training (2019)

Angular توسط Google طراحی شده است تا چالش هایی را که برنامه نویسان با ساختن برنامه های پیچیده و تک صفحه ای مواجه هستند، برطرف کند. این پلت فرم جاوا اسکریپت یک هسته محکم از قابلیت های وب را ارائه می دهد و به شما امکان می دهد از جزئیات طراحی و پیاده سازی مراقبت کنید. در این دوره، جاستین شوارتزنبرگر شما را با موارد ضروری این پلتفرم "ابرقهرمانی" آشنا می کند، از جمله ویژگی های قدرتمندی مانند اتصال داده های دو طرفه، مسیریابی جامع و تزریق وابستگی. جاستین در پلتفرم یک به یک قدم می گذارد و بر معماری اجزای Angular تمرکز می کند. بدانید Angular چیست و چه کاری می تواند انجام دهد، زیرا جاستین از ابتدا تا انتها یک برنامه وب کامل و کامل ایجاد می کند. پس از تسلط بر موارد ضروری، می توانید سایر دوره های پروژه محور را در کتابخانه ما گذرانده و برنامه Angular خود را ایجاد کنید. اهداف یادگیری Angular چیست؟ کار با اجزاء وقایع و خواص الزام آور انتقال داده ها به اجزاء استفاده از دستورالعمل ها و لوله ها ایجاد فرم های زاویه ای اعتبار داده های فرم تزریق وابستگی چگونه Angular انجام می شود برقراری تماس HTTP مسیریابی اجزای یک ظاهر طراحی شده
سطح دوره
متوسط
تاریخ انتشار
2019-06-13
آخرین بروزرسانی
ندارد
دوره آموزشی یادگیری انگولار CLI
عکس مدرس Victor Mejia

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

Victor Mejia
دوره آموزشی یادگیری انگولار CLI
Learning the Angular CLI

رابط خط فرمان (Angular (CLI ابزار پیشنهادی برای ساخت و نگهداری برنامه‌های Angular است. درک آنچه که فراهم می‌کند - و چگونگی استفاده حداکثری از ویژگی‌های آن - می‌تواند شما را برای حداکثر بهره وری توسعه با Angular آماده کند. در این دوره، بیاموزید که چگونه Angular CLI نه تنها در ایجاد پروژه‌های جدید Angular کمک می‌کند، بلکه همچنین از نحوه کار و آزمایش کار در برنامه استفاده می‌کند. مربی Victor Mejia ایجاد پروژه‌های جدید، سفارشی‌سازی سرور توسعه، تولید کد برنامه Angular، اجرای تست‌ها و موارد دیگر را پوشش می‌دهد. بعلاوه، او سناریوهای واقعی را به اشتراک می‌گذارد که می‌تواند به شما کمک کند درک عملی‌تری از نحوه استفاده از CLI را به دست آورید. با پایان این دوره، شما دانش لازم برای استفاده از Angular CLI را به عنوان ابزاری اصلی در گردش کار توسعه برنامه Angular خواهید داشت.
سطح دوره
متوسط
تاریخ انتشار
2021-01-08
آخرین بروزرسانی
ندارد
دوره آموزشی تست و اشکال زدایی در انگولار
عکس مدرس Derek Peruo

Derek Peruo
دوره آموزشی تست و اشکال زدایی در انگولار
Angular: Testing and Debugging

خطاهایی که به دلیل وابستگی از دست رفته، متغیرهای تعریف نشده یا داده ها با قالب ضعیف ایجاد نشده است، می توانند باعث توقف کار برنامه وب شما شوند. در این دوره، نحوه ردیابی و از بین بردن این نوع خطاها را در برنامه های Angular خود از طریق فرآیند تست و اشکال زدایی، بیاموزید. مربی درک پرو پیام های خطای متداول را خراب می کند و گزینه های مختلف تست و اشکال زدایی را مرور می کند. وی همچنین شامل پوشه بندی کد، نکات و ترفندهایی برای جلوگیری از مشکلات حین توسعه را به اشتراک می گذارد و به نوشتن برنامه های کنترل کننده خطاهای سفارشی می پردازد تا کار با خطاها با رشد برنامه شما آسان تر شود.
سطح دوره
متوسط
تاریخ انتشار
2021-04-30
آخرین بروزرسانی
2023-11-29
دوره آموزشی ساخت و میزبانی یک سایت Full-Stack با انگولار
عکس مدرس Shaun Wassell

Shaun Wassell
دوره آموزشی ساخت و میزبانی یک سایت Full-Stack با انگولار
Angular: Creating and Hosting a Full-Stack Site

شما Angular را یاد گرفت‌ه‌اید و می‌توانید رابط‌های front-end شگفت انگیزی ایجاد کنید - اما استقرار آنها به مواردی غیر از انگولار نیاز دارد. شما به منطق موجود در سرور و مکانی برای قرار دادن این منطق نیاز دارید. اگر می‌خواهید مهارت‌های Angular خود را در طیف گسترده‌تری از پروژه‌ها اعمال کنید - اما با توسعه سمت سرور خیلی آشنا نیستید - پس این دوره برای شما مناسب است. به Shaun Wassell، به مربی خود بپیوندید و او مراحل ساخت یک وب سایت full-stack و برمبنای Angular را از ابتدا شروع می‌کند. او نشان می‌دهد که چگونه می‌توان با استفاده از hapi بخش front-end Angular ایجاد کرد و back-end را در Node.js نوشت. او سپس نشان می‌دهد که چگونه MySQL را به back-end خود اضافه کنید، front-and و back-end را متصل کنید، تأیید اعتبار Firebase را به پروژه خود اضافه کنید و برنامه full-stack خود را به ابر منتقل کنید.
سطح دوره
متوسط
تاریخ انتشار
2020-08-21
آخرین بروزرسانی
ندارد
دوره آموزشی انگولار: برنامه های ابری با Firebase
عکس مدرس Victor Mejia

Victor Mejia
دوره آموزشی انگولار: برنامه های ابری با Firebase
Angular: Cloud-Powered Apps with Firebase

آیا می خواهید یاد بگیرید که چگونه به سرعت برنامه ها را بدون مدیریت زیرساخت بسازید؟ Firebase به شما این امکان را می دهد که دقیقاً این کار را انجام دهید. Firebase که توسط Google Cloud Platform پشتیبانی می‌شود و توسط برخی از بزرگترین برنامه‌های امروزی استفاده می‌شود، مجموعه‌ای از ابزارها برای ایجاد و مقیاس‌بندی برنامه‌های کاربردی وب است. در این دوره، به ویکتور مجیا بپیوندید تا مراحل ساخت اپلیکیشن های قدرتمند با Firebase را طی کند. برای شروع، او نگاهی به کنسول Firebase می اندازد و نشان می دهد که چگونه می توانید پروژه های مختلف Firebase را مدیریت کنید. سپس، نحوه استفاده از FirebaseAuth برای افزودن احراز هویت به برنامه شما را پوشش می دهد. ذخیره و همگام سازی داده ها با Firebase Cloud Firestore. و برنامه خود را با استفاده از میزبانی Firebase اجرا کنید. به علاوه، یاد بگیرید که چگونه با استفاده از توابع ابری Firebase، عملکردهای بدون سرور خود را ایجاد کنید. اهداف یادگیری فعال کردن احراز هویت در کنسول Firebase ذخیره و همگام سازی داده ها با Firebase Cloud Firestore نمایش داده های کاربر قوانین امنیتی Firebase Cloud Storage کنترل دسترسی با ادعاهای سفارشی و قوانین امنیتی استفاده از Firebase CLI برای استقرار برنامه خود استفاده از توابع ابری
سطح دوره
متوسط
تاریخ انتشار
2019-11-15
آخرین بروزرسانی
ندارد
دوره آموزشی ارتباطات WebSocket با Node و Angular
عکس مدرس Patrick Siewe

Patrick Siewe
دوره آموزشی ارتباطات WebSocket با Node و Angular
WebSocket Communications with Node and Angular

اگر با یک صفحه وب مواجه شدید که در زمان واقعی به روز می شود، احتمالاً WebSocket را در محل کار می بینید. برخلاف پروتکل درخواست و پاسخ HTTP، WebSocket امکان برقراری ارتباط دوطرفه و بلادرنگ را فراهم می‌کند و یادگیری نحوه استفاده از آن به شما کمک می‌کند نرم‌افزار مفیدتر و جذاب‌تری توسعه دهید. در این دوره آموزشی، Patrick Siewe به شما می آموزد که WebSocket چیست و چه کاری می تواند انجام دهد، با راهنمایی شما در ایجاد یک برنامه برای چت زنده از انتها به انتها. ابتدا، او شما را در ساخت سرور باطن در NodeJS، کدگذاری شده با TypeScript راهنمایی می کند. سپس، نحوه ساخت قسمت جلویی را به عنوان یک برنامه Angular بسیار ساده، که در TypeScript نیز کدگذاری شده است، نشان می دهد. از آنجایی که همه چیز در اطراف ما بیشتر به هم متصل و تعاملی می شود، مهارت در WebSocket فقط می تواند شما را برای کارفرمایان فعلی یا آینده قابل فروش تر و ارزشمندتر کند، بنابراین در این دوره آموزشی با پاتریک همراه باشید تا با تسلط بر WebSocket شروع کنید.
سطح دوره
پیشرفته
تاریخ انتشار
2022-03-11
آخرین بروزرسانی
ندارد
دوره آموزشی انگولار: حفظ برنامه ها
عکس مدرس Emmanuel Henri

Emmanuel Henri
دوره آموزشی انگولار: حفظ برنامه ها
Angular: Maintaining Applications

بیشتر برنامه ها با گذشت زمان رشد می کنند و تغییر می کنند. چالش توسعه دهندگان این است که مطمئن شوند پروژه های آنها با چارچوب ها و استانداردهای امنیتی در حال پیشرفت همگام هستند. این دوره به شما نشان می دهد که چگونه برنامه های Angular خود را حفظ کرده و آنها را برای رشد آماده کنید. مربی امانوئل هنری مسیر ارتقاء از Angular 2 به Angular 4 را مرور می کند و بهترین شیوه ها را برای کمک به مقیاس برنامه شما برای رشد ارگانیک، ادغام پروژه ها و چارچوب های دیگ
انجام پروژه های angular js

ژوئن 13, 2023 , admin    , بدون دیدگاه   

انجام پروژه های angular js گروه طراحی وب ای زد سافت آماده طراحی سایت وکدنویسی شما با فریم ورک angular js می باشد،با توجه سابقه چندین ساله ای زد سافت در زمینه طراحی سایت وقالب…

خواندن نوشته →
ه های Angular 8 به همراه مفاهیم و معماری انگولار را با یک مثال عملی یاد خواهید گرفت. مثال عملی که در این آموزش انجام خواهیم داد یک ماشین حساب ساده است که در سمت FrontEnd توسط انگولار 8، نمایش داده و اجرا می شود. کدهای این پروژه را می توانید از آدرس زیر دانلود و استفاده کنید:

    کدهای این آموزش در آدرس زیر قابل مشاهده و دانلود است
    https://github.com/MohammadMoeinFazeli/Angular8-FirstProjectCalculator

این آموزش به دلیل طولانی شدن در دو بخش خدمتتان ارائه می شود. در انتهای این پست می توانید لینک مطالعه بخش دوم را نیز مشاهده کنید.

برای شروع به کار و ایجاد یک پروژه ی Angular 8 باید ملزومات زیر نیاز دارید:

1- شما باید دانش مقدماتی در مورد TypeScript، HTML و CSS داشته باشید.

2- لطفا نسخه 10.9.0 یا بالاتر node js را از سایت nodejs.org برای سیستم عامل خود دانلود و نصب کنید. همراه با node js مدیریت کننده ی بسته های JavaScript یعنی npm نیز روی سیستم شما نصب خواهد شد.

3- لطفا رابط کاربری خط فرمان انگولار یعنی Angular CLI را با اجرای دستور زیر در ترمینال نصب کنید:
1
    
npm install -g @angular/cli
ایجاد پروژه ی جدید Angular 8

با اجرای کد زیر در خط فرمان (ترمینال)، برنامه ی جدیدی با انگولار 8، به کمک Angular CLI ایجاد کنید. نام این برنامه ngcalculator خواهد بود:
1
    
ng new ngcalculator

اگر از شما در مورد افزودن قابلیت routing سوال کرد عبارت n را در پاسخ وارد کنید و کلید Enter را فشار دهید (زیرا ما در این پروژه مقدماتی نیازی به قابلیت routing نداریم). سپس در هنگامی که از شما در مورد فرمت استایل دهی سوال کرد، CSS را انتخاب کنید.

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

اکنون برای اجرای این پروژه کافی است وارد پوشه ی پروژه شده و دستور اجرای برنامه انگولار را بزنید. برای این کارها دستورات زیر را در ترمینال اجرا کنید:
1
2
    
cd ./ngcalculator
ng serve
Moduleها و Componentها در Angular

انگولار از معماری مبتنی بر Module و مبتنی بر Component استفاده می کند. Module به یک بخش مهم و ویژگی اصلی در برنامه شما گفته می شود. پروژه های انگولار از چندین Module ایجاد می شوند. هر Module مجموعه ای Componentsها است. Component در عمل بخشی از صفحه ی سایت شما را کنترل می کند. هر پروژه ی Angular به صورت قرارداد از یک ماژول اصلی به نام AppModule و یک Component اصلی به نام AppComponent تشکیل شده است و به مرور ماژول ها و Component جدیدی را ما به آن اضافه می کنیم. این Module و Component اصلی در هنگام اجرای پروژه توسط Angular راه اندازی می شوند و مدخل آغازین برنامه ی ما هستند (این تنظیمات در فایل main.js قرار دارد که البته ما تقریبا هیچ وقت نیازی به تغییر آن نداریم).

ما برای این پروژه ساده از همان Module اصلی استفاده می کنیم و ماژول دیگری نیاز نداریم ولی یک کامپوننت جدید به نام calculator برای برنامه ی خود ایجاد می کنیم. بدین منظور دستور زیر را در ترمینال اجرا کنید:
1
    
ng generate component calculator --skipTests

پارامتر skipTests– به Angular CLI دستور می دهد که فایل های مربوط به Test را برای این Component ایجاد نکند.

دستور فوق یک پوشه ی جدید در مسیر src/app/calculator ایجاد می کند که حاوی فایل های مختلف کامپوننت ما است. این فایل ها عبارتند از:

1- src/app/calculator/calculator.component.css که برای استایل دهی CSS استفاده می شود.

2- src/app/calculator/calculator.component.html که قالب HTML کامپوننت ما است.

3- src/app/calculator/calculator.component.ts که منطق و کدهای typescript کامپوننت ما در آن قرار می گیرد.

اگر فایل src/app/calculator/calculator.component.ts با کدهای زیر روبرو می شوید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

کلاس کامپوننت ما که CalculatorComponent نام دارد به واسطه ی بخش بند ()Component@ تبدیل به یک کامپوننت انگولار شده است. اطلاعات زیر در این بخش بند وجود دارد که برای تعریف یک component در انگولار مهم هستند:

1- selector که یک tag name یا نام المان HTML به این کامپوننت نسبت می دهد و از این پس ما می توانیم این component را با استفاده از این نام همانند سایر المان های رایج HTML در بخش های مختلف برنامه ی خود استفاده کنیم.

2- templateUrl که آدرس قالب HTML این کامپوننت در آن قرار می گیرد.

3- styleUrls که یک یا چند فایل استایل برای این کامپوننت درون آن تعریف می شود.

از آنجایی که ما از قابلیت routing در پروژه ی خود استفاده نکردیم باید به نحوی کامپوننت Calculator خود را در کامپوننت اصلی قرار دهیم تا در خروجی برنامه نشان داده شود. برای این کار از همان tag name مربوط به کامپوننت Calculator یعنی app-calculator استفاده می کنیم و آن را در template کامپوننت اصلی قرار می دهیم. برای این کار کافی است کل محتوای فایل src/app/app.component.html را پاک کرده و فقط کد زیر را درون آن قرار دهید:
1
    
<app-calculator></app-calculator>
ایجاد ظاهر ماشین حساب

فایل src/app/calculator/calculator.component.html را باز کنید و کدهای html زیر را درون آن کپی کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    
<div class="calculator">
 
  <input type="text" class="calculator-screen" value="0" disabled />
 
  <div class="calculator-keys">
 
    <button type="button" class="operator" value="+">+</button>
    <button type="button" class="operator" value="-">-</button>
    <button type="button" class="operator" value="*">×</button>
    <button type="button" class="operator" value="/">÷</button>
 
    <button type="button" value="7">7</button>
    <button type="button" value="8">8</button>
    <button type="button" value="9">9</button>
 
 
    <button type="button" value="4">4</button>
    <button type="button" value="5">5</button>
    <button type="button" value="6">6</button>
 
 
    <button type="button" value="1">1</button>
    <button type="button" value="2">2</button>
    <button type="button" value="3">3</button>
 
 
    <button type="button" value="0">0</button>
    <button type="button" class="decimal" value=".">.</button>
    <button type="button" class="all-clear" value="all-clear">AC</button>
 
    <button type="button" class="equal-sign" value="=">=</button>
 
  </div>
</div>

سپس فایل src/app/calculator/calculator.component.css را باز کنید و کدهای استایل زیر را درون آن قرار دهید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
    
.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
  }
   
  .calculator-screen {
    width: 100%;
    font-size: 5rem;
    height: 80px;
    border: none;
    background-color: #252525;
    color: #fff;
    text-align: right;
    padding-right: 20px;
    padding-left: 10px;
  }
  

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

  button {
    height: 60px;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #c4c4c4;
    background-color: transparent;
    font-size: 2rem;
    color: #333;
    background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
    text-shadow: 0 1px rgba(255,255,255,.4);
  }
   
  button:hover {
    background-color: #eaeaea;
  }
   
  .operator {
    color: #337cac;
  }
   
  .all-clear {
    background-color: #f0595f;
    border-color: #b0353a;
    color: #fff;
  }
   
  .all-clear:hover {
    background-color: #f17377;
  }
   
  .equal-sign {
    background-color: #2e86c0;
    border-color: #337cac;
    color: #fff;
    height: 100%;
    grid-area: 2 / 4 / 6 / 5;
  }
   
  .equal-sign:hover {
    background-color: #4e9ed4;
  }
   
  .calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    padding: 20px;
  }

همچنین استایل های زیر را به صورت سراسری در برنامه ی انگولار خود قرار دهید. بدین منظور فایل src/styles.css را باز کرده و کدهای زیر را درون آن کپی کنید:
1
2
3
4
5
6
7
8
9
10
    
html {
    font-size: 62.5%;
    box-sizing: border-box;
  }
 
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

بسیار عالی. اکنون در صورت اجرای پروژه با دستور ng serve ظاهر برنامه ی شما همانند تصویر زیر خواهد بود که البته هیچ عمل خاصی انجام نمی دهد چون ما هیچ منطقی به برنامه ی خود اضافه نکردیم.

کار شما تا اینجا بسیار عالی بود. به دلیل طولانی نشدن آموزش، ادامه این آموزش را در پست زیر قرار می دهیم. برای مطالعه ی بخش دوم این آموزش از لینک زیر استفاده کنید
سرفصل های دوره
۱۴ فصل
۱۰۵ جلسه
۳۲ ساعت
۱
فصل اول – Api Basic Create Project
۷ قسمت
۰۱:۳۳:۱۰
۱

1-Create Layers Backend
رایگان
۱۱:۰۴
۲

2-Relations Layers
رایگان
۱۰:۵۶
۳

3-Add product With Context
رایگان
۱۶:۱۲
۴

4- Add Base Entities
۱۲:۴۱
۵

5-Configuration Entities
۱۴:۳۱
۶

6-Auto migrations-Seed Data
۱۳:۵۱
۷

7-Service Provider
۱۳:۵۵
۲
فصل دوم – Generic Repository
۱۲ قسمت
۰۳:۲۲:۳۲

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

۳
فصل سوم – Api Error Handling
۴ قسمت
۰۰:۵۸:۴۵
۴
فصل چهارم – Pagination Sorting Filtering
۵ قسمت
۰۱:۱۶:۴۷
۵
فصل پنجم – Angular Setup
۱۷ قسمت
۰۴:۳۸:۵۸
۶
فصل ششم – Error-Breadcrumb-Loading
۳ قسمت
۰۱:۱۰:۴۹
۷
فصل هفتم – Api Basket
۴ قسمت
۰۱:۰۴:۲۴
۸
فصل هشتم – Client Basket
۹ قسمت
۰۲:۲۰:۲۷
۹
فصل نهم – Identity
۱۱ قسمت
۰۳:۳۱:۱۵
۱۰
فصل دهم – Client Identity
۹ قسمت
۰۲:۲۰:۱۸
۱۱
فصل یازدهم – Order API
۷ قسمت
۰۲:۴۰:۴۳
۱۲
فصل دوازدهم – Order Client
۸ قسمت
۰۳:۴۳:۰۷
۱۳
فصل سیزدهم – Client Profile
۸ قسمت
۰۲:۱۲:۰۹
۱۴
فصل چهاردهم – Admin Profile
۱ قسمت
۰۰:۲۰:۴۵

قصد داریم در این دوره به آموزش طراحی فروشگاه اینترنتی با ASP.NET WEB API & ANGULAR بپردازیم به این نحو که Frontend Angular & Backend Web API میباشد. این دوره در زمینه برنامه نویسی وب و توسعه و دات نت می باشد. در واقع دوره ای که پیش روی شما قرار دارد ، به عنوان یک دوره جامع آموزش نحوه ساخت یک برنامه فروشگاهی به کمک دات نت کور و انگولار می باشد. در واقع این دوره بر خلاف دوره های مشابه تماما بر پایه پروژه واقعی بنا شده و شما مهارت هایی که در این دوره یاد می گیرید را می توانید به خوبی در کارهای خود از آن ها استفاده نمایید.

در این دوره از الگوی Clean Architecture از Mr. Taylor استفاده شده است که با هم با مباحث نظیر CQRS , Fluent Validators آشنا خواهیم شد

این آموزش دارای سه بخش میباشد ابتدا یک Backend را خواهیم داشت که کاملا مستقل میباشد و بخش Client را خواهیم داشت که بر پایه Angular ساخته شده است و در نهایت بخش Admin را داریم که از از قابل Metronic استفاده خواهیم نموده هر سه پروژه به صورت کاملا مستقل و جدا می باشد .
مطالب آموزش طراحی فروشگاه اینترنتی با ASP.NET WEB API & ANGULAR

    یادگیری و آشنایی با مفاهیم WEB API
    آشنایی با CQRS
    استفاده از الگوی Clean Architecture از Mr. Taylor
    آشنایی با JWT و نحوه استفاده از Token
    آشنایی با Generic repository , Unit Of Work و آشنایی با الگوی Specification Pattern که بسیار پر کاربرد میباشد
    آشنایی با Fluent Validators
    آشنایی با درگاه پرداخت زرین پال
    آشنایی با Raise کردن event ها در CQRS
    آشنایی با TDD (Test Driven Domain) و نحوه نوشتن Clean Code و نحوه نوشتن Testable Code
    آشنایی با Angular Material و Angular Bootstrap و PrimeNG
    آشنایی با Docker – Docker-Compose
    آشنایی با Resharper و نحوه استفاده از آن برای نوشتن کد سریع
    آشنایی و درک مبانی و اصول کار با Angular 14
    آشنایی با RXJS
    درک پایگاه های داده و آشنایی با مفاهیمی نظیر Cache و آشنایی با Redis , Postgres , SQL Server
    یادگیری نحوه استفاده از Automapper و بوت استرپ
    آشنایی با نوشتن Seed Data و Auto migrations
    استفاده از قالب Meronic برای پنل ادمین
    آشنایی با Git , GitHub در حین پروژه و آشنایی با Pull Request و نحوه کار با GitHub و نحوه نوشتن Board در GitHub

سرفصل‌های آموزش طراحی فروشگاه اینترنتی با ANGULAR

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

    API Basic
    API Architecture
    API Generic Repository
    Error Handling
    Paging – Filtering – Sorting
    Angular Setup
    Error Handling In Angular
    Breadcrumb and Loading
    Basket
    Identity
    Angular Identity
    Orders
    Checkout
    Order Module in Angular

بازار کار آموزش طراحی فروشگاه اینترنتی با ANGULAR

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

این دوره کاملا حرفه ای و پیشرفته می باشد و مهم ترین مباحث روز برنامه نویسی در آن مورد بررسی قرار می گیرد.
پیش نیازهای آموزش طراحی فروشگاه اینترنتی با ANGULAR و ASP.NET WEB API

در این آموزش فقط کافی است شما با Angular و Web Api و Docker کمی اشنایی داشته باشید

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

اگر با Docker اشنایی ندارید میتوانید از این لینک استفاده نموده و دوره Docker بنده را تهیهانگولار چیست؟ آشنایی با کاربردهای Angular

    توسینسو
    سئو ، طراحی و توسعه وب
    انگولار چیست؟ آشنایی با کاربردهای Angular

به زبان ساده ، Angular یک پلتفورم توسعه متن باز ، مبتنی بر زبان TypeScript می باشد. با استفاده از این پلتفورم امکان طراحی و توسعه ی Single Page Application ها بصورت فردی یا گروهی فراهم می گردد.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
برای مشاهده تخفیف های ویژه امروز کلیک کنید
سرفصل های این مطلب

    انگولار چیست ؟
    منظور از SPA در انگولار چیست ؟
    اجزاء تشکیل دهنده انگولار چیست؟
        ماژول ها (Modules)
        Components
        قالب ها (Templates)
        Metadata
        سرویس ها (Services)
        تزریق وابستگی (Dependency Injection)
    مزایا و معایت انگولار چیست؟
        مزایای Angular
        معایب Angular
    تفاوت ری اکت با انگولار چیست؟
        آیا انگیولار محبوب است؟
        سرعت و علمکرد
        اتصال داده ها (Data Binding)
        کیفیت کدنویسی و نگهداری سیستم
        تست کردن سیستم
        پیچیدگی یادگیری فریم ورک ها

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

انگولار چیست ؟

بدلیل محدودیت هایی که در فریم ورک AngularJS وجود داشت ، در سپتامبر 2016 گوگل تصمیم گرفت تا یک باز طراحی کامل بروی فریم ورک محبوب خودش  یعنی AngularJS داشته باشد و این پلتفورم رو با نام Angular ارائه بدهد.
منظور از SPA در انگولار چیست ؟

SPA ، به وب سایت هایی گفته می شود که بر اساس تعامل با کاربر ، اطلاعات را از وب سرور دریافت کرده و در بدون بارگذاری مجدد صفحه ، اطلاعات را در صفحه ی فعلی نمایش میدهد و عملکرد سیستم مشابه یک برنامه می باشد.

به زبان ساده تر ، ما بارگذاری مجدد صفحه را نداریم و اطلاعات مورد نیاز مثل HTML ، CSS و کدهای JavaScript یا در اولین درخواست یا بصورت داینامیک براساس درخواست کاربر دریافت شده و نمایش داده می شوند.

معماری Angular مبتنی بر الگوی MVC می باشد و امکان جریان داشتن داده ها به شکل دو طرفه بین DOM و کد را فراهم می کند .

در ادامه به بررسی اجزاء اصلی تشکیل دهنده ی این پلتفورم می پردازیم.
اجزاء تشکیل دهنده انگولار چیست؟

در این بخش به مهمترین اجزای تشکیل دهنده انگولار پرداخته و با کاربرد های هر یک از آن ها به صورت خلاصه آشنا خواهیم شد.
ماژول ها (Modules)

هر برنامه ی Angular یک ماژول اصلی با نام AppModule را شامل می شود که دستورالعمل های مورد نیاز جهت اجرای پروژه را شامل می شود .
Components

بطور ساده ، هر Component در برنامه ی Angular ، در قالب یک کلاس تعریف می شود که داده ها و منطق مرتبط با آن Component را در خود نگه داری می کند. بطور عمومی ، یک Component ، مشخص کننده بخشی از UI سیستم می باشد. (مثلا میتوان Componentیی با نام Messages داشت که کار آن نمایش پیام های شخصی کاربر باشد و تمام منطق و ارتباطات مربوط به این بخش در داخل این Component قرار میگیرد)
قالب ها (Templates)

قالب Angular ، با ترکیب مارک آپ های Angular و  Html ، امکان تغییر در اِلِمانهای HTML را قبل از نمایش به کاربر ، برای ما فراهم می کند . بطور کلی دو مدل اتصال داده (Data Binding) در پلتفورم Angular وجود دارد:

    اتصال رویداد (Event Binding): در این نوع اتصال ، امکان پاسخ گویی به ورودی های کاربر برای برنامه فراهم می شود تا متناسب با عملکرد کاربر اتفاقی رقم بخورد . برای مثال ، اگر کاربر بروی یک دکمه کلیک کند ، یک دیالوگ نمایش داده شود ، یا وقتی کاربر اشاره گر موس را داخل یک کادر می آورد ، رنگ آن کادر عوض شود  و ...
    اتصال مشخصه (Property Binding): در این نوع اتصال ، این امکان فراهم می شود تا داده های موجود در برنامه از طریق کدهای HTML مشاهده یا تغییر داده شوند . برای مثال اگر ما یک پراپرتی با نام Username داشته باشیم ، می توانیم امکانی را فراهم کنیم تا کاربر در یک کادر متنی ، نام کاربری مورد نظرش را بنویسد و این ثبت داده توسط کاربر در پراپرتی ما ، بصورت خودکار قرار میگیرد .

Metadata

چگونگی پردازش کلاس ها توسط Angular از طریق متادیتا ها اطلاع رسانی می شود . از طریق Decorate کردن یک کلاس با استفاده از Metadata ها می توانیم به Angular بگوییم که چه انتظاری از کلاس مورد نظر داریم. برای مثال کلاس مورد نظر یک Component هست یا یک Directive یا یک سرویس و ...
سرویس ها (Services)

در پروسه ی پیاده سازی پروژه ، بخش هایی از سیستم وجود دارند که داده ها، یا منطق مورد نظر ، مختص به View نمی باشد و در بخش های مختلف پروژه قابل استفاده می باشد. در این مواقع از کلاس های سرویس یا Service Class استفاده می شود . برای مشخص کردن کلاس های این چنینی بایستی از Injectable Decorator بروی کلاس استفاده شود تا به برای کامپایلر Angular مشخص شود که این یک سرویس هست و قابلیت تزریق (Inject) به بخشهای مختلف سیستم را دارد
تزریق وابستگی (Dependency Injection)

در واقع این الگوی طراحی مختص به Angular نمی باشد. بسیاری از فریم ورک های امروزی این قابلیت را ارائه میدهند.این قابلیت سهولت دسترسی به سرویس ها و اجزاء مختلف در ساختار Angular را فراهم می سازد. برای مثال شما در یک Component نیاز به استفاده از یک سرویس به نام RestService را دارید. جهت دسترسی به این سرویس تنها کافیست که از طریق سازنده (Constructor) کلاس مربوطه ، RestService را تعریف کنید و یک شیء از کلاس RestService برای شما ساخته شده و از طریق سازنده کلاس قابل دسترس می باشد. با استفاده از این الگو، شما دیگر نگران چگونگی ساخت کلاس ها نیستید
مزایا و معایت انگولار چیست؟

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

در این بخش برخی از مزایا و معایب پلتفورم Angular را باهم بررسی میکنیم.
مزایای Angular

    سیستم های مبتنی بر Angular ، عملا یک SPA هستن . یعنی بدون نیاز به بارگذاری مجدد صفحات ، امکان نمایش بخش های مختلف سیستم را فراهم میکند (چیزی مثل Gmail)
    فریم ورک Angular ، بسیاری از نیازهای اصلی و اساسی را در دل خودش قرار داده و همین نیاز به استفاده از کتابخانه های خارجی را تا حد زیادی کاهش میدهد. برای مثال مسیریابی (Routing) ، تزریق وابستگی (DI) یا سرویس ها بصورت پیش فرض در این فریم ورک فراهم شده است و نیاز به پیاده سازی یا استفاده از کتابخانه ی خارجی نداریم.
    فریم ورک Angular ، یک فریم ورک چند سکویی (Cross-Platform) می باشد.
    a. PWA یا Progressive Web App با بهره گیری از قابلیت های مدرن و امروزی ، امکان ارائه ی تجربه ی مشابه اپ های موبایلی را با سرعت بالا ، آفلاین ، بدون نیاز به نصب را فراهم میکنند که این قابلیت از طریق Angular قابل ارائه می باشد.
    b. امکان پیاده سازی اپ های بومی یا Native موبایل با استفاده از راهکارهای ارائه شده توسط Cordova ، Ionic یا NativeScript از طریق Angular فراهم شده است.
    c. امکان ایجاد اپلیکیشن های قابل نصب بروی سیستم های دستکتاپ مثل ویندوز ، لینوکس و مک و دسترسی به قابلیت های بومی سیستم عامل مقصد
    فریم ورک Angular امکان بارگذاری داینامیک یا دیرهنگام (LazyLoading) برای بخش های مختلف سیستم را فراهم می کند که این امر امکان بارگذاری سریعتر وب اپ را فراهم میکند .
    زبان مورد استفاده در Angular ، زبان محبوب TypeScript هست که با ارائه ی ابزارهای مناسب و ساختار کدنویسی مناسب ، امکان مدیریت و توسعه ی برنامه را بسیار جذاب و راحتتر می کند .
    با استفاده از فریم ورک Karma ، امکان پیاده سازی تست ، برای بخش های مختلف سیستم فراهم شده است . بطوری که قبل از هر ریلیز ، امکان تست کردن بخش های مختلف سیستم فراهم می شود و می توان از عملکرد سیستم اطمینان حاصل کرد .
    فراهم شدن امکان Server Side Rendering یا SSR با استفاده از Angular Universal که امکان رندر کردن برخی از بخش های سیستم در سمت سرور را فراهم میکند که این مسئله عمدتا در مورد مسائل مرتبط با SEO کاربردی هست .

معایب Angular

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

    این فریم ورک قابلیت و امکانات محدود در حوزه ی SEO ارائه میکند . در حال حاضر تنها راهکار برای عبور از این محدودیت استفاده از SSR با استفاده از Angular Universal می باشد.
    سخت و پیچیده بودن مراحل یادگیری این فریم ورک ، باعث کاهش محبوبیت این فریم ورک در بین سایر فریم ورک ها مثل React یا Vue شده است.
    استفاده از Angular بدلیل پیچیدگی و گستردگی این فریم ورک ، در پیاده سازی سیستم های کوچک توصیه نمی شود و بهتر هست که برای سیستم های بزرگ و گسترده مورد استفاده قرار بگیرد .


تفاوت ری اکت با انگولار چیست؟

تفاوت ری اکت با انگولار چیست

در این قسمت ، به بررسی برخی تفاوت های فریم ورک Angular با فریم ورک محبوب React می پردازیم.
آیا انگیولار محبوب است؟

هر دو فریم ورک، جزو فریم ورک های محبوب توسعه دهندگان می باشند . اما با بررسی آمار GitHub ، فریم ورک React با داشتن نزدیک به 203 هزار ستاره نسبت به Angular با تقریبا 87 هزار ستاره از محبوبیت بالاتری برخورد دار است.

همینطور بر اساس آمار منتشر شده در وب سایت Statista فریم ورک React جایگاه دوم را در توسعه ی وب بدست آورده است ، در حالی که Angular در جایگاه پنجم قرار دارد.

انگولار چیست؟

(کاربرد و استفاده از Angular)

انگولار چیست؟

(کاربرد و استفاده از React)


با توجه به موارد گفته شده ، همینطور نمودارهای ارائه شده ، برنده ی این رقابت ، React هست.
سرعت و علمکرد

هردو فریم ورک در سرعت و عملکرد قابلیت هایی دارند که خروجی مناسب و پرسرعتی را ارئه میدهد .

در Angular ، ساختار پیاده سازی پروژه و امکاناتی مثل $cacheFactory ، امکان بهبود عملکرد و سرعت سیستم پیاده سازی شده در این فریم ورک را فراهم میکند . همینطور برخلاف React ، فریم ورک Angular تغییرات را بروی DOM اصلی صفحه اعمال میکند و با بهره گیری از مکانیزم های منحصرفردی جهت تشخیص تغییرات ایجاد شده در صفحه ، سرعت خوبی و مناسبی را ارائه میکند . بطورکلی فریم ورک Angular در پیاده سازی پروژه های در مقیاس متوسط و بزرگ مناسب می باشد و بدلیل پیچیدگی های کلی ، در پیاده سازی پروژه های کوچک گزینه ی مناسبی نمی باشد.

در مقابل فریم ورک React ، مفهومی تحت عنوان Virtual DOM را ارائه میدهد که تغییرات ایجاد شده در خروجی را بروی این ساختار اعمال میکند و سپس با خروجی اصلی که کاربر مشاهده می کند جایگزین میکند .

این روش ، بروزرسانی داده ها و تغییرات بروی خروجی را با سرعت بیشتری تضمین میکند .

همینطور قابلیت استفاده از مجدد از Component های ایجاد شده ، روش دیگری است که سرعت و عملکرد این فریم ورک را بالا می برد .
اتصال داده ها (Data Binding)

بزرگترین تفاوت بین Angular و React در نحوه ی مدیریت حالت (State) سیستم می باشد.

در فریم ورک React ، مدیریت حالت سیستم توسط کتابخانه هایی نظیر Helmet یا React Router صورت میگیرد ،در صورتی که فریم ورک Angular از یک ساختار درونی برای اتصال داده ها بهره میگیرد.

فریم ورک Angular ، اتصال داده ی دو طرفه(Two-way data binding) ، استفاده میکند . بدین معنی که حالت یک مدل با هر گونه تغییری ،چه در UI و چه در Backend بصورت خودکار بروزرسانی می شود . و این تغییرات بدلیل اتصال المان های HTML به متغییر ها و پراپرتی های یک مدل ، نه تنها در UI نمایش داده می شوند بلکه در Backend نیز بروزرسانی می شوند . این قابلیت ، امکان پیاده سازی ساده تر سیستم های پویا را فراهم میکند .

از طرفی React ، از اتصال یک طرفه داده ها (one-way data binding) بهره میگیرد و تنها در صورتی تغییرات را در خروجی سیستم اعمال میکند که حالت یک مدل بروزرسانی شود . همینطور هرگونه تغییر در UI سیستم (مثلا تغییر در یک ورودی متنی) تغییری در اطلاعات مدل ایجاد نمی شود مگراینکه توسط توسعه دهنده این تغییر اطلاع رسانی شود تا فریم ورک تغییرات را اعمال نماید .
کیفیت کدنویسی و نگهداری سیستم

فریم ورک Angular با بهره گیری از ابزارهایی نظیر AngularCLI ، ساخت و ایجاد بخش های مختلف یک سیستم را آسان کرده است . همینطور یکپارچه سازی بخش هایی نظیر Angular Core و Angular Material با ساختار اصلی Angular ، امکان توسعه و تحویل پروژه ها را ساده تر و مناسب تر کرده است.

ابزاری نظیر AngularCLI، پیچیدگی های یادگیری این فریم ورک را آسان تر کرده است. این ابزار با ارائه ی خروجی های بهینه شده و مناسب از پروژه ، امکان ارائه ی پروژه های سازگار و پرسرعت را فراهم میکند .

فریم ورک React، نه تنها جنبه های مختلفی جهت بهبود کیفیت کد نویسی وجود دارد ، بلکه با ارائه مشخصه های خاص ، این فریم ورک خود را از سایر فریم ورک های تحت وب مستثنی کرده است . برای مثال استفاده از displayName جهت دیباگ پیام های ثبت شده توسط فریم ورک ، امکان تفکیک کامپوننت ها را در بررسی سیستم فراهم میکند .

همینطور توسعه دهندگان می توانند بجای تمرکز بروی کدهای مربوط به فریم ورک ، بروی استفاده از ویژگی ها و قابلیت های جدید JavaScript باشند .

همینطور React ، با ارئه Linter های ، امکان کدنویسی ساختارمند و یکپارچه را در ساختار React فراهم میکند ، به این دلیل که Linter ها با ارائه مجموعه ای از قوانین کدنویسی و ساختاری ، باعث ایجاد یک سیستم با ساختار و کدنویسی مشخص می شوند .
تست کردن سیستم

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

تست کردن و تست نویسی از موارد اصلی در پروسه ی پیاده سازی یک سیستم می باشد. خواه این تست کردن مربوط به Backend سیستم باشد ، خواه UI.

بطور کلی بدلیل داینامیک بودن نوع داده ها در زبان Javascript بسیار سخت می باشد و همین سختی الزام به تست نویسی را بیشتر از پیش روشن میکند تا از عملکرد درست سیستم در مقابل تغییرات مختلف اطمینان خاصل شود .

فریم ورک Angular ، مسائل م

انجام پروژه angularjs

آموزش شروع کار با Angular
دوره های مرتبط با این مقاله
دوره آموزشی Java
دوره آموزشی Java Spring
دوره آموزشی Android
آموزش انگولار
دوره آموزشی MVC پروژه محور همراه با Design Pattern
دوره آموزشی MVC Core With Angular 6
آموزش شروع کار با Angular

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

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

در این مقاله ما فرض را بر این می گذاریم که شما در حال حاضر با جاوا اسکریپت آشنا هستید و مفاهیم کلاس و ماژول را می دانید.
تمامی مثال های این مقاله با استفاده از 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
گام دوم:آموزش ایجاد یک پروژه جدید Angular

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

دوره آموزش Angular

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

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

دوره آموزش Angular

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

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

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

دوره آموزش Angular

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

دوره آموزش Angular
دوره آموزش Angular

تا اینجا از شما انتظار می رود که یک برنامه Hello World ساده را انجام دهید .
بررسی فایل پروژه Angular

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

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

دوره آموزش Angular
File
Purpose
app/app.component.
{ts,html,css,spec.ts}
AppComponent را همراه با یک قالب HTML، شیوه CSS و یک تست واحد تعریف می کند. این یک root component است که درختی از کامپوننت های تودرتو خواهد شد.
app/app.module.ts
AppModule را تعریف می کند، که یک root mudule است و به Angular می گوید که چگونه برنامه را اسمبل کند.
در حال حاضر فقط AppComponent را اعلام می کند.
به زودی کامپوننت های بیشتری برای اعلام اینجا خواهد گرفت.
assets/*
پوشه ای که در آن شما می توانید تصاویر و هر چیز دیگری را که در هنگام ساخت برنامه به آن نیاز دارید قرار دهید.
environments/*
این پوشه حاوی یک فایل برای هر یک از محیط های مقصد خود است.
Browserslist
یک فایل پیکربندی برای به اشتراک گذاشتن مرورگرهای هدف بین ابزارهای مختلف.
favicon.ico
هر سایتی می خواهد در نوار bookmark خوب به نظر برسد. می توانید با آیکون Angular خود شروع کنید.
index.html
صفحه اصلی HTML که زمانی که کسی از سایت شما بازدید می کند ظاهر می گردد. اغلب اوقات شما هرگز نیازی به ویرایش آن ندارید. CLI به طور خودکار تمام فایل های js و css را هنگام ساختن برنامه خود اضافه می کند، بنابراین شما هرگز نباید هر گونه تگ < script > یا < link > را اینجا به صورت دستی اضافه کنید.
karma.conf.js
پیکربندی تست واحد برای karma test runner که در هنگام اجرای ng test مورد استفاده قرار می گیرد.

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

main.ts

نقطه ورود اصلی به برنامه است. برنامه را با کامپایلر JIT کامپایل می کند و AppModule (ماژول اصلی Application) را برای اجرا در مرورگر راه اندازی می کند. شما همچنین می توانید از کامپایلر AOT بدون تغییر هیچ کدی با اضافه کردن پرچم –aot به دستورات ng build یا ng serve استفاده کنید.
polyfills.ts
مرورگرهای مختلف سطوح مختلف پشتیبانی از استانداردهای وب را دارند. Polyfills به نرمال سازی این تفاوت ها کمک می کند. شما باید با core-js و zone.js کاملا امن باشید، اما برای اینکه مطمئن شوید برای اطلاعات بیشتر، راهنمای مرورگر را بررسی کنید.
styles.css
Style های سراسری شما اینجا هستند. اغلب اوقات شما می خواهید سبک های محلی را در کامپوننت های خود برای ویرایش سازی و نگهداری آسان تر داشته باشید، اما سبک هایی که بر کل برنامه های شما تأثیر می گذارد، باید در یک مکان مرکزی باشند.
test.ts
این نقطه ورودی اصلی برای Unit tests است.
این فایل پیکربندی های سفارشی دارد که ممکن است نا آشنا باشد، اما چیزی نیست که شما باید ویرایش کنید.
tsconfig.{app|spec}.json
پیکربندی کامپایلر TypeScript برای برنامه Angular (tsconfig.app.json) و برای آزمایش های واحد (tsconfig.spec.json).
tslint.json
پیکربندی اضافی Linting برای TSLint و Codelyzer که در هنگام اجرای ng lint استفاده می شود.
Linting به شما کمک می کند تا سبک کد خود را حفظ کنید.

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

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

دوره آموزش Angular
File
Purpose
node_modules/
Node.js این پوشه را ایجاد می کند و تمام ماژول های شخص ثالث موجود در package.json را در داخل آن قرار می دهد.
.editorconfig
پیکربندی ساده برای ویرایشگر شما برای اطمینان از اینکه همه کسانی که از پروژه شما استفاده می کنند همان پیکربندی اساسی را دارند.
angular.json
پیکربندی برای Angular CLI است.
در این فایل می توانید پیش فرض ها را تنظیم کنید و همچنین پیکربندی کنید که چه فایل هایی در هنگام ساخت پروژه شامل شوند.
package.json
تنظیمات npm را نشان می دهد.
شما همچنین می توانید اسکریپت های سفارشی خود را در اینجا اضافه کنید.
README.md
داکیومنت اساسی برای پروژه شما
tsconfig.json
پیکربندی کامپایلر TypeScript برای IDE خود را انتخاب کنید.

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

sential Training

آموزش انگولار جی اس ، فریم ورک مطرح نرم افزاری تحت وب برای حل چالش های برنامه نویسی
آموزش  AngularJS ( آموزش انگولار ) به زبان فارسی و به صورت پروژه محور و گام به گام از مقدمات و مفاهیم تا انجام پروژه پیشرفته Angular

سطح مقدماتی – پیشرفته

AngularJS 2 Logo انگولار
ویژگی های اصلی مجموعه صفر تا صد آموزش انگولار جی اس :

    150 دقیقه آموزش فارسی کلیات انگولار جی اس از آشنایی مقدماتی تا انجام پروژه های مختلف .
    آموزش فوق العاده کاربردی و سطح یک جهانی دوبله شده از اساتید برنامه نویسی وب دنیا – برای اولین بار در ایران – (دوبله شده به فارسی توسط متخصصین برنامه نویسی ایرانی)
    شامل دوره آموزشی فارسی و مثال محور : “کلیات و آموزش انگولار جی اس ” – Angular JS Essential Training
    همراه با سورس ارزشمند تمام پروژه های آموزشی فارسی
    به علاوه بیش از 20 ساعت آموزش های تخصصی Angular JS از شرکت Lynda به زبان انگلیسی و با زیرنویس انگلیسی
    همراه با نرم افزار های ادیتور و برنامه نویسی مورد نیازبسته ای عالی برای تمام علاقمندان به برنامه نویسی وب

انگولار جی اس چیست ؟ What is AngularJS

انگولار جی‌ اس (انگلیسی: AngularJS) چارچوب نرم‌افزاری تحت وب متن‌باز نگه‌داری‌شده توسط گوگل و جامعهٔ برنامه‌نویسان مستقل برای حل بسیاری از چالش‌های برنامه‌های تک‌صفحه‌ای است.
فلسفه وجودی انگولار جی اس
انگولارجی‌اس بر اساس این نظر طراحی شده که واسط کاربر و کدهای متصل‌کننده کامپوننت‌های نرم‌افزار بهتر است به برنامه‌نویسی اعلانی نوشته شود. در حالی که برای نوشتن منطق تجاری برنامه کاربردی برنامه‌نویسی دستوری مناسب‌تر است. AngularJs برای اپلیکیشن های تک صفحه ی (single-page-applications = SPA) گزینه ی بسیار خوبی می باشد.

AngularJS 2 Logo انگولار
نحوه کار با انگولار جی اس
نحوه کار این کتابخانه بدین شکل است که ابتدا صفحه اچ تی ام‌ال که دارای ویژگی ها و تگهای اضافه شده سفارشی است خوانده میشود. این ویژگی ها نقش رهنمود را برای انگولار دارند که بتواند ورودی یا خروجی صفحه را به مدل مربوط به ان که از جنس متغیر های جاوا اسکریپت است پیوند دهد.
ارزش این متغیر های جاواسکریپت میتواند دستی از طریق کد تغییر کند و یا بطور ایستا یا پویا از منابع جی سن گرفته شود. این تغییرات از طریق پیوند برقرار شده ورودی یا خروجی را تحت تاثیر قرار میدهد.
دوره آموزشی فارسی ” کلیات آموزش انگولار جی اس ”
AngularJS Essential Training

فریم ورک های جاوا اسکریپت قابلیت های مخصوصی برای توسعه انواع خاصی از پروژه های وب فراهم می کنند و به شما کمک می کنند تا سریع تر کدنویسی کنید. AngularJS توسط شرکت گوگل طراحی شده است تا چالش هایی که برنامه نویس ها هنگام ساخت برنامه های تک صفحه ای با آنها روبرو هستند را رفع کند.

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

در این آموزش انگولار جی اس شما را با کلیات این فریم ورک آشنا می کند، از جمله Template های اعلانی، اتصال داده دو طرفه و تزریق وابستگی. در این آموزش تک تک ویژگی های این فریم ورک را توضیح می دهیم و روی ساختار جدید مولفه محور AngularJS 2 تمرکز می کنیم. بعد از اتمام این آموزش، می توانید برنامه خودتان را در Angular بسازید.

نمونه فیلم معرفی دوره آموزشی فارسی ” کلیات آموزش انگولار جی اس “
عناوین و سرفصل های دوره آموزشی فارسی ” کلیات آموزش انگولار جی اس ” :

مقدمه
1- خوش آمدگویی
2- چرا باید از AngularJS استفاده کنیم؟
3- قبل از مشاهده این دوره چه چیزهایی باید بدانیم؟
4- استفاده از فایل های تمرینی
5- اصول اولیه TypeScript
6- بررسی اجمالی این دوره
فصل اول – مروری بر ساختار
1- مولفه ها، Bootstrap‌ و DOM
2- دایرکتیوها و Pipeها
3- اتصال داده
4- تزریق وابستگی
5- سرویس ها و دیگر منطق های تجاری
6- پایداری داده
7- مسیردهی

صفر تا صد آموزش انگولار جی اس 2 - AngularJS
فصل دوم – مولفه ها در آموزش انگولار جی اس

1- متادیتای مولفه
2- انتخاب کننده مولفه
3- Template مولفه
4- تغییر استایل یک مولفه
5- استفاده از مولفه های دیگر در یک مولفه
6- درون یابی و محتوای عبارت
7- اتصال مشخصه
8- اتصال رویداد
9- دادن داده به مولفه با یک ورودی
10- تصدیق رویدادهای مولفه با خروجی

فصل سوم – دایرکتیوها و پایپ ه
1- دایرکتیوهای ساختاری – nglf
2- دایرکتیوهای ساختاری – ngFor
3- دایرکتیوهای خصیصه – داخلی
4- دایرکتیوهای خصیصه – اختصاصی
5- استفاده از مقادیر دایرکتیو
6- کار با رویدادها در دایرکتیوها
7- Pipeهای Angular – داخلی
8- های Angular – اختصاصی

صفر تا صد آموزش انگولار جی اس 2 - AngularJS
فصل چهارم – فرم ها

1- فرم های Angular
2- فرم های Template محور
3- فرم های مدل محور
4- تایید اعتبار – داخلی
5- تایید اعتبار – اختصاصی
6- کار با خطاها
فصل پنجم – تزریق وابستگی و سرویس ها در آموزش انگولار جی اس
1- Angular ‌چگونه تزریق وابستگی انجام می دهد؟
2- سرویس ها در Angular
3- تزریق سازنده کلاس
4- ساخت یک سرویس
5- ثبت provider در Bootstrap
6- Decorator تزریق
7- Opaque Token

صفر تا صد آموزش انگولار جی اس 2 - AngularJS
فصل ششم – اچ تی تی پی

1- بسته Angular 2 HTTP
2- استفاده از یک mock back end برای HTTP
3- استفاده از HTTP برای بدست آوردن فراخوانی
4- استفاده از UrlSearchParams
5- استفاده از HTTP برای فراخوانی کردن POST، PUT و DELETE
فصل هفتم – مسیردهی
1- بسته مسیردهی Angular 2
2- پیکربندی مسیر
3- خروجی های Router
4- لینک های Router
5- استفاده از کلاس Router برای ناوبری
فصل هشتم – نتیجه گیری
1- گام های بعدی

صفر تا صد آموزش انگولار جی اس 2 - AngularJS
همراه با بهترین دوره های تخصصی آموزش AngularJS ( آموزش Angular ) به زبان انگلیسی و با زیرنویس انگلیسی:

– Lynda – Learn AngularJS 2 – The Basics
دوره آموزشی 2 ساعته ” آموزش Angular : یادگیری مقدمات انگولار جی اس 2″

– Lynda – Migrating to Angular 2
دوره آموزشی 2 ساعته ” آموزش Angular : مهاجرت از انگولار 1 به نسخه 2 ”

Lynda - Migrating to Angular 2Lynda - Learn AngularJS 2 - The Basics
– Lynda – TypeScript Essential Training
دوره آموزشی 5 ساعته ” آموزش تایپ اسکریپت : کلیات تایپ اسکریپت “

– Train Simple – JavaScript Fundamentals
دوره آموزشی 2 ساعته ” آموزش اصول جاوا اسکریپت ”

Lynda - TypeScript Essential TrainingTrain Simple - JavaScript Fundamentals

– Lynda – Angular 2 Forms – Data Binding and Validation
دوره آموزشی 1 ساعته ” آموزش Angular : عملکرد فرم ها در انگولار 2 ”

– Lynda – AngularJS – Adding Registration to Your Application
دوره آموزشی 2 ساعته ” آموزش AngularJS : ساخت بخش ثبت نام برای اپلیکیشن با انگولار ”

Lynda - AngularJS - Adding Registration to Your ApplicationLynda - Angular 2 Forms - Data Binding and Validation

– Lynda – AngularJS – Building a Data-Driven App
دوره آموزشی 2 ساعته ” آموزش AngularJS : ساخت اپلیکیشن داده محور ”

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

– Lynda – AngularJS and WordPress – Building a Single-Page Application
دوره آموزشی 1 ساعته ” آموزش AngularJS : انگولار و وردپرس – ساخت اپلیکیشن تک صفحه ای ”

Lynda - AngularJS Form ValidationLynda - AngularJS - Building a Data-Driven App

– Lynda – AngularJS Form Validation
دوره آموزشی 1 ساعته ” آموزش Angular : معتبرسازی فرم ها در انگولار”

– Lynda – Building Custom HTML5 Video Playback with Angular 2
دوره آموزشی 2 ساعته ” آموزش Angular : ساخت پلیر ویدیو HTML5 با انگولار ”

Lynda - Building Custom HTML5 Video Playback with Angular 2Lynda - Creating a Calculation Tool with AngularJS

– Lynda – Creating a Calculation Tool with AngularJS
دوره آموزشی 2 ساعته ” آموزش AngularJS : ساخت یک ابزار محاسباتی با انگولار ”

– Lynda – Creating a Quiz with AngularJS
دوره آموزشی 3 ساعته ” آموزش AngularJS : ساخت یک تست کوئیز با انگولار ”

Lynda - Learning Angular 2 DirectivesLynda - Learning AngularJS Testing

– Lynda – Learning Angular 2 Directives
دوره آموزشی 3 ساعته ” آموزش Angular : یادگیری دستورات انگولار 2 ”

– Lynda – Learning AngularJS Testing
دوره آموزشی 1 ساعته ” آموزش Angular : یادگیری تستینگ در انگولار جی اس”

Lynda - Creating a Quiz with AngularJS

– همراه با نسخه کامل نرم افزارهای ادیتور و ویراستار مطرح برای کدنویسی انگولار

پیش نیاز دوره های برنامه نویسی ، دوره صفرتاصد مبانی برنامه نویسی است ، در ادامه حتما توصیه میکنیم دیگر دوره های مرتبط با جاوا اسکریپت را هم ببینید :

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

390,000 تومان
صفر تا صد آموزش انگولار جی اس عدد

    انگولار جاوا اسکریپت

محصولات مرتبط
صفحه اصلی
همکاری
بازار کار
پروژه ها
درباره ما
برنامه زمانی دروه Angular JS
طول دوره:
40 ساعت
شهریه:
23,000,000 ریال
نوع آموزش:
TPH
پیش نیاز:
مدرک پایان دوره:
تاییدیه فنی و حرفه ای
مدرک بین المللی:
گواهینامه مهارت فنی و حرفه ای
Angular JS

در حال حاضر کلاسی برای دوره مورد نظر ارائه نشده است در صورت تمایل شماره موبایل خود را ثبت نمایید تا زمان شروع دوره ها برای شما اطلاع رسانی شود
توضیحات (اختیاری)
موبایل
حداکثر زمان اطلاع رسانی
روز
دوره های مرتبط :
ِAngularچیست و چه کاربردی دارد؟
Angular چیست؟

AngularJS یک چارچوب ساختاری برای برنامه های کاربردی وب پویا است. این به شما امکان می دهد از HTML به عنوان زبان قالب خود استفاده کنید و به شما امکان می دهد تا نحو HTML را گسترش دهید تا اجزای برنامه خود را به طور واضح و مختصر بیان کنید. اتصال داده و تزریق وابستگی آن بسیاری از کدهایی را که در حال حاضر باید بنویسید حذف می کند. و همه اینها در مرورگر اتفاق می افتد و آن را به یک شریک ایده‌آل برای هر فناوری سرور تبدیل می کند.

Angular یک پلت فرم و فریمورک برای ساخت اپلیکیشن های کلاینت تک صفحه ای با استفاده از HTML وTypeScript است.
کاربرد Angular

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

معماری یک برنامه Angular بر مفاهیم اساسی خاصی متکی است. بلوک‌های اصلی چارچوب Angular اجزای Angular هستند که در NgModules سازماندهی شده‌اند. NgModules کدهای مرتبط را در مجموعه‌های تابعی جمع آوری می‌کند. یک برنامه Angular توسط مجموعه‌ای از NgModules تعریف می‌شود. یک برنامه همیشه حداقل یک ماژول ریشه دارد که بbootstrap را فعال می‌کند و معمولاً ماژول‌های ویژگی بسیار بیشتری دارد.
مزایای Angular

نسخه‌های بسیاری از Angular از زمان شروع آن منتشر شده‌است. همه این نسخه‌ها به کارآمد بودن فریمورک اضافه کرده‌اند.

    اجزای سفارشی

    Angular به کاربران این امکان را می‌دهد تا اجزای مخصوص به خود را بسازند که می‌توانند عملکردها را به همراه منطق رندر در قطعات قابل استفاده مجدد بسته‌بندی کنند. همچنین با اجزای وب به خوبی بازی می‌کند.

    Data Binding

    Angular به کاربران امکان می‌دهد بدون زحمت داده‌ها را از کد جاوا اسکریپت به نما منتقل کنند و بدون نیاز به نوشتن کدی به صورت دستی به رویدادهای کاربر واکنش نشان دهند.

    تزریق وابستگی

    Angular به کاربران این امکان را می‌دهد تا خدمات ماژولار را بنویسند و آنها را در هر کجا که نیاز دارند تزریق کنند. این امر آزمایش پذیری و قابلیت استفاده مجدد خدمات مشابه را بهبود می‌بخشد.

    آزمایش

    تست‌ها ابزارهای درجه یک هستند و Angular از ابتدا با در نظر گرفتن قابلیت آزمایش ساخته‌شده‌است. شما این توانایی را خواهید داشت که هر بخش از برنامه خود را آزمایش کنید - که بسیار توصیه می‌شود.

    جامع

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

    سازگاری مرورگر

    Angular کراس پلتفرم است و با چندین مرورگر سازگار است. یک برنامه Angular معمولاً می‌تواند بر روی همه مرورگرها (به عنوان مثال: Chrome، Firefox) و سیستم عامل‌ها مانند Windows، macOS و Linux اجرا شود.

مشابه هر چارچوب جاوا اسکریپت دیگری، Angular به استفاده از ابزارهای ویژه برای بهینه سازی SPA برای موتورهای جستجو نیاز دارد. این ابزارها به شما امکان می دهند SSR (رندر سمت سرور) را پیاده سازی کنید و تمام الزامات فنی SEOرا برای فهرست بندی صحیح صفحه و رتبه بندی خوب برآورده کنید.
ویژگی‌های Angular

 

    مدل شیء سند

    DOM (مدل شیء سند) با یک سند XML یا HTML به عنوان یک ساختار درختی رفتار می‌کند که در آن هر گره بخشی از سند را نشان می‌دهد. Angular از DOM معمولی استفاده می‌کند. در نظر بگیرید که ده به روز رسانی در یک صفحه HTML انجام می‌شود. به جای به روز رسانی مواردی که قبلاً به روز شده بودند، Angular کل ساختار درختی تگ‌های HTML را به روز می‌کند.

    TypeScript

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

    Data Binding

    اتصال داده‌ها فرآیندی است که به کاربران امکان می‌دهد عناصر صفحه وب را از طریق مرورگر وب دستکاری کنند. Angular از HTML پویا استفاده می‌کند و به برنامه‌نویسی پیچیده نیاز ندارد. اتصال داده در صفحات وب که شامل اجزای تعاملی مانند ماشین حساب، آموزش، انجمن‌ها و بازی‌ها هستند استفاده می‌شود. همچنین هنگامی‌که صفحات حاوی مقدار زیادی داده هستند، نمایش تدریجی بهتری از یک صفحه وب را امکان پذیر می‌کند.

    آزمایش کردن

    Angular از چارچوب تست Jasmine استفاده می‌کند. چارچوب Jasmine عملکردهای متعددی را برای نوشتن انواع مختلف موارد آزمایشی ارائه می‌دهد. Karma وظیفه اجرای آزمایش‌هایی است که از یک فایل پیکربندی برای تنظیم چارچوب راه‌اندازی، گزارشگران و تست استفاده می‌کند.

معماری Angular

Angular یک چارچوب تمام عیار مدل-نما-کنترل کننده (MVC) است. راهنمایی روشنی در مورد چگونگی ساختار برنامه ارائه می‌دهد و جریان داده دو طرفه را در حالی که DOM واقعی ارائه می‌دهد ارائه می‌دهد. موارد زیر هشت بلوک سازنده یک برنامه Angular هستند:

    ماژول‌ها

    یک برنامه Angular دارای یک ماژول ریشه به نام AppModule است که مکانیزم بوت استرپ را برای راه اندازی برنامه فراهم می‌کند.

    اجزاء

    الگوی Angular نشانه گذاری Angular را با HTML ترکیب می‌کند تا عناصر HTML را قبل از نمایش تغییر دهد. دو نوع اتصال داده وجود دارد: اتصال رویداد: به برنامه شما اجازه می‌دهد با به‌روزرسانی داده‌های برنامه به ورودی کاربر در محیط هدف پاسخ دهد. Property binding: کاربران را قادر می‌سازد تا مقادیری را که از داده‌های برنامه شما محاسبه می‌شوند در HTML درون‌یابی کنند.

    فراداده

    ابرداده به Angular می‌گوید که چگونه یک کلاس را پردازش کند. برای تزئین کلاس استفاده می‌شود تا بتواند رفتار مورد انتظار یک کلاس را پیکربندی کند.

    خدمات

    وقتی داده یا منطقی دارید که با view مرتبط نیست اما باید بین اجزا به اشتراک گذاشته شود، یک کلاس سرویس ایجاد می‌شود. این کلاس همیشه با decorator@Injectible همراه است.

    تزریق وابستگی

    این ویژگی به شما امکان می‌دهد تا کلاس‌های کامپوننت خود را واضح و کارآمد نگه دارید. داده‌ها را از سرور دریافت نمی‌کند، ورودی کاربر را تأیید نمی‌کند، یا مستقیماً به کنسول وارد نمی‌شود. در عوض، چنین وظایفی را به سرویس‌ها محول می‌کند.

    سازگاری مرورگر

    Angular کراس پلتفرم است و با چندین مرورگر سازگار است. یک برنامه Angular معمولاً می‌تواند بر روی همه مرورگرها (به عنوان مثال: Chrome، Firefox) و سیستم عامل‌ها مانند Windows، macOS و Linux اجرا شود.

Vue. jsوAngular هر دو فریمورک جاوا اسکریپت هستند که برای توسعه front-end رابط‌های وب استفاده می‌شوند.
دوره Angular (انگولار) در مجتمع آموزشی مهرگان

مجتمع آموزشی مهرگان پیشرو در تدریس زبان‌های مختلف برنامه نویسی و ‌صفحات وب، با بهره‌گیری از اساتید خبره و روش‌های به روز تدریس، دوره Angular (انگولار) در اصفهان را برگزار ‌می‌کند. در طی برگزاری کلاس‌ها علاوه بر مرور دانش‌ها پایه صفحات وب، شما تحت آموزش تخصصی Angular به صورت کاربردی و پروژه محور قرار ‌می‌گیرید به صورتی که پس از اتمام دوره شما کاملا به مباحث و تکنیک‌های طراحی و توسعه client-side و Angular تسلط پیدا کرده و مانند یک برنامه نویسی حرفه‌ای شروع به ایجاد صفحات نمایید. در پایان دوره می‌توانید نسبت به اخذ مدرک قابل ترجمه یا مدرک فنی حرفه ای اقدام نمایید.
مخاطبان دوره:
و جذاب‌ترین مهارت‌ها یعنی تسلط بر فریم ورک‌های کاربردی در طراحی سایت صحبت کنیم. اگر تمایل دارید حوزه کاری خود را طراحی سایت انتخاب کنید یا این که به صورت مبتدی در حال یادگیری مبانی توسعه وب هستید، تسلط بر فریم ورک‌ها و آشنایی با آن‌ها در سطح ابتدایی و پیشرفته برای شما الزامی است. اما شاید ندانید که فریم ورک به چه معنا است. باید گفت که فریم ورک در واقع نوعی چهارچوب برای طراحی سایت و وب اپلیکیشن‌ها می‌باشد. در این مطلب با ما همراه باشید تا یکی از کاربردی‌ترین فریم ورک‌ها، یعنی انگولار را، به شما معرفی کنیم.

از نظر شما فرم ورک انگولار به چه معنا است؟
از نظر شما فرم ورک انگولار به چه معنا است؟

معنی واژه angular در فارسی زاویه دار می‌باشد. به نوعی انگولار، یک فریم ورک متن باز تحت وب است که بر مبنای جاوا اسکریپت ارائه شده است. به کمک این فریم ورک می‌توان وب اپلیکیشن‌هایی پویا ساخت. انگولار برای برنامه‌نویسان این شرایط را فراهم می‌کند که html زبان اصلی خود را انتخاب کنند و همچنین برای این که اجزای تشکیل دهنده نرم‌افزار را شفاف‌سازی کنند، به کمک آن می‌توانند سینتکس‌های html را گسترش دهند. html زبانی مخصوص سایت و طراحی اپلیکیشن می‌باشد. به طور کلی فریم ورک angular زبان ساده‌ای است که ضمن پشتیبانی از تمامی نسخه‌های html، به منظور ساخت و توسعه وب اپلیکیشن‌ها و همچنین طراحی نرم‌افزارهای تحت وب در سیستم عامل‌های اندروید و IOS مورد استفاده قرار می‌گیرد.

مهم‌ترین کاربرد angular
مهم‌ترین کاربرد angular

وب سایت ‌های قدیمی و معمولی معمولاً حالت چند صفحه‌ای داشتند که برای انجام هر عملی یک‌بار صفحه مرورگر رفرش می‌شد و همه چیز از نو برای کاربر لود می‌شد. اصطلاحاً به آن‌ها مولتی پیج اپلیکیشن‌ها گفته می‌شود. اما سینگل پیج اپلیکیشن‌ها دقیقا مانند اپلیکیشن موبایل عمل می‌کنند و قطعات و المان‌های تشکیل‌دهنده یک صفحه وب سایت جلوی چشم کاربر بدون رفرش شدن و لود شدن مجدد جابه‌جا می‌شوند. جالب است بدانید که ساخت وب سایت‌های تک صفحه‌ای هزینه و زمان کمتری به نسبت سایت‌های چند صفحه‌ای نیاز دارد. به علاوه کاربران نیز با این نوع وب سایت‌ها خیلی راحت‌تر هستند و تعامل بهتری برقرار می‌کنند. از طرف دیگر سازگاری آن‌ها با گوشی‌های هوشمند خیلی بیشتر است. یکی از بهترین ابزارهایی که می‌توان با آن‌ها وبسایت‌های تک صفحه‌ای ایجاد کرد، فریم ورک انگولار می‌باشد؛ که توسط گوگل ایجاد شده و پشتیبانی می‌گردد.

ویژگی‌های angular
ویژگی‌های angular

در ادامه با ویژگی های فریم ورک محبوب انگولار آشنا خواهیم شد. با ما همراه باشید.
قابل اعتماد بودن و محبوبیت انگولار

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

انگولار یک فریم ورک بزرگ، مبتنی بر جاوا اسکریپت می‌باشد. اکوسیستم بزرگی پشت این فریم ورک قرار گرفته که از برنامه‌نویسان سراسر دنیا تشکیل شده است. به علاوه جالب است بدانید که بیشتر از ۶۳ هزار ستاره دارد که نشان‌دهنده محبوبیت و قابل اعتماد بودن آن می‌باشد.
برخورداری از TypeScript

اگر چه angular برگرفته شده از جاوا اسکریپت است؛ اما مبنای اصلی این فریم ورک یک ابر مجموعه از جاوا اسکریپت به نام TypeScript می‌باشد. زمانی که برنامه‌نویس برنامه‌ای را ارائه می‌دهد برای دیدن نتیجه کار خود نیاز است که برنامه در همان زمان اجرا گردد. تایپ اسکریپت با کامپیل کردن کد نوشته شده به جاوا اسکریپت، این شرایط را برای برنامه‌نویس فراهم می کند. این ویژگی یک مزیت فوق‌العاده‌ برای توسعه‌دهندگان وب محسوب می‌شود. چرا که در زمان تایپ، تمامی خطاهای آن‌ها را نشان می‌دهد. این ویژگی یکی از برترین تمایزها بین تایپ اسکریپت و جاوا اسکریپت می‌باشد.
پایداری و ثبات انگولار

همان طور که اشاره شد گوگل از انگولار پشتیبانی می‌کند؛ که باعث ثبات و پایداری این فریم ورک می گردد. لازم به ذکر است که تمامی نسخه‌های ۲ به بعد این فریم ورک از ثبات و پایداری خاصی برخوردارند و به راحتی و بدون هیچ گونه تغییر کدی می‌توان پروژه‌های قبلی را به نسخه‌های بالاتر ارتقا داد.
فریم ورکی ماژولار

زمانی که شما برنامه‌ای را به صورت یکپارچه و کامل می‌نویسید، دیگر احتمال تغییر در هر قسمت به سختی امکان پذیر است. طراحی به سبک ماژولار کمک می‌کند یک برنامه با اجزای مختلف، کنار هم قرار بگیرند. در این صورت تغییر و ویرایش در هر قسمت به راحتی انجام می‌شود. این مزیت باعث می‌شود که هم هزینه نگهداری برنامه در آینده کاهش یابد و هم اینکه از ماژول‌ها در پروژه‌های دیگر نیز استفاده کرد. به عبارتی طراحی ماژولار یعنی قابلیت افزودن ابزارهای جانبی بعد از طراحی کامل به برنامه امکان‌پذیر است. ماژول‌های متفاوتی یک انگولار را سازماندهی می‌کنند. به نوعی کدهای شما دارای ماژول‌های مجزایی هستند که هر کدام مسئول توابع خاصی می ‌باشند. شما می‌توانید به راحتی خودتان ماژول طراحی کنید یا از کامپوننت‌های آماده‌ای که توسط طراحان ارائه می‌گردد، استفاده کنید.
سازگاری انگولار با کدهای متفاوت

برنامه‌ها و سایت های ارائه شده به کمک انگولار کامپوننت محور هستند. به نوعی لوگوهای مستقلی کنار یکدیگر قرار می‌گیرند و در نهایت پروژه نهایی را ایجاد می‌کنند. این ویژگی کمک می‌کند تا کدی که در یک پروژه استفاده شده، بارها در پروژه‌های دیگر نیز مورد استفاده قرار گیرد و به طور کلی سازگاری و نگهداری کدها را راحت‌تر می‌کند.
پشتیبانی انگولار از Ionic

،Ionic سکوی توسعه‌ی موبایل، اولین بار توسط انگولار پشتیبانی شد و بستری را فراهم کرد تا برنامه‌های تلفن همراه برای Android و iOS ایجاد شود. لازم به ذکر است که هنوز هم از انگولار به طور گسترده با قالب Ionic به منظور توسعه و گسترش برنامه‌های تلفن همراه استفاده می‌گردد.
بهره‌گیری از معماری MVC

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

view:  اطلاعات موجود در model را به کاربر نشان می‌دهند و دستور کاربر را به controller انتقال می‌دهد.

controller: وظیفه controller برقراری ارتباط میان سایر لایه‌ها می‌باشد. همچنین در به روز رسانی model نقش مهمی ایفا می‌کند.

model: داده‌ها را حمل می‌کند و توسط controller تغییرات اعمال شده توسط model را به view اطلاع رسانی می‌کند.

وظایف برنامه‌نویسان انگولار

     با کمک Angular JS و TypeScript رابط کاربری را توسعه و طراحی می‌کنند.
    یک برنامه‌ی فرانت اند را به طور کامل آماده‌سازی می‌کنند.
    می‌بایست ارتباط نزدیکی با وب سرورهای خارجی داشته باشند.
    محصولات را به کمک تجزیه و تحلیل کد توسعه‌ می دهند
    می‌توانند در بخش‌های مختلف و مرتبط دیگر همکاری داشته باشند.
    بسته به نیاز مجموعه می‌توانند در مرورگر‌های متفاوت کدهای مناسب جاوا اسکریپت، HTML و CSS بنویسند.

بازار کار انگولار
بازار کار انگولار

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

مزیت‌ها و ویژگی‌های اشاره شده باعث شده تا angular  یکی از محبوب‌ترین زبان‌‎های برنامه‌نویسی شناخته شده در جهان محسوب گردد. این زبان برنامه نویسی در ایران و جهان از وضعیت کاری خوبی برخوردار است. چرا که با توسعه تکنولوژی و افزایش تقاضا برای استخدام برنامه‌نویس انگولار مواجه هستیم. صرفا کافی است سایت‌های کاریابی را بررسی کنید تا به طور اختصاصی آگهی‌های استخدام برنامه‌‌نویس انگولار را ببینید.
در پایان

در این مطلب آموزشی سعی کردیم شما را با یکی از محبوب‌ترین و پرکاربردترین فریم ورک‌های دنیا آشنا کنیم. افزایش تقاضا برای استخدام برنامه نویس انگولار و توسعه تکنولوژی باعث شده تا تعداد شرکت‌هایی که آگهی‌های فرصت شغلی و استخدام برنامه نویس انگولار را ثبت می‌کنند، روز به روز افزایش یافته و بیشتر شوند. بنابراین می‌توان گفت که این زبان برنامه‌نویسی در ایران و جهان از موقعیت کاری خوبی برخوردار است. اگر قصد دارید در این حیطه به طور حرفه‌ای کار کنید و نمی‌دانید چطور شروع کنید، توصیه ما به شما تهیه‌ی دوره‌ی حرفه‌ای و جامع angular و typescript می‌باشد.

 

این تصویر اون چیزی که دنبالشی نیست:) بیشتر بگرد
سرفصل های دوره
معرفی بیشتر و مقدمات دوره

بررسی پروژه های دوره
۰۰:۱۵:۲۶

بررسی محبوبیت و مزایای انگیولار در مقابل فریمورک ها و کتابخانه های مشابه (Vue.js , React.js)
۰۰:۰۶:۱۲

بررسی بازار کار Angular
۰۰:۰۹:۳۴

تایپ اسکریپت چیه و تا چه حد برای دوره اون رو یاد بگیریم ؟
منتشرشده ۰۰:۰۹:۲۴

معرفی چنل دیسکورد و کامیونیتی برنامه نویسان انگولار کدیاد
منتشرشده ۰۰:۰۵:۳۰
آموزش Typescript

شروع کار با تایپ اسکریپت و انواع داده ها - Getting Started With Typescript And DataTypes
منتشرشده ۰۲:۲۸:۳۹

کامپایلر تایپ اسکریپت - Typescript Compiler
منتشرشده ۰۰:۴۸:۰۰

کلاس ها و رابط ها - Classes And Interfaces
منتشرشده ۰۲:۳۷:۲۹

تایپ های پیشرفته - Advanced Types
منتشرشده ۰۰:۵۳:۴۹

جنریک ها - Generics
منتشرشده ۰۱:۰۵:۱۵

دکوراتور ها - Decorators
منتشرشده ۰۱:۰۵:۰۲
مفاهیم اصلی Angular بصورت جامع

نصب پیشنیاز ها و ایجاد اولین پروژه
منتشرشده ۰۰:۱۷:۳۵

بروزرسانی پروژه های انگولار
منتشرشده ۰۰:۱۴:۰۸

آشنایی بیشتر با دستورات و بررسی اجمالی فایل های Config
منتشرشده ۰۰:۱۸:۳۳

آشنایی با کامپوننت app
منتشرشده ۰۰:۱۳:۳۲

ساخت اواین کامپوننت
منتشرشده ۰۰:۱۴:۲۸

اعلان کامپوننت در app.module
منتشرشده ۰۰:۰۹:۵۲

ساخت کامپوننت با Angular CLI
منتشرشده ۰۰:۱۰:۰۰

نصب Bootstrap و بررسی انواع Component Selectors
منتشرشده ۰۰:۱۴:۱۸

بررسی انواع Styles در کامپوننت ها
منتشرشده ۰۰:۰۶:۵۲

آشنایی با String Interpolation
منتشرشده ۰۰:۱۰:۵۳

آشنایی با Property Binding
منتشرشده ۰۰:۱۱:۰۲

آشنایی با Event Binding
منتشرشده ۰۰:۰۶:۵۵

آشنایی با Event Binding - قسمت ۲
منتشرشده ۰۰:۱۴:۵۹

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

آشنایی با Two-way Data binding
منتشرشده ۰۰:۰۶:۴۹

تمرین
منتشرشده ۰۰:۰۴:۱۷

حل تمرین
منتشرشده ۰۰:۰۸:۴۸

آشنایی با Directives و استفاده از ngIf
منتشرشده ۰۰:۰۸:۴۳

نحوه استفاده از ngStyle
منتشرشده ۰۰:۱۰:۵۱

نحوه استفاده از ngClass
منتشرشده ۰۰:۰۹:۰۵

استفاده از ngFor
منتشرشده ۰۰:۰۷:۴۵

تمرین دوم
منتشرشده ۰۰:۰۶:۰۸

حل تمرین
منتشرشده ۰۰:۱۶:۰۸

دریافت index مقادیر از حلقه ngFor
منتشرشده ۰۰:۰۵:۰۶

مهاجرت و بروزرسانی به نسخه ۱۴ انگولار
۰۰:۱۱:۲۲

کامپوننت بندی پروژه
منتشرشده ۰۰:۱۶:۰۵

متصل کردن مقادیر میان کامپوننت ها
منتشرشده ۰۰:۱۳:۰۳

آشنایی با Input Aliases
منتشرشده ۰۰:۰۳:۴۹

آشنایی با مفهوم EventEmitter
منتشرشده ۰۰:۰۸:۴۳

استفاده از EventEmitter و دکوراتور Output
منتشرشده ۰۰:۱۴:۰۸

تنظیم DataTypes و کامل کردن فرایند ها در EventEmitters
منتشرشده ۰۰:۰۷:۲۳

آشنایی با Output Aliases
منتشرشده ۰۰:۰۲:۵۳

آشنایی با مفهوم View Encapsulation
منتشرشده ۰۰:۰۶:۲۶

استفاده از Local Refrences
منتشرشده ۰۰:۰۶:۴۰

آشنایی و استفاده از دکوراتور ViewChild
منتشرشده ۰۰:۰۷:۲۲

آشنایی با Content Projection
منتشرشده ۰۰:۰۶:۰۵

آشنایی با چرخه حیات کامپوننت ها - Component Lifecycle
منتشرشده ۰۰:۱۲:۴۹

آشنایی با چرخه حیات کامپوننت ها - قسمت ۲
منتشرشده ۰۰:۱۷:۱۷

آشنایی با چرخه حیات کامپوننت ها - قسمت ۳
منتشرشده ۰۰:۱۶:۴۳

آشنایی با چرخه حیات کامپوننت ها - قسمت ۴
منتشرشده ۰۰:۱۶:۲۳

بررسی و یادآوری متخصر Directives
منتشرشده ۰۰:۱۷:۰۵

ساخت یک Directive سفارشی
منتشرشده ۰۰:۱۴:۰۰

آشنایی و استفاده از Renderer
منتشرشده ۰۰:۱۴:۱۲

آشنایی و استفاده از HostListener
منتشرشده ۰۰:۰۷:۲۷

آشنایی و استفاده از HostBinding
منتشرشده ۰۰:۰۶:۵۱

استفاده از Property Binding در Directive
منتشرشده ۰۰:۰۷:۴۶

آشنایی با مفهوم Structural Directive
منتشرشده ۰۰:۰۹:۱۷

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

استفاده از TemplateRef و ViewContainerRef
منتشرشده ۰۰:۱۱:۱۰

Data Binding در Structural Directives
منتشرشده ۰۰:۰۸:۴۵

Data Binding در Structural Directives - قسمت ۲
منتشرشده ۰۰:۱۱:۱۳

Data Binding در Structural Directives - قسمت ۳
منتشرشده ۰۰:۱۲:۵۶

آشنایی با ngSwitch
منتشرشده ۰۰:۰۸:۰۹

آشنایی با Services
منتشرشده ۰۰:۱۷:۵۷

دریافت داده از API با استفاده از Services
منتشرشده ۰۰:۰۵:۴۸

درک مفهوم وابستگی و Dependency Injection
منتشرشده ۰۰:۱۰:۴۵

استفاده از Hierarchical Injection
منتشرشده ۰۰:۱۹:۱۰

DI در سرویس ها
منتشرشده ۰۰:۱۳:۲۱

آشنایی با Routing
منتشرشده ۰۰:۱۳:۰۴

استفاده از RouterLink و تکمیل مسیر دهی
منتشرشده ۰۰:۰۶:۱۴

آشنایی با Wild Card Route و Redirecting Routes
منتشرشده ۰۰:۱۸:۰۷

آشنایی با Route Parameters
منتشرشده ۰۰:۱۶:۰۲

انجام Navigation با استفاده از Route Params
منتشرشده ۰۰:۱۵:۵۷

استفاده از Optional Parameters
منتشرشده ۰۰:۱۶:۱۸

آشنایی با Relative Navigation
منتشرشده ۰۰:۱۱:۰۳

آشنایی با Child Route
منتشرشده ۰۰:۱۳:۱۳

آشنایی با Observables
منتشرشده ۰۰:۲۱:۱۸

بررسی حالات Complete و Error در Observables
منتشرشده ۰۰:۱۱:۳۲

آشنایی با of و from در rxjs
منتشرشده ۰۰:۲۱:۳۳

آشنایی و نحوه استفاده از operators در Rxjs
منتشرشده ۰۰:۱۱:۲۱

انتقال داده بین کامپوننت ها با استفاده از Service
منتشرشده ۰۰:۱۳:۲۷

انتقال داده بین کامپوننت ها با استفاده از Subject
منتشرشده ۰۰:۰۸:۰۷

استفاده از unsubscribe
منتشرشده ۰۰:۰۹:۳۱

آشنایی با رویکرد های Form Handling و پیکر بندی فرم با رویکرد Template Driven
منتشرشده ۰۰:۲۴:۳۸

آشنایی با Form Statement و اعتبار سنجی ورودی ها
منتشرشده ۰۰:۲۲:۵۵

استفاده از Data Binding در Form Handling
منتشرشده ۰۰:۱۸:۲۸

دسته بندی ورودی ها با ngModelGroup و کنترل مقادیر در Radio Buttons
منتشرشده ۰۰:۱۶:۰۵

استفاده از setValue و patchValue
منتشرشده ۰۰:۱۱:۱۸

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

دریافت و نمایش داده های فرم
منتشرشده ۰۰:۱۸:۴۱

آغاز کار با Reactive Forms
منتشرشده ۰۰:۱۳:۴۵

بررسی Submit و افزودن Validator
منتشرشده ۰۰:۰۷:۲۴

دسترسی به Control و افزودن متن برای اعتبار سنجی
منتشرشده ۰۰:۰۸:۲۶

ایجاد Form Group و دسته بندی کنترل ها
منتشرشده ۰۰:۱۰:۲۵

آشنایی و استفاده از Form Array
منتشرشده ۰۰:۱۹:۱۹

تغییر و پاک کردن مقادیر پیش فرض فرم
منتشرشده ۰۰:۰۵:۱۶

آشنایی با Pipes
منتشرشده ۰۰:۱۲:۴۵

استفاده از Pipe Chaining
منتشرشده ۰۰:۰۴:۳۱

ساخت و مقدار دهی یک Custom Pipe
منتشرشده ۰۰:۱۴:۴۶

ساخت جستجو روی محصولات با استفاده از pipe
منتشرشده ۰۰:۱۳:۴۴

پارامتر دهی به Pipe و ایجاد جستجوی پویا
منتشرشده ۰۰:۱۳:۰۲

آشنایی با Pipe های Pure و Impure
منتشرشده ۰۰:۰۷:۴۹

آشنایی با Async Pipe
منتشرشده ۰۰:۰۷:۱۸

آشنایی با Http Module و ارسال درخواست از نوع Get
منتشرشده ۰۰:۱۷:۰۲

ارسال درخواست از نوع Post
منتشرشده ۰۰:۱۴:۴۰

آشنایی و استفاده از Patch و Put
منتشرشده ۰۰:۱۷:۱۵

استفاده از Delete
منتشرشده ۰۰:۰۶:۵۰

استفاده از سرویس ها در درخواست های HTTP
منتشرشده ۰۰:۱۴:۲۲

مقدمه Error Handling در HTTP Requests
منتشرشده ۰۰:۱۳:۱۹

پیاده سازی Error Handling
منتشرشده ۰۰:۰۸:۵۶

بهبود و ارتقا Error Handling
منتشرشده ۰۰:۱۱:۵۳

پیاده سازی Bad Request Error Handler
منتشرشده ۰۰:۰۴:۴۱

ایجاد یک Global Error Handler
منتشرشده ۰۰:۱۲:۱۴

ایجاد یک Error Handler Method در Post Service
منتشرشده ۰۰:۰۹:۱۶

ایجاد یک Data Service برای انجام CRUD در همه سرویس ها
منتشرشده ۰۰:۱۳:۴۱

استفاده از Map Operator
منتشرشده ۰۰:۰۶:۴۸
آشنایی با Angular Material و طراحی ظاهر پروژه Fitness Application

آشنایی با Angular Material
۰۰:۰۷:۵۶

نصب و پیکربندی Angular material در پروژه
منتشرشده ۰۰:۱۴:۳۰

بررسی Button در Material و نحوه استفاده از Material Icons
منتشرشده ۰۰:۱۳:۲۵

ایجاد کامپوننت های اصلی پروژه و ساختار اولیه فرم Signup
منتشرشده ۰۰:۱۷:۵۸

بررسی کلی Flexbox
منتشرشده ۰۰:۱۴:۱۶

ایجاد فرم Signup و استفاده از Angular Flex Layout
منتشرشده ۰۰:۱۵:۳۰

استفاده از Hint و Error و اعتبارسنجی فرم
منتشرشده ۰۰:۱۴:۱۴

افزودن Datepicker و BrowserAnimationModule
منتشرشده ۰۰:۱۶:۱۷

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

افزودن Checkbox و کامل کردن Form
منتشرشده ۰۰:۱۳:۲۳

فارسی کردن UI و افزودن تقویم شمسی
منتشرشده ۰۰:۲۲:۵۹

افزودن Sidenav و Toolbar
منتشرشده ۰۰:۱۶:۲۸

استایل دهی Toolbar و SideNav
منتشرشده ۰۰:۲۲:۴۹

افزودن ایکون های Toolbar
منتشرشده ۰۰:۰۷:۵۰

Responsive یا واکنش گرا کردن Toolbar با استفاده از Flex Layout
منتشرشده ۰۰:۱۲:۵۱

افزودن لیست به Sidenav
منتشرشده ۰۰:۰۸:۵۴

کامپوننت بندی Navigation
منتشرشده ۰۰:۱۸:۳۴

ساخت صفحه Welcome و افزودن tabs برای تمرینات
منتشرشده ۰۰:۱۷:۴۱

ساخت صفحه New Training و استفاده از Card و Dropdown
منتشرشده ۰۰:۲۰:۰۰

ایجاد spinner و شمارنده در قسمت انجام تمرین
منتشرشده ۰۰:۲۱:۲۱

افزودن Dialog Modal به قسمت تمرینات
منتشرشده ۰۰:۱۵:۵۳

افزودن قابلیت Exit و Continue به Dialog Modal
منتشرشده ۰۰:۱۶:۱۹
پروژه اول - اپ تناسب اندام (Fitness Application)
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
آشنایی با Angular Universal برای Server Side Rendering
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
انیمیشن ها در انگولار - Angular Animations
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
پروژه دوم - مینی اپ اطلاعات پرداخت
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
پروژه سوم - Todo Pro Application
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
پروژه چهارم - Movie Show App
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
آشنایی با Webassembly و زبان Rust
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
پروژه پنجم - گیم بین
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
آموزش استفاده از تکنولوژی PWA در Angular
درحال حاضر هیج بخشی برای این فصل منتشر نشده است
نقشه راه رسیدن به درآمد از محتوای دوره
درحال حاضر هیج بخشی برای این فصل منتشر نشده ا
و بدین صورت است که تعاریف ماژول‌ها در فایل app.js انجام می‌گیرد. تعاریف و پیاده سازی تمام کنترلر‌ها در فایل controller.js است. و همچنین دایرکتیوها و فیلترها و سرویس‌ها هر کدام در فایل‌ها جداگانه تعریف و پیاده سازی می‌شوند. این روش راه حلی سریع برای پروژه‌های کوچک با تعداد developer‌های کم است. برای مثال زمانی که یک developer در حال ویرایش فایل controller.js است، از آن جا که فایل مورد نظر checkout خواهد شد در نتیجه سایر developer‌ها امکان تغییر در فایل مورد نظر را نخواهند داشت. سورس فایل‌ها به مرور زیاد خواهد شد و در نتیجه debug آن سخت می‌شود.

روش دوم

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

دایرکتیو‌ها و فیلتر‌ها عموما در یک فایل قرار داده خواهند شد تا بنابر نیاز در جای مناسب رفرنس داده شوند. این روش ساختار مناسب‌تری نسبه به روش قبلی دارد اما دارای معایبی هم چون موارد زیر است:
»وابستگی بین فایل‌ها مشخص نیست در نتیجه بدون استفاده از کتابخانه هایی نظیر requireJs  با مشکل مواجه خواهید شد.
»refactoring کد‌ها تا حدودی سخت است.

روش سوم
این ساختار مناسب برای پیاده سازی پروژه‌ها به صورت ماژولار است و برای پروژه‌های بزرگ نیز بسیار مناسب است. در این حالت شما فایل‌های مربوط به هر ماژول را در دایرکتوری خاص آن قرار خواهید داد. به صورت زیر:

همان طور که ملاحظه می‌کنید سرویس ها، کنترلر‌ها و حتی مدل‌های مربوط به هر بخش در یک مسیر جداگانه قرار می‌گیرند. علاوه بر آن فایل هایی که قابلیت اشتراکی دارند در مسیری به نام common وجود دارند تا بتوان در جای مناسب برای استفاده از آن‌ها رفرنس داده شود. حتی اگر در پروژه خود فقط یک ماژول دارید باز سعی کنید از این روش برای مدیریت فایل‌های خود استفاده نمایید. اگر با ngStart آشنایی داشته باشید به احتمال زیاد با این روش بیگانه نیستید.
بررسی چند نکته درباره کد‌های مشترک
در اکثر پروژه‌های بزرگ، فایل‌ها و کد هایی وجود خواهد داشت که حالت اشتراکی بین ماژول‌ها دارند. در این روش این فایل‌ها در مسیری به نام common یا shared ذخیره می‌شوند. علاوه بر آن در Angular تکنیک هایی برای به اشتراک گذاشتن این اطلاعات وجود دارد.
»اگر ماژول‌ها وابستگی شدیدی به فایل‌ها و سورس‌های مشترک دارند باید اطمینان حاصل نمایید که این ماژولها فقط به اطلاعات مورد نیاز دسترسی دارند. این اصل interface segregation principle اصول SOLID است.
»توابعی که کاربرد زیادی دارند و اصطلاحا به عنوان Utility شناخته می‌شوند باید به rootScope$ اضافه شوند تا scope‌های وابسته نیز به آن‌ها دسترسی داشته باشند. این مورد به ویژه باعث کاهش تکرار وابستگی‌های مربوط به هر کنترلر می‌شود.
»برای جداسازی وابستگی‌های بین دو component بهتر از event‌ها استفاده نمایید. AngularJs این امکان را با استفاده از سرویس‌های on$ و emit$ و broadcast$ به راحتی میسر کرده است.

انجام پروژه angularjs

موزش یک پروژه ساده با Angular

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

در ادامه ی مقالات آموزش ساخت یک پروژه ساده با VueJS و آموزش یک پروژه ساده با React.JS در این مقاله قصد داریم یک پروژه ساده با Angular پیاده‌سازی کنیم. در مقاله ی بررسی دقیق سه فریمورک اصلی جاوااسکریپت، با فریم ورک Angular آشنایی نسبی پیدا کردید و متوجه محبوبیت این فریم ورک شدید. حالا در پایان این مقاله، شما این توانایی رو به دست خواهید آورد تا بدون هیچ آشنایی قبلی با angular ، یک اپلیکیشن ساده با این فریم ورک محبوب پیاده سازی کنید، با ساختار ابتدایی پروژه های angular آشنا شوید و همچنین با یک API به صورت ساده ارتباط برقرار کنید. دقت داشته باشید این مقاله پیش نیازهایی دارد و قصد ما آموزش جاوااسکریپت نیست. بنابراین انتظار میرود از قبل با جاوااسکریپت آشنا باشید. همچنین آشنایی با ES6 ، npm (برای آموزش به دوره ی رایگان آموزش npm در سایت سکان آکادمی مراجعه کنید) و typescript به درک بهتر این مقاله کمک میکند. البته از دستورات ساده ای استفاده خواهیم کرد و سعی میکنیم تمامی دستورات را به زبان ساده توضیح دهیم.
آماده سازی سیستم

امروزه برای هر پروژه جاوااسکریپتی، مدیریت پکیج‌ها، نیازمندی مهمی به نظر می‌آید. این کار توسط پکیج منیجرها انجام میشود. یکی از پکیج منیجرهای محبوب برای جاوااسکریپت، npm است. پس از نصب nodejs این پکیج منیجر به صورت پیشفرض روی سیستم عامل شما نصب خواهد شد. برای نصب nodejs کافیست به لینک زیر مراجعه کرده و nodejs را با توجه به سیستم عامل خود انتخاب نصب کنید:



همچنین برای نوشتن کدهای پروژه به یک ویرایشگر کد نیاز خواهید داشت. میتوانید از هر ویرایشگری که مورد علاقه شماست استفاده کنید. به عنوان یک پیشنهاد میتوانید از VS Code استفاده کنید. این ویرایشگر رایگان، سبک و دارای رابط کاربری ساده و زیبایی بوده و کدنویسی در این ادیتور بسیار آسان است. برای دانلود VS Code روی لینک زیر کلیک کنید:



بعد از نصب این ویرایشگر، وارد قسمت extensions شده و angular language service را نصب کنید. این افزونه در هنگام کدنویسی به شما کمک خواهد کرد.
ساخت پروژه

برای ساخت یک پروژه SPA (مخفف Single Page Application یا اپلیکیشن تک صفحه‌ای) از angular/cli استفاده خواهیم کرد. ابتدا باید این cli (مخفف command line interface) را بر روی سیستم عامل خود نصب کنید. برای این کار، command line خود (مثل cmd در windows) را باز کرده و دستور زیر را اجرا کنید:

npm install -g@angular/cli

در دستور بالا از npm برای نصب پکیج استفاده کردیم. دستور install ، یک پکیج را نصب میکند. فلگ g- باعث خواهد شد این پکیج به صورت global نصب شود. هنگامی که پکیجی را به صورت global نصب کنید، در هر مسیری از سیستم که باشید، به این دستور دسترسی خواهید داشت. برای توضیحات بیشتر اینجا کلیک کنید.

از این پس به دستور ng در ترمینال دسترسی خواهیم داشت. با استفاده از این دستور، میتوان یک پروژه جدید ایجاد کرد. برای این کار، ابتدا در command line وارد مسیری که قصد ایجاد پروژه در آن را دارید، شده و سپس دستور زیر را اجرا کنید:

ng new my-app

در این دستور my-app نام پروژه ما خواهد بود (میتوانید به صورت دلخواه نام پروژه را انتخاب کنید). حال چند لحظه صبر کنید تا پروژه ساخته شده و وابستگی‌ها و پکیج‌ها نیز نصب شوند. بعد از اجرای این دستور، فولدری به نام my-app (نام پروژه‌ای که ساختیم) ساخته خواهد شد. فولدر ساخته شده را در ویرایشگر کد خود باز کنید.
توجه: در زمان نوشتن این مقاله از نسخه‌ی angular 9 استفاده شده است.

ساختار پروژه

اگر نگاهی به ساختار پروژه بندازید با آیتم‌های زیادی روبرو میشوید. در ابتدا شاید گنگ به نظر برسند اما به مرور با هر یک از موارد آشنا خواهید شد. نیازی نیست در ابتدای کار از همه‌ی موارد و قابلیت‌ها استفاده کنید.
برای شروع، نگاهی به فولدر src انداخته و در این فولدر، به فولدر app نگاه کنید. این فولدر به صورت پیشفرض دارای 5 فایل خواهد بود. فایل اصلی و ورودی اپلیکیشن ما app.module.ts است. 4 فایل دیگر نیز وجود دارند که فایل‌های کامپوننت پیشفرض ساخته شده توسط انگولار هستند (نام این فایل‌ها با app شروع شده که نام کامپوننت پیشفرض ساخته شده است). اجازه دهید قبل از شروع، ابتدا با ساختار یک کامپوننت در انگولار آشنا شویم.
ساختار کامپوننت در Angular

با ایجاد هر کامپوننت در انگولار 4 فایل ساخته خواهد شد. به عنوان مثال کامپوننت پیشفرض ساخته شده به نام app را در نظر بگیرید. این کامپوننت دارای 4 فایل مجزا است:
• app.component.html: این فایل، فایل template کامپوننت است و کدهای html در این فایل قرار میگیرد.
• app.component.css: این فایل شامل کدهای CSS و استایل کامپوننت خواهد بود.
• app.component.ts: این فایل شامل کدهای جاوااسکریپت کامپوننت است.
• app.component.spec.ts: در این فایل کدهای تست کامپوننت نوشته میشود.
همچنین برای ساخت یک کامپوننت دلخواه میتوانید از دستور زیر استفاده کنید:

ng generate component

تعریف پروژه

قصد داریم اپلیکیشن ساده‌ای بسازیم که قیمت دلاری یک کالا را از ورودی دریافت کرده و با دریافت قیمت لحظه‌ای دلار و سپس ضرب با قیمت ورودی، قیمت ریالی کالا را به عنوان خروجی نمایش دهد. برای دریافت قیمت لحظه ای دلار به تومان، از API زیر استفاده خواهیم کرد:



API بالا پاسخی با فرمت JSON به صورت زیر نمایش خواهد داد:

{
  "sana": {
    "data": [
      {
        "title": "سامانه سنا دلار خرید",
        "slug": "sana_buy_usd",
        "p": 258861,
        "d": 6137,
        "dp": 2.37,
        "dt": "low",
        "h": 258861,
        "l": 258861,
        "t": "۰۹:۰۳:۰۴",
        "updated_at": "2020-09-20 09:03:04"
      }
      // more data
    ]
    // api meta data
  }
}

ساخت اپلیکیشن

بیایید برای شروع، یک استایل کلی برای پروژه در نظر بگیریم. برای قسمت بالای صفحه، یک navbar ساده در نظر میگیریم که نام پروژه در اینجا قرار میگیرد. در صفحه نیز دو label در نظر میگیریم که قیمت‌ها را نمایش خواهد داد. یکی قیمت ریالی و دیگری قیمت دلاری. در زیر این label ها نیز یک input برای دریافت قیمت از کاربر و یک button برای دریافت قیمت لحظه‌ای ارز از API معرفی شده و تبدیل قیمت‌ها در نظر میگیریم.
قبل از اینکه وارد پیاده‌سازی شویم، اجازه دهید مفهوم ماژول‌ها در انگولار رو به طور مختصر بررسی کنیم. در انگولار برای استفاده از برخی از قابلیت‌ها مثل bind کردن دو طرفه یک داده (منظور از bind کردن دو طرفه یک داده این است که با تغییر داده در قسمت کدهای جاوااسکریپت، داده در قسمت template نیز تغییر داده شود و بلعکس) در form ها ، استفاده از Restful API خارجی ، سیستم routing و تغییر کامپوننت‌ها و ... میتوانید از ماژول‌هایی که در انگولار وجود دارند استفاده کنید (همچنین میتوانید به صورت سفارشی ماژول بسازید). برای استفاده از ماژول‌ها در اپلیکیشن میتوانیم ماژول مورد نظر را import کرده و در فایل app.module.ts در قسمت imports به اپلیکیشن اضافه کنیم. به طور مثال در کد زیر از ماژول‌های BrowserModule و FormModule استفاده شده:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

کدهای HTML زیر را در app.component.html قرار دهید:

<!-- Toolbar -->
<nav class="toolbar" role="banner">
    <span>{{appName}}</span>
</nav>
 
<div class="container">
    <div class="output-container">
        <div class="rial-price-output">Price: <strong>{{rialValue}}</strong> <small> rial</small></div>
        <div class="usd-price-output">USD: <strong>{{usdValue}}</strong> <small> USD</small></div>
    </div>
    <input type="number" class="usd-price-input" [(ngModel)]="usdValueInput" placeholder="Enter USD price..." />
    <button class="btn-convert" (click)="fetchPrice()">Convert</button>
</div>

اجازه دهید چند مورد را در کدهای بالا بررسی کنیم. همانطور که میبینید در کد بالا یک HTML ساده داریم که شامل navbar ، label ها ، input و button پروژه است. تنها شاید چند مورد برای شما تازگی داشته باشه:
• اولین مورد استفاده از {{ }} است. در angular برای استفاده از متغیرهایی که در app.component.ts قرار گرفته‌اند از {{ }} استفاده میشود (که به mustache معروف است). در قسمت بالا از متغیرهای appName و rialValue و usdValue استفاده کردیم تا توسط این متغیرها، قیمت‌ها و نام اپلیکیشن را نمایش دهیم (که در app.component.ts به عنوان متغیر تعریف خواهیم کرد).
• دومین مورد bind کردن دو طرفه یک متغیر هست. در angular برای bind کردن دو طرفه یک متغیر با یک input از ngModel استفاده میکنیم (در بالا bind شدن دو طرفه متغیرها توضیح داده شد). در مثال بالا وقتی مقدار input تغییر داده شود، مقدار usdValueInput نیز تغییر خواهد کرد. از طرفی با تغییر usdValueInput مقدار input نیز تغییر میکنه. نکته ای که باید دقت کنید این است که برای استفاده از bind کردن دو طرفه، ابتدا باید ماژول FormModule را در app.module.ts وارد کنید. این ماژول را میتوانید از angular/forms@ وارد پروژه کنید (در ادامه نحوه وارد کردن این ماژول توضیح داده شده است).

• سومین مورد این است که برای استفاده از event ها (مثل onclick) در template از قرار دادن نام event مورد نظر در () استفاده میکنیم. در قسمت بالا قصد داریم هر زمان بر روی button کلیک شد، متد fetchPrice (که در ادامه تعریف خواهیم کرد) فراخوانی شود. برای اینکار از (click) استفاده کرده و متد مورد نظر را به آن اختصاص میدهیم.

بیایید ماژول FormModule را برای bind کردن دو طرفه متغیرها به پروژه اضافه کنیم. کد زیر را در فایل app.module.ts قرار دهید:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

حال برای ایجاد استایل مورد نظر، کدهای CSS زیر را در app.component.css قرار دهید:

.toolbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #1976d2;
  color: white;
  font-weight: 600;
}

.container {
  margin: 120px 75px 0 75px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rial-price-output {
  font-size: 45px;
}

.usd-price-output {
  font-size: 45px;
  margin-top: 20px;
}

.usd-price-input {
  height: 40px;
  width: 230px;
  margin-top: 50px;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px solid rgba(100, 100, 100, 0.3);
  border-radius: 5px;
  outline: none;
  font-size: 16px;

  transition: 200ms;
}

.usd-price-input:hover {
  border: 2px solid rgba(117, 177, 226, 0.4);
}

.usd-price-input:focus {
  border: 2px solid rgba(0, 86, 156, 0.4);
}

.btn-convert {
  cursor: pointer;
  margin-top: 30px;
  width: 250px;
  height: 40px;
  border-radius: 5px;
  border: 0;
  outline: 0;
  font-size: 16px;
  color: white;
  background-color: #3ba5ec;

  transition: 200ms;
}

.btn-convert:hover {
  background-color: #2a8cce;
}

.btn-convert:active {
  background-color: #176da7;
}

حالا وقت این است که منطق برنامه را بنویسیم. قطعه کد زیر را در فایل app.component.ts قرار دهید (در ادامه به توضیح این کدها خواهیم پرداخت):

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  appName = "Angular Converter";

  rialValue: number = 0;
  usdValue: number = 0;
  usdValueInput: string = "";

  fetchPrice() {
    fetch("https://api.tgju.online/v1/data/sana/json")
      .then(result => {
        return result.json();
      })
      .then(data => {
        let usdItem = data.sana.data.find(i => i.slug === 'sana_buy_usd');
        let usd = parseInt(usdItem.p);
        
        this.usdValue = usd;
        this.rialValue = (parseInt(this.usdValueInput) | 0) * usd;
      })
      .catch(err => {
        console.log(err);
      });
  }
}

قطعه کد بالا شامل یکسری متغیر برای ذخیره و نمایش داده ها و یک متد برای دریافت قیمت و تبدیل قیمت است.
برای ساخت متغیرها در کامپوننت تنها کافیست آن‌ها را به عنوان متغیر در class در نظر بگیرید. میتوانید type این متغیرها را نیز تعریف کنید (این مورد از ویژگی‌های typescript است).
در کد بالا چهار متغیر برای کامپوننت در نظر گرفته شده. appName که نام پروژه ما را در بر میگیرد و در قسمت بالای صفحه در navbar نمایش داده میشود، rialValue و usdValue برای نمایش قیمت ریالی و دلاری کالا در template و usdValueInput که برای دریافت ورودی و قرار دادن مقدار input استفاده شده است.
همچنین کامپوننت ما دارای متدی به نام fetchPrice است که این متد با استفاده از fetch ، قیمت دلار را دریافت و با ضرب در مقدار ورودی کاربر (که در متغیر usdValueInput ذخیره شده است) ، قیمت ریالی کالا را محاسبه کرده و در متغیرهای کامپوننت ذخیره میکند. با تغییر این متغیرها در قسمت script، مقدار نمایشی در قسمت template نیز تغییر میکند.
اجرای پروژه

حال برای اجرای پروژه دستور زیر را در command line وارد کنید:

ng serve -o

اگر مشکلی وجود نداشته باشد، بعد از چند لحظه پروژه ساخته شده و یک پیام نمایش داده میشود که پروژه بر روی پورت 4200 در حال اجراست (ممکن است دستور بالا طول بکشد):

اگر مرورگر خود را باز کنید میتوانید پروژه را مشاهده کنید:

ساخت پروژه

دستور بالا پروژه را در حالت development اجرا میکند. در حالت development فایل خروجی پروژه ساخته نشده و با بسته شدن command line ، اپلیکیشن از دسترس خارج خواهد شد. اگر قصد ساخت پروژه را دارید از دستور زیر استفاده کنید:

ng build

این دستور فولدری به نام dist در پروژه میسازد که شامل فایل‌های bundle شده پروژه خواهد بود.

در این مقالحتما برای شما هم سوال است که این برنامه ها چگونه قابلیت های توسعه یافته ای دارند؟ در واقع باید بدانید که بسیاری از این برنامه ها با زبان های مختلف برنامه نویسی توسعه یافته اند. از جمله پرکاربردترین زبان های برنامه نویسی می توان به زبان انگولار اشاره کرد. انجام پروژه های انگولار به شما کمک می کند تا راحت تر به توسعه وب سایت ها بپردازید.

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

انگولار نوعی زبان برنامه نویسی از جاوا اسکریپت به حساب می آید که به هدف توسعه اپلیکیشن های تک صفحه ای ایجاد شده است. این زبان برنامه نویسی دارای ویژگی ها و مزایای بسیار زیادی است و در نهایت باعث توسعه وب سایت ها می شوند.
خدمات ما در زمینه انجام پروژه های angular

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

انجام پروژه انگولار angular دانشجویی یکی از بهترین پروژه هایی است که شما می توانید با خیال راحت به موسسه ما بسپارید. به جرأت می‌توان گفت حضور متخصصان متبحر و باتجربه باعث شده است تا موسسه کارت پروژه تبدیل به یکی از بهترین و معتبرترین موسسه ها برای انجام پروژه هایی مانند انجام پروژه انگولار شود. سابقه درخشان این موسسه به تضمین وجود چنین متخصصانی است.

شما می توانید قبل از ثبت سفارش پروژه های دانشجویی انگولار ANGULAR خود از مشاوره های موثر این کارشناسان استفاده نمایید. اگر شما هم می خواهید به ثبت و سفارش پروژه ها  بپردازید با تیم پشتیبانی این مجموعه ارتباط برقرار کنید. انجام پروژه های انگولار توسط بهترین و با تجربه ترین متخصصان صورت می گیرد. قطعا خود شما با مشاهده پروژه متوجه این موضوع خواهید شد.

این موسسه با بهره مندی از نظم و برنامه ریزی بسیار دقیق موفق شده است تا کیفیت و زمان را که دو عامل بسیار ارزشمند هستند به دانشجویان هدیه دهد . خدمات موسسه ما به گونه‌ای است که شما می توانید در کمترین زمان ممکن و بالاترین کیفیت را دریافت نمایید. حتماً در انجام پروژه هایangular به تمامی موارد خواسته شده از سوی دانشجو و کارفرما اهمیت داده می شود. این موضوع خود دلیلی بر کیفیت و جزئیات کار به حساب می آید.
پشتیبانی 24 ساعته و تضمین کیفیت پروژه های انگولار شماپشتیبانی 24 ساعته و تضمین کیفیت انجام پروژه های انگولار
مراحل ثبت سفارش انجام پروژه انگولار

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

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

به همین علت قطعا در انجام پروژه های angular هم تمامی این استانداردها توسط متخصصین و کارشناسان رعایت می شود و در نهایت پروژه با کیفیت تضمین شده و کامل به شما ارائه می گردد. شما می توانید با خیالی آسوده و با اطمینان کامل به ثبت سفارش و انجام پروژه فوری دانشجویی با کدنویسی انگولار بپردازید.

اگر در شهرهای مختلف ایران زندگی می کنید باز هم می توانید انجام پروژه انگولار angular خود را به تیم موسسه کارت پروژه بسپارید در این صورت تنها کافی است پروژه مورد نظر خود را از طریق سایت این مجموعه برای ما ارسال نمایید. کارشناسان و متخصصین این موسسه در کمترین زمان ممکن پروژه مورد نظر شما را بررسی می نمایند. در مرحله بعدی زمانبندی انجام پروژه انگولار و یا دیگر پروژه ها همراه با قیمت به شما اطلاع داده خواهد شد.

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

برای اطمینان بیشتر از کیفیت کار شما می توانید در حین انجام پروژه ANGULAR انگولار اطلاعات در مورد پیشرفت پروژه از کارشناسان دریافت نمایید. زمانی که پروژه به اتمام رسید، نتایج به واسطه فیلم و یا عکس به شما اطلاع داده خواهد شد. در نهایت پس از تایید اولیه تایید نهایی برای شما عزیزان ارسال می گردد.

انجام پروژه دانشجویی انگولار  angular از مهم ترین پروژه ها برای دانشجویان به حساب می آید. نکته قابل توجه این است که شما به مدت ۷۲ ساعت زمان دارید تا به بررسی پروژه مورد نظر خود بپردازید. در صورت بروز هرگونه اصلاحیه و یا مشکلی می‌توانید درخواست بررسی مجدد نمایید.
انجام تمامی پروژه های زبان برنامه نویسی با انگولارانجام تمامی پروژه های زبان برنامه نویسی با انگولار
هزینه و تعرفه انجام پروژه های angular

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

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

خوشبختانه تا به امروز تمامی دانشجویان و کارفرمایان رضایت کافی در میزان هزینه ها در انجام پروژه ها داشته‌اند. شما هم می توانید با کمترین هزینه به انجام پروژه های انگولار بپردازید. نکته قابل توجه این است که هزینه منصفانه همراه با کیفیت بسیار بالای پروژه انگولار باعث شده است تا بسیاری از دانشجویان پروژه های مورد نظر خود را در این رابطه به موسسه ما بسپارند. انجام پروژه ANGULAR دانشجویی سریع با قیمت مناسب رضایت مندی را افزایش داده است.

بعد از اطلاعات در مورد هزینه انجام پروژه های دانشجویی با انگولار می توانید به زمانبندی انجام پروژه ها بپردازید. اگر زمان برای شما بسیار اهمیت دارد، حتما این موضوع را در هنگام ثبت سفارش انجام تمرینات دانشجویی با زبان برنامه نویسی انگولار  angular خود قید نمایید.

در این صورت کارشناسان و متخصصین با تجربه و حرفه ای کارت پروژه با در نظر گرفتن زمانبندی پروژه را در بهترین شکل ممکن و در زمان مورد نظر به شما تحویل خواهند داد. انجام پروژه های انگولار که نوع زبان برنامه نویسی به حساب می آیند، برای کارشناسان این مجموعه بسیار آسان است، زیرا آنها دارای سابقه‌ای طولانی مدت در انجام چنین پروژه هایی دارند.

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

اگر شما هم به دنبال مجموعه ای برای انجام پروژه انگولار با قیمت مناسب زمان‌بندی عالی هستید وارد سایت KARET شوید. هزینه پروژه انگولار angular دانشجویی توسط متخصصین برآورد می شود.
صفر تا صد پروژه انگولارصفر تا صد پروژه انگولار
زمان مورد نیاز انجام پروژه انگولار

قبل از شروع هر نوع پروژه ای زمانبندی انجام آن با دانشجو یا کارفرما مورد بررسی قرار می گیرد. نکته قابل توجه این است که زمان بندی هم برای کارشناسان و متخصصین کارت پروژه و هم برای دانشجویان کارفرما اهمیت دارد و ارزشمند به حساب می آید. به همین علت کارشناسان این موسسه با برنامه ریزی های دقیق به تحویل انجام پروژه هایی مانند انجام پروژه های angular می پردازند.

زمانبندی با مشورت با خود شما صورت می گیرد. به همین علت شما برای انجام پروژه انگولار در کمترین زمان ممکن می توانید بدون هیچ گونه نگرانی کار خود را به ما بسپارید. در واقع این موسسه با دارا بودن بهترین و حرفه ای ترین کارشناسان و متخصصین در حال خدمت رسانی به شما در انجام پروژه دانشجویی انگولار در سریع ترین زمان ممکن است.

تفاوتی ندارد که سفارش خود را به چه صورت ثبت نمایید. شما باید در هنگام ثبت سفارش انجام پروژه angular به زمان‌بندی مورد نظر خود اشاره نمایید. پایان پروژه شما در همان زمان بندی تعیین شده صورت می گیرد.
انجام پروژه های انگولار با حرفه ای های کارت پروژهانجام پروژه های انگولار با حرفه ای های کارت پروژه
تضمین کیفیت انجام پروژه های angular

از مهم ترین و ارزشمندترین مولفه ها هنگام ثبت سفارش پروژه انگولار و یا حتی دیگر پروژه ها تضمین کیفیت به حساب می آید. قطعاً دانشجو و کارفرما به امید دریافت پروژه با کیفیت در زمان بندی مناسب اقدام به ثبت می‌نماید. موسسه ما با دارا بودن تواناترین کارشناسان و متخصصین بهترین پروژه به همراه بالاترین کیفیت را به شما تحویل خواهند داد.

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

نکته قابل توجه این است که زمانی که شما به عنوان دانشجو و یا کارفرما در ابتدا نصف مبلغ را پرداخت می‌نمایید، خود دلیلی در تضمین و کیفیت انجام پروژه هایی مانند انجام پروژه انگولار است. در صورت بروز هر گونه سوال مشکل و یا اصلاحیه ای در پایان کار می توانید تقاضای بررسی مجدد نمایید. در این صورت کارشناسان در بررسی‌های مجدد مطلب مورد نظر شما را مورد بررسی قرار می دهند .

در پایان کار در صورت رضایت کامل مابقی مبلغ انجام پروژه angular و یا دیگر پروژه‌ها از شما دریافت می شود. انجام پروژه angular به صورت تضمینی و فوری برای دانشجویان و کارفرمایان صورت می گیرد. رضایتمندی دانشجویان قبلی می تواند خود دلیلی بر تضمین کیفیت کار در این موسسه باشد.
صفر تا صد پروژه های دانشگاهی انگولارصفر تا صد پروژه های دانشگاهی انگولار
گارانتی (تضمین) و راه های اعتماد در انجام پروژه angular انگولار

گارانتی و تضمین از جمله مهمترین عوامل برای انتخاب یک موسسه در انجام پروژه ها به حساب می آید. کارت پروژه راه های تضمین و راهکارهای اعتماد را به دانشجویان نشان داده اند. اولین اقدام این موسسه پرداخت مرحله به مرحله هزینه ها در حین انجام پروژه هایی مانند انجام پروژه انگولار است.

پرداخت مرحله ای تنها به علت افزایش اعتماد و جلب رضایت مشتری در نظر گرفته شده است. شما در ابتدا تنها نصف مبلغ را موسسه پرداخت می نمایید و در صورت تایید نهایی پروژه مابقی آن را واریز خواهید کرد.

از دیگر راهکارهای گارانتی و تضمین پروژه، پشتیبانی شبانه روزی و ۲۴ ساعته از مشتریان است. شما می‌توانید در هر ساعت از شبانه روز با تیم پشتیبانی این موسسه ارتباط برقرار کنید و از روند انجام پروژه درسی انگولار angular خود باخبر شوید. تیم پشتیبانی موظف است تا شمارا از روند انجام پروژه angular انگولار مطلع سازد. در این صورت شما می‌توانید اعتماد بیشتری به زمانبندی این موسسه و کارشناسان داشته باشید.

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

در حال حاضر پروژه های بی نهایت موفقیت در این موسسه به اتمام رسیده است که نشان از کیفیت کار و تخصص و دانش به همراه تجربه کارشناسان و برنامه ریزی دقیق در این موسسه دارد . در واقع شما با پرداخت هزینه کاملا منصفانه انجام پروژه انگولار angular خود را به بهترین شکل ممکن و تضمین شده به پایان خواهید رساند.

اگر شما هم به دنبال پروژه دانشجویی انگولار ارزان و تضمینی هستید، کارت پروژه را در ذهن خود به خاطر بسپارید. پروژه های آماده angular برای اطمینان بیشتر برای شما نمایش داده می شود.
کم ترین هزینه و بالاترین کیفیت پروژه های انگولارکم ترین هزینه و بالاترین کیفیت پروژه های انگولار
مشاره در انجام پروژه های انگولار

قطعاً اهمیت مشاوره در انجام پروژه های انگولار angular بیش از هر چیزی ارزشمند است. گاهی ممکن است در هنگام انجام پروژه انگولار با موانعی روبرو شوید و نتوانید مشکل را برطرف نمایید. در این صورت بهره‌مندی از مشاوره‌های رایگان موسسه ما می تواند بسیاری از مشکلات را در انجام پروژه های انگولار برطرف نماید.

بهترین و مناسب ترین راهکارها توسط متخصصین و کارشناسان به شما ارائه خواهد شد. به همین علت توصیه می شود حتما از مشاوره انجام پروژه های انگولار دانشجویی در موسسه ما بهره مند شوید. موسسه کارت پروژه با برنامه ریزی های دقیق و منظم شرایطی را فراهم کرده است تا دانشجویان و کارفرمایان بتوانند در هر ساعت از شبانه روز از تخصص و تجربه کارشناسان استفاده نمایند.

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

همانطور که می دانید دانشجویان دارای تجربه و تخصص کافی در زمینه انجام پروژه های مختلف مانند انجام پروژه) Angular انگولار) ندارند. به همین علت بهره گیری از مشاوره ها و یا رفع اشکال از متخصصین موسسه ما می تواند بسیار موثر باشد.

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

یافتن و پیدا کردن سایت معتبر و با کیفیت در انجام پروژه به خصوص در انجام پروژه های انگولار بسیار اهمیت دارد. به همین علت توصیه می شود پروژه های مهم مانند انجام پروژه angular خود را به تیم ما بسپارید.

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

برای اطمینان بیشتر در مورد این مجموعه می توانید به مشاهده نمونه پروژه های آماده Angular دانشجویی بپردازید. در این صورت کیفیت را تضمین شده در نظر خواهید گرفت. خوشبختانه با رضایتمندی‌های بسیار بالای دانشجویی و کارفرمایان سایت ما تبدیل به یکی از معتبرترین و شناخته‌ترین مجموعه ها در انجام پروژه های مختلف مانند انجام پروژه دانشجویی انگولار شده است.

شما هم برای ثبت سفارش پروژه های انگولار خود می توانید وارد سایت این مجموعه شوید. تمامی اطلاعات به طور طبقه بندی شده اعم از مراحل ثبت سفارش به طور کامل توضیح داده شده است. شما در کمترین زمان ممکن و معقول ترین هزینه می توانید پروژه خود را به ثبت برسانید. تمامی اطلاعات و خواسته های خود را در مراحل ثبت سفارش پروژه انگولار در سایت ثبت نمایید تا پروژه طبق خواسته شما به صورت تخصصی انجام شود.

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

شما می توانید در هر مقطعی انجام پروژه های برنامه نویسی به زبان angular انگولار خود را به موسسه ما بسپارید. انجام پروژه های کارشناسی، کارشناسی ارشد و دکترا انگولار با بهترین کیفیت برای شما صورت می‎گیرد. همانطور که می دانید ساخت پروژه دانشجویی با انگولار در مقطع دکترا نسبت به مقاطع قبلی دشوارتر است. به همین علت شما می‌توانید از تخصص کارشناسان و متخصصین این موسسه بهره مند شوید.

در مرحله اول وارد سایت موسسه کارت پروژه شوید و سپس اقدام به سفارش انجام پروژه دانشجویی با استفاده از انگولار بپردازید. در ثبت مراحل خود حتماً قید شود که پروژه به صورت ساده و یا تخصصی انجام شود. سفارش انجام پروژه های ساده انگولار برای دانشجویان قیمت بسیار مناسبی دارد. به صورتی که بسیاری از دانشجویان می توانند اقدام به ثبت سفارش و انجام پروژه angular توسط متخصصین خبره نمایند.

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

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

انجام پروژه انگولار(angular)  دانشجویی تضمینی است و مبلغ دریافتی کاملا منصفانه توسط کارشناسان برآورد شده است. انجام پروژه دانشجویی کارشناسی و کاردانی انگولار  angular تنها توسط کارشناسان همین رشته ها صورت می گیرد. به همین علت هیچ جای نگرانی از بابت کیفیت پروژه وجود ندارد.
انجام پروژه angular توسط صدها متخصص حرفه ای

همانطور که می دانید حضور متخصصین و کارشناسان خبره و حرفه ای در انجام پروژه های متفاوت در خصوص انجام پروژه های angular بسیار تاثیر گذار است. همه ما می دانیم که کیفیت به هیچ عنوان اتفاقی نیست. کارشناسان دوره دیده حرفه ای و با تجربه نقش اساسی در کیفیت اجرا و انجام پروژه ها دارند.

گاهی ممکن است یک خطای بسیار کوچک باعث افت بسیار شدید کل پروژه شود. به همین علت توصیه می‌شود پروژه های خود را مانند انجام پروژه های انگولار دانشجویی تنها به موسسه های معتبر مانند کارت پروژه بسپارید. انجام پروژه های برنامه نویسی Angular انگولار دارای حساسیت بسیار زیادی هستند.

به همین علت است که باید توسط متخصصان و کارشناسان متبحر انجام شوند. موسسه ما همواره در تلاش است تا رضایتمندی مشتریان را به طور کامل جذب نماید. ارائه خدمات عالی به همراه کیفیت کار و زمان بندی صحیح باعث شده است تا همواره دانشجویان اعتماد صددرصدی به این موسسه داشته باشند.

انجام پروژه های انگولار توسط کارشناسانی اجرا می شود که سال ها تجربه به همراه دانش فنی بالایی دارند. انجام پروژه angular (انگولار) در کارت پروژه با تضمین کیفیت بالا صورت می گیرد.
انجام تمامی پروژه های angular از صفر تا صدانجام تمامی پروژه های angular از صفر تا صد
دلایلی که ثابت می کند برای انجام پروژه دانشجویی از انگولاراستفاده کنید

    توسط شرکت گوگل پشتیبانی می شود

بهترین و خاص ترین ویژگی مثبت انجام پروژه های انگولار این است که توسط کمپانی گوگل هدایت و پشتیبانی می شود. پشتیبانی انجام پروژه های انگولار angular به صورت طولانی خواهد بود و این یک ویژگی بسیار خاص پشتیبانی انگولار است. حتی پروژه ها و برنامه های گوگل نیز از Angular  برای دستیابی به پتانسیل خود استفاده می کنند. تیم سازمان دهندگان سیستم فریم ورک به پایداری آن بسیار دلخوش هستند.                       

    عملیات تست ساده در angular

تست کردن به راحتی در انگولار صورت می گیرد. قسمت های مختلف ماژول آنگولار به راحتی می توان دست کاری کرد و این بخش ها کاربردهای فراوانی دارند. با جداسازی ماژول ها شما قادر هستید که خدمات ضروری را بارگیری کنید و در عین حال تست های خودکار را به طور موثر در انجام پروژه angular اجرا کنید.

    رابط کاربری اعلام شده در انگولار

برای تعریف کردن رابطه کاربری یک برنامه یا اپلیکیشن  آنگولار برای این کار از html کمک می گیرد. html پیچیدگی کمتری نسبت به جاوا اسکریپت دارد. html همچنین یک زبان بیانی و تصویری است. اما این ویژگی چگونه برای انجام پروژه های angularبه درد ما می خورد؟ زمانی که اپلیکیشن خود را با Angular گسترش می دهید، نیازی به صرف زمان در صفحه وب اپلیکیشن و صفحه ای که باید ابتدا بارگذاری شود، ندارید، شما نیازهای خود را تعریف می کنید و angular    خودش به آن رسیدگی می کند.

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

    زبان تایپ اسکریپت در انگولار

برنامه های Angular با استفاده از زبان TypeScript ساخته می شوند که یک نسخه فوقانی برای جاوا اسکریپت است. این زبان از انواع داده ها و رابط ها پشتیبانی می کند، بنابراین می توانید به راحتی خطاها را هنگام نوشتن یا حفظ کد موقع انجام پروژه انگولار پیدا کنید. زبان برنامه نویسی تایپ اسکریپ برخلاف زبان های CoffeeScript و Dart یک زبان مستقل شناخته نمی شود یعنی یک لایه روی زبان برنامه نویسی جاوا اسکریپ در نظر گرفته می شود.

انجام پروژه های انگولار 100 درصد تضمینی تنها در این موسسه با کیفیت بالا صورت می گیرد. تمامی موارد تخصصی در حین انجام پروژه های انگولار angular مورد بررسی قرار می گیرند.

به راحتی می توانید کدهای نوشته شده با TypeScript را در قسمت مرورگر یا ویرایشگر خود اشکال زدایی کنید. زبان برنامه نویسی تایپ اسکریپ خدماتی مانند ناوبری پیشرفته، بازسازی مجدد و تکمیل خودکار کد را ارائه می دهد. با داشتن این همه قابلیت و ویژگی به راحتی می توانید از آن استفاده کنید.

    یک الگوی MVC ساده شده

انجام پروژه های انگولار به صورت کاملا تخصصی در موسسه ما صورت می گرد. زبان برنامه نویسی انگولار به طور پیش فرض از الگوی mvc  برای خود استفاده خواهد کرد. البته این گزینه امکان دارد با استانداردهای مشخص شده هیچ وجه تمایزی نداشته باشد. اما Angular هرگز از توسعه دهندگان خود نمی خواهد که اجزای برنامه خود را به اجزای MVC جدا کنند و سپس برنامه خود را با این الگو توسعه دهند.

 Angular با کاهش کدهای اضافی، گسترش وب سایت را آسوده ترمی کند. وجود الگوی ساده mvc در فریم ورک انگولار باعث جلوگیری پیچیدگی برنامه شما شده است. دستورات حتی می توانند توسط تیم دیگر پردازش شوند زیرا بخشی از کد برنامه شما نیستند. انجام پروژه انگولار angular توسط صدها برنامه نویس سی شارپ در موسسه کارت پروژه به پایان می رسد.
پروژه های کارشناسی و کارشناسی ارشد انگولار در کارت پروژهانجام پروژه angular در تمامی مقاطع دانشگاهی
انجام پروژه های انگولار در تمامی شهرهای ایران

شما در هر نقطه از ایران که باشید می توانید انجام پروژه انگولار خود را با کیفیت بالا به موسسه ما بسپارید. در واقع ثبت پروژه دانشجویی انگولار در تهران و دیگر شهرها باعث شده است تا کار بسیار راحت تر انجام شود. موسسه کارت پروژه با طراحی سایتی منظم و دقیق ثبت سفارش پروژه برنامه نویسی انگولار angular ارزان و دیگر پروژه ها را برای کارفرمایان و دانشجویان آسان کرده است. شما می توانید در کمترین زمان ممکن سفارش خود را به طور دقیق و حرفه ای در این سایت ثبت نمایید.

 در صورت بروز هرگونه سوالی می توانید راهنمای ثبت سفارش را مطالعه نمایید و یا با شماره های تماس در سایت ارتباط برقرار کنید. تیم پشتیبانی و مشاوران حرفه ای این موسسه شما را در جهت بهبود ثبت سفارش انجام پروژه های برنامه نویسی انگولار angular راهنمایی خواهند کرد.

 پس از ثبت پروژه ۷۲ ساعت زمان دارید تا به بررسی دقیق آن بپردازید. در صورت بروز هرگونه سوال و یا اصلاحیه می توانید با کارشناسان این مجموعه تماس بگیرید و درخواست بررسی مجدد نمایید. قطعاً تمامی اصلاحیه ها مطابق با نظر شما اجرا خواهد شد. البته باید بدانید که معمولاً پروژه ها به طور کاملا دقیق و حرفه‌ای انجام می شود نیاز به اصلاحیه ندارند.ه


انجام پروژه Angular (انگولار)

موسسه همیارپروژه با داشتن ده ها مجری متخصص در حوزه انجام پروژه های انگولار آماده است تا پروژه های شما عزیزان را با کیفیتی عالی انجام دهد.جهت سفارش پروژه انگولار با شماره
۲۰ فصل
۲۳۰ جلسه
۳۷ ساعت
۱
فصل اول – Understanding Angular Template Syntax
۱۶ قسمت
۰۱:۴۵:۲۴
قسمت اول - Project Overview
رایگان
۰۳:۰۹

قسمت دوم - New Project - Stop - Start
رایگان
۱۲:۵۹

قسمت سوم - update app component HTML
۰۶:۴۱

قسمت چهارم - Event Binding
۰۵:۴۷

قسمت پنجم - Property Binding
۰۵:۴۳
قسمت ششم - Interpolation
۰۵:۱۹

قسمت هفتم - Handle Checkboxs
۰۸:۲۵
قسمت هشتم - Handle input text
۰۹:۵۲

قسمت نهم - what $event
۰۳:۵۵

قسمت دهم - generatePassword
۱۱:۱۶

قسمت یازدهم - angular Compiler Options
۰۴:۱۵

قسمت دوازدهم - Review on Property Binding
۰۶:۴۷

قسمت سیزدهم - Adding Third Party CSS
۰۳:۵۰

قسمت چهاردهم - Adding Some Styling
۰۹:۲۷

قسمت پانزدهم - Structural Directives
۰۴:۴۶
قسمت شانزدهم - Review
۰۳:۱۳
۲
فصل دوم – Building Components
۱۲ قسمت
۰۱:۲۲:۳۲
۳
فصل سوم – Exercise! Building a Typing Game
۷ قسمت
۰۱:۰۱:۴۰
۴
فصل چهارم – Mastering Pipes
۱۱ قسمت
۰۱:۲۰:۴۰
۵
فصل پنجم – Directives in Angular
۱۹ قسمت
۰۲:۳۲:۱۱
۶
فصل ششم – The Module System
۵ قسمت
۰۰:۴۲:۵۳
۷
فصل هفتم – Routing and Navigation between Pages
۷ قسمت
۰۱:۰۰:۰۹
۸
فصل هشتم – Lazy Loading with Modules
۹ قسمت
۰۱:۴۰:۳۸
۹
فصل نهم – Advanced Component Routing
۷ قسمت
۰۱:۲۱:۵۹
۱۰
فصل دهم – Advanced Component Reusability + Hooks
۱۳ قسمت

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

۰۲:۰۷:۴۵
۱۱
فصل یازدهم – TypeScript Overview
۱۳ قسمت
۰۱:۴۷:۴۷
۱۲
فصل دوازدهم – Handling Data and HTTP Requests
۱۰ قسمت
۰۱:۳۹:۳۱
۱۳
فصل سیزدهم – RxJs from the Fundamentals
۱۳ قسمت
۰۲:۱۴:۳۳
۱۴
فصل چهاردهم – Credit Card Payments with Reactive Forms
۱۰ قسمت
۰۱:۳۹:۰۷
۱۵
فصل پانزدهم – Simple Data Entry with Template Forms
۵ قسمت
۰۰:۵۳:۲۳
۱۶
فصل شانزدهم- Build a Fast-Paced Math Game
۱۰ قسمت
۰۱:۴۹:۴۰
۱۷
فصل هفدهم – Custom Validators
۱۱ قسمت
۰۲:۰۷:۳۴
۱۸
فصل هجدهم- Handling Authentication
۱۳ قسمت
۰۲:۱۱:۴۸
۱۹
فصل نوزدهم – More on Angular App Security
۲۱ قسمت
۰۳:۴۸:۴۶
۲۰
فصل بیستم – Landing Page
۱۸ قسمت
۰۳:۳۲:۳۱

جاوا اسکریت(JavaScript) یکی از زبان های برنامه نویسی در بستر وب است که تونایی تغییر کد های CSS و HTML را دارد. این کدها، کاملا استاتیک بوده برای افزودن پویایی به آن می توان از جاوا اسکریپت بهره برد. جاوا اسکریپت فریم ورک های متفاوتی دارد که یکی از آنان فریم ورک آنگولار است. انگولار (Angular) یا انگولار جی اس(Angular JS) است که حیطه فعالیت آن وب است. در این دوره به بررسی آنگولار 12 پرداخته شده است.
جاوا اسکریپت

برای آَشنایی با آنگولار ابتدا باید بدانید جاوا اسکریپت چیست؟ جاوا اسکریپت یک زبان سطح بالا با کمپایل درجا و چند الگویی است. جاوا اسکریپت از لحاظ ساخت مشابه زبان های برنامه نویسی سی و سی پلاس است که برای یادگیری آسان تعبیه شده اند. در برنامه نویسی به این زبان، متدها و ویژگی های پویا به اشیا خالی، اشیا فعال ساخته می شوند.
نکته
پشنهاد دوره مکمل: بسته طلایی آموزش برنامه نویسی با جاوا اسکریپت
آنگولار

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

این دوره به صورت پروژه محور بوده و با بیانی ساده از صفر تا صد آنگولار توضیح داده خواهد شد.
این دوره برای چه افرادی مناسب می باشد؟
این دوره برای تمام افرادی که می خواهند بعنوان یک فرانت اند کار حرفه ای مشغول به کار شوند مناسب می باشد و از آنجایی دوره از صفر تا صد می باشد، برای یادگیری آنگولار همین یک دوره کافی است.
این دوره برای چه افرادی مناسب می باشد؟

این دوره برای تمام افرادی که می خواهند به عنوان یک فرانت اند کار حرفه ای مشغول به کار شوند مناسب می باشد و از آنجایی دوره از صفر تا صد می باشد، برای یادگیری آنگولار همین یک دوره کافی است.
نکته
همچنین بخوانید:آموزش طراحی فروشگاه اینترنتی با ASP.NET WEB API & ANGULAR

ویژگی آموزش آنگولار چیست ؟

ویژگی مهم و بارز این دوره نسبت به سایر دوره های مشابه در سرتاسر وب اسن است که این دوره به صورت پروژه محور می باشد و در هر فصل آن، یک پروژه جدید آموزش داده می شود تا کاربر بهتر در مسیر یادگیری قرار بگیرد و از آموخته های خود در حیطه عمل آشنا شود. با این موضوع فرد با نقاط ضعف و قوت خود بهتر آشنا شده و به بهترین نحو از این دوره استفاده می نمایید.
پیش نیاز دوره آموزش انگولار چیست ؟

برای گذراندن دوره آنگولار ۱۲ شما باید موضواعت زیر را بدانید.
• آشنایی مقدماتی با Html و CSS
• آشنایی مقدماتی با جاوا اسکریپت
• آشنایی مقدماتی با تایپ اسکریپت (در طول دوره آموزش داده می شود)
بعد از این دوره کاربر چه توانایی دارد؟

بعد از گذراندن این دوره کاربر می تواند یک پروژه Angular به همراه یک backend web api تعریف کرده و آن را به صورت کامل انجام دهد.
کاربرد این دوره چیست؟

دوره آموزش انگولار بسیار کامل میباشد در آخرین فصل یک پروژه mail کار میکنیم که بسیار بزرگ میباشد و کاربر میتواند جز روزمه خودش قرار بده و اینکه بعد از گذراندن این دوره میتواند میتواند وارد بازار کار شود.
فرصت های شغلی این آموزش جیست؟

فرصت های شغلی هم که الان بیشتر شرکت ها نیاز به frontend کار angular دارند که از نظر من این دوره کاملا کفایت میکند.
در این دوره کدام نسخه از Angular آموزش داده می شود؟
در این آموزش، آنگولار نسخه ۱۲ به کاربران آموزش داده خواهد شد.
در این آموزش از چه نرم افزارهایی استفاده می شود؟

• Vscode

برای دانلود اینجا کلیک کنید.

این دوره از سطح مبتدی شروع شده و تا سطح پیشرفته آموزش داده خواهد شد .
• در این دوره با RxJs , type Script نیز آشنا خواهیم شد .
در این آموزش انگولار سعی خواهیم کرد تمام پروژه ها را به GitHub منتقل کنیم و در طول پروژه حتما نرم افزارهایی ا
۱ فصل
۲۲ جلسه
۷ ساعت
۱
لیست ویدئوهای دوره
۲۲ قسمت
۰۷:۰۸:۴۸

قسمت یک - مقدمه
رایگان
۱۰:۴۲

قسمت دو - Model Binding
۳۵:۰۷

قسمت سه - Bind Template
۰۶:۰۵

قسمت چهار - ng Controller
۱۵:۳۲

قسمت پنج - ng Controller
۱۰:۳۵

قسمت شش - ng Show و ng Hide
۲۱:۳۶

قسمت هفت - ng Click
۱۶:۳۳

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

قسمت هشت - ng Change
۱۲:۲۴

قسمت نه - ng Checked
رایگان
۰۹:۲۶

قسمت ده - ng Disabled
۱۰:۳۹

قسمت یازده - ng Src
۱۱:۲۸

قسمت دوازده - ng Style
۱۱:۳۹

قسمت سیزده - ng Class
۱۰:۲۹

قسمت چهارده - ng Submit
۱۲:۰۰

قسمت پانزده - Validation
۱۷:۰۶

قسمت شانزده - Validation
۴۴:۴۵

قسمت هفده - Filter
۱۵:۳۴

قسمت هجده - ng Repeat
۲۹:۵۰

قسمت نوزده - Filter Json LimitTo
۱۲:۱۹

قسمت بیست - Ajax
۲۹:۵۶

قسمت بیست و یک - Ajax
۳۶:۲۴

قسمت بیست و دو - Ajax
رایگان
۴۸:۳۹

سورس

به نام خدا

با عرض سلام و ادب و احترام به شما کاربران دانشجویار عزیز

فرا رسیدن ولادت حضرت امام سجاد (ع) رو به شما کاربران و مدرسین عزیز تبریک و تهنیت عرض می کنم

خوب در خدمت شما دوستان عزیز هستیم با یکی دیگه از دوره های اموزشی مدرن تحت عنوان :
دوره اموزشی برنامه نویسی مدرن با فریمورک AngularJS در قالب پروژه کاربردی

در این دوره اموزشی ما تقریبا تمام ایتم ها و دایرکتیوهای AngularJS رو مورد بحث  آموزش و پیاده سازی کردیم

یکی از ویژگیهای خاص این دوره این هست که شما در هر زبان برنامه نویسی وب از جمله Asp , php و … که کار میکنید میتونید از این دوره استفاده لازم رو ببرید و از AngularJS در پروژه های خودتون پیاده سازی کنید

بیایید وارد دنیای AngularJS شویم تا ببینیم چیست و چه می کند.

معرفی AngularJS

AngularJS یک فریم ورک JavaScript است که توسط کمپانی گوگل طراحی و توسعه داده شده است و توسط گوگل نیز پشتیبانی میگردد. این فریم ورک در ماههای اخیر توجه توسعه دهندگان وب را به خود جلب کرده و هم اکنون تعداد بسیار زیادی از توسعه دهندگان و برنامه نویسان وب در حال استفاده از آن میباشند که این باعث رشد چشمگیر گروه های کاربرانی در اینترنت شده است که نه تنها به این فریم ورک عشق می ورزند بلکه مکررا به تحسین و تمجید از آن می پردازند.دلیل این اتفاق بسیار ساده است . AngularJS واقعا توانمند و کم نظیر است !!!اگر پیش زمینه استفاده از jQuery داشته باشید و شروع به یادگیری Angular کنید این فریم ورک شما را متعجب خواهد نمود. عملیاتهایی که شما تنها با چند خط می توانید با Angular انجام دهید واقعا شگفت انگیز است.ممکن است شما انتشار jQuery را در سال ۲۰۰۶ به خاطر داشته باشید.برنامه نویسان وب برای ساده ترین کارها مجبور به نوشتن صدها و یا هزاران خط کد Javascript بودند.jQuery این وضعیت اسفبار را با ابزار هایی مانند Selector ها ، رویداد های سفارشی و انیمیشن ها تغییر داد.

چرا AngularJS ؟

Misko Hevery از گوگل ، خالق یا به قول خودشون پدر AngularJs (انگیولر جی اس) یکی از مشهور ترین و بهترین فریم ورک های جاواسکریپت است . AngularJs می تونه برای اپلیکیشن های تک صفحه ی ( single-page-applications = SPA ) گزینه ی خیلی خوبی باشه ، خیلی خوب که چه عرض کنم می تونه بهترین گزینتون باشه .

مزیت Angular نسبت به سایر فریم ورک های جاوا اسکریپت رقیب چیست؟

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

فریم ورک Angular , دارای ویژگی های هوشمندانه ای مانند data binding دو طرفه، توانایی ایجاد تگ/ ویژگی/ کامنت های HTML دلخواه که کارایی را کپسوله می کنند و دستورهای تو کار که کارایی HTML نرمال را توسعه می دهد، می باشد. فریم ورک جاوا اسکریپت  بسیار چند بعدی و همه گیر می باشد. می توان از آن در پروژه اپلیکیشن های تک صفحه ای بزرگ یا در المان های بسیار کوچک نیز استفاده کرد. نیاز به تنظیمات زیادی برای شروع استفاده از دستور های آماده ی AngularJS نیست.

نواقص فریم ورک Angular چیست؟

بزرگترین نقص فریم ورک این است که راه های بسیاری برای انجام یک کار وجود دارد. وقتی که شما از Angular برای پروژه های نسبتا بزرگ استفاده کنید می کنید، یافتن بهترین راه برای انجام کارها بسیار دشوار خواهد بود. همچنین باید بسیار مراقب باشید که اگر از رویداد ها و المان های DOM به روشی غیر استفاده می کنید، آنها را پاکسازی کنید تا دچار memory leak (نشت حافظه) نشویتماس بگیرید و یا به آیدی تلگرامی @fnalk پیام دهید.
معرفی نرم افزار Angular:

انگولار،نام فریمورک محبوبی است که تحت جاوا اسکریپت در حال فعالیت است و بیشتر در حوزه وب کاربرد دارد.انگولار یک چهارچوب وب‌ اپلیکیشن متن باز است
خدمات مشابه همیارپروژه:

انجام پروژه های هوش مصنوعی

پیاده سازی مقاله با دیتای eeg

انجام پروژه kaggle

انجام پروژه های PSO

انجام پروژه های پردازش سیگنال با پایتون
انجام پروژه های کمک آموزشی Angular:

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

چرا پروژه های Angular خود را به همیارپروژه بسپاریم؟

گروه همیارپروژه با داشتن تجربه ای ۸ ساله در انجام پروژه های انگولار و داشتن متخصصینی از بهترین دانشگاه های کشور و انجام صدها پروژه کوچک و بزرگ صنعتی مطمئن ترین گزینه برای انجام پروژه انگولار شما عزیزان می باشد. یکبار ما را امتحان کنید!
زمان و کیفیت انجام پروژه Angular به چه صورت خواهد بود؟

انجام پروژه های انگولار در همیارپروژه طبق زمان درخواستی یتنظیم میگردد، اما سعی می شود که در کمترین زمان ممکن تحویل داده شود. کیفیت در انجام پروژه های انگولار از اصلی ترین اهداف گروه همیار پروژه می باشد. بالاترین کیفیت در پروژه همواره هدف همیارپروژه بوده است.
مراحل انجام پروژه های Angular در همیارپروژه به چه صورت خواهد بود؟

    ارسال پروژه انگولار برای ما توسط مسیرهای ذکر شده در سایت.
    ارسال پروژه شما توسط ما برای مجریان مرتبط با پروژه.
    پیشنهاد و تعیین بهترین قیمت و زمان .
    درصورت موافقت شما اخذ نصف هزینه ابتدای کار از شما.
    در جریان گذاشتن شما طی مراحل انجام پروژه تان.
    ارسال نتایج برای شما پس از پایان پروژه تان از طریق فیلم و عکس.
    اخذ مابقی هزینه از شما درصورت تاییدتان.
    ارسال فایل نهایی پروژه برای شما.
    مهلت ۷۲ ساعته برای شما جهت بررسی پروژه و در صورت اشکال و ایراد، اطلاع به ما جهت رفع آن.

نمونه پروژه های آماده Angular:

موسسه همیارپروژه تاکنون ده ها پروژه انگولار را انجام داده است و برخی از آنها را در سایت بعنوان پروژه آماده انگولار بارگزاری نموده است که شما عزیزان میتوانید در لینک روبرو آنها را مشاهده نمایید: پروژه های آماده انگولار
نحوه سفارش پروژه Angular:

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

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

azsoft.ir

09367292276
[e-mail]
azsoft.ir
09367292276
09367292276
[e-mail]

 سعی کردیم یک اپلیکیشن خیلی ساده با angular بسازیم. میتوانید اپلیکیشن‌های بسیار قدرتمندتری با angular بسازید. برای تمرین بیشتر، سعی کنید قابلیت‌های بیشتری به اپلیکیشنی که ساختیم اضافه کنید. همچنین برای