آموزش انگولار جی اس (AngularJS)

دسته بندی: آموزش طراحی وب

آموزش انگولار جی اس

آنچه در این صفحه می خوانید :

انگولار جی اس (AngularJS) چیست؟

انگولار جی اس یک فریمورک محبوب جاوااسکریپت می باشد که توسط گوگل توسعه داده شده است. با انگولار شما قادر به ساخت برنامه های تک صفحه ای (Single Page) هستید. فریمورک انگولار به خوبی معماری MVC را در سمت کلاینت (کاربر) پیاده سازی می کند. انگولار از اچ تی ام ال، سی اس اس (Css) و جاوااسکریپت استفاده می کند و تقریبا می توان گفت که نقص های آن ها را برطرف می کند. AngularJS بخش فرانت اند از تکنولوژی MEAN-Stack است که متشکل از پایگاه داده، مانگو دی بی، اکسپرس جی اس، نود جی اس و خود انگولار جی اس می باشد.

فریمورک AngularJS با خواندن صفحه اول HTML کار می کند، که دارای خصوصیات اضافی HTML می باشد که در آن تعبیه شده است. AngularJS بر این عقیده ساخته شده است که برای ایجاد رابط کاربری و اتصال به مؤلفه های نرم افزار، باید از برنامه نویسی اعلانی استفاده شود، در حالی که برنامه نویسی ضروری بهتر برای تعریف منطق کاری برنامه مناسب است. این فریمورک، HTML سنتی را برای ارائه محتوای پویا از طریق اتصال داده دو طرفه که امکان همگام سازی خودکار مدل ها و نماها را فراهم می کند، سازگار و گسترش می دهد. در نتیجه، AngularJS با تأکید بر دستکاری صریح مدل شی اسناد (DOM) با هدف بهبود قابلیت تست و عملکرد تأکید می کند.

اهداف طراحی AngularJS شامل موارد زیر است:

  • برای جدا کردن DOM از منطق برنامه. مشکل این امر به طرز چشمگیری تحت تأثیر سینتکس ساخت کد قرار می گیرد.
  • برای جدا کردن سمت کلاینت برنامه از سمت سرور. این امر به پیشرفت موازی کارها کمک می کند و امکان استفاده مجدد از هر دو طرف را فراهم می آورد.
  • ارائه ساختار برای سفر در ساختن برنامه: از طراحی UI، از طریق نوشتن منطق کسب و کار، تا آزمایش.

AngularJS الگوی MVC را برای ارائه جداگانه، داده ها و اجزای منطق پیاده سازی می کند. با استفاده از تزریق وابستگی، Angular به طور سنتی سرویس های سمت سرور، مانند کنترل کننده های وابسته به View را به برنامه های وب سمت کلاینت ارائه می دهد. در نتیجه می توان بخش زیادی از بار سرور را کاهش داد.

با توجه به سرویس تجزیه و تحلیل جاوا اسکریپت (Libscore)، انگولار جی اس در وب سایت های Wolfram Alpha ،NBC ،Walgreens ،Intel ،Sprint ،ABC News و بسیاری سایت های دیگر مورد استفاده قرار می گیرد.

تاریخچه انگولار جی اس (AngularJS)

AngularJS در ابتدا در سال 2009 توسط Misko Hevery در Brat Tech LLC توسعه یافت. قبل از اینکه تصمیم به ترک ایده کسب و کار و انتشار Angular به عنوان کتابخانه اوپن سورس پیدا کنند، سرمایه گذاری در دامنه وب GetAngular.com قرار گرفت. نسخه 1.6 بسیاری از مفاهیم Angular را به AngularJS، از جمله مفهوم معماری نرم افزار Component-based اضافه کرد. در ژانویه 2018 اعلام شد پس از انتشار نسخه 1.7.0 توسعه فعال AngularJS تا 30 ژوئن 2018 ادامه خواهد یافت و بعد از آن تا 30 ژوئن 2021 به عنوان پشتیبانی بلند مدت پشتیبانی خواهد شد.

ویژگی های انگولار جی اس (AngularJS)

آموزش کاربردی انگولار جی اس

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

فریمورک MVC

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

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

رابط کاربری HTML

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

دایرکتیو ها (Directives)

Angular با استفاده از دایرکتیو ها (Directives) کارایی مضاعف را فراهم می کند. عناصر اضافی موجود در سیستم بدون نیاز به DOM برای شبیه سازی عناصر اضافی در دسترس است. کنترل کننده نیازی به دستکاری مستقیم DOM ندارد، زیرا این کار باید از طریق داریکتیو انجام شود. داریکتیو ها قسمت جداگانه ای از عناصر را تشکیل می دهند که می توانند در هر مکانی غیر از برنامه وب استفاده شوند.

فیلتر ها

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

امکانات تست واحد

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

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

الگو ها

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

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

چرا باید از انگولار جی اس (AngularJS) استفاده کنیم؟

آموزش کامل انگولار جی اس

AngularJS یک فریمورک JavaScript اوپن سورس است. هدف آن تقویت برنامه های مبتنی بر مرورگر با قابلیت (MVC) و کاهش میزان کد جاوا اسکریپت مورد نیاز برای کاربردهای برنامه های وب است. این نوع برنامه ها به عنوان برنامه های تک صفحه ای نیز شناخته می شوند.

  • Angular JS Framework توسط GoogleAngular توسعه یافته است که توسط مهندسین گوگل ساخته و نگهداری می شود.

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

این اولین تلاش Google برای فریمورک JavaScript نیست؛ آنها ابتدا جعبه ابزار جامع وب خود را که کاملاً جاوا را به JavaScript کامپایل می کند، توسعه دادند و توسط تیم Google Wave به طور گسترده مورد استفاده قرار گرفتند. با ظهور HTML5، CSS3 و JavaScript، به عنوان هر دو زبان فرانت اند و بک اند، گوگل فهمید که قرار نیست وب فقط در جاوا نوشته شود.

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

  • معماری MVVM

اقدامات بسیار خطرناک به سرعت به استانداردی برای برقراری ارتباط از سرور به کلاینت تبدیل می شوند. در یک خط از JavaScript، می توانید به سرعت با سرور صحبت کنید و داده های مورد نیاز برای تعامل با صفحات وب خود را بدست آورید. AngularJS با رعایت الگوی MVVM (Model View View-Model) این حالت را به یک شیء ساده JavaScript تبدیل می کند.

مدل ها با اشیاء ViewModel صحبت می کنند (از طریق شی به نام $ Object $)، که تغییرات در مدل ها را گوش می دهند. سپس این ها توسط Views (HTML) که کد شما را بیان می کند، ارسال و ارائه می شوند. بازدیدها را می توان با استفاده از شی $ pathProvider مسیریابی کرد، بنابراین می توانید ویو و کنترل خود را به صورت عمیق پیوند داده و سازماندهی کرد و آن ها را به URL های قابل پیمایش تبدیل کنید.

  • دیتا بایندینگ و تزریق وابستگی

هر چیزی که در الگوی MVVM باشد، هر زمان که تغییر کند، به طور خودکار از طریق UI برقرار می شود. این امر نیاز به لفاف، گیرنده / تنظیم کننده یا اعلامیه های کلاس را برطرف می کند. AngularJS همه این موارد را کنترل می کند، بنابراین می توانید داده های خود را به سادگی با JavaScript اولیه، مانند آرایه ها، یا به همان اندازه دلخواه، از طریق انواع دلخواه بیان کنید. از آنجا که همه چیز به طور خودکار اتفاق می افتد، می توانید وابستگی های خود را به عنوان پارامتر در توابع خدمات AngularJS بخواهید، نه یک تماس اصلی () بزرگ برای اجرای کد خود.

  • HTML را توسعه می دهد.

بیشتر وب سایت هایی که امروزه ساخته شده اند، مجموعه عظیمی از برچسب های <div> با وضوح معنایی اندکی هستند. برای بیان قصد هر شیء در DOM باید کلاس های CSS گسترده و جامع ایجاد کنید. با استفاده از Angular، می توانید HTML خود را مانند XML کار کنید و به شما امکاناتی بی پایان برای برچسب ها و ویژگی ها می دهد. Angular این کار را از طریق کامپایلر HTML و استفاده از دستورالعمل ها برای ایجاد رفتارهای مبتنی بر سینتکس تازه ایجاد شده توسط شما انجام می دهد.

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

  • رابط کاربری اعلانی

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

همچنین از HTML برای تعیین اجرای برنامه استفاده می شود. ویژگی های خاص در HTML تعیین می کند که کنترلرها برای هر عنصر از چه مواردی استفاده کنند. رویکرد اعلانی توسعه برنامه را به نوعی از WYSIWYG (آنچه می بینید همان چیزی است که می گیرید) به راحتی ساده می کند. شما به جای وقت گذاشتن در نحوه جریان برنامه و دانلود آن، به سادگی آنچه را که می خواهید تعریف می کنید و Angular از وابستگی ها مراقبت می کند.

  • انعطاف پذیری با فیلترها

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

  • نوشتن کد کمتر

تمام نکات تاکنون بدان معنی است که شما مجبور به نوشتن کد کمتری هستید. لازم نیست خط ارتباطی MVC خود را بنویسید. ویو با استفاده از HTML تعریف می شود، که مختصر تر است. نوشتن مدل های داده ساده تر بدون دریافت کننده / تنظیم کننده است. اتصال داده به این معنی است که لازم نیست داده را به صورت دستی وارد کنید. از آنجا که داریکتیو ها از کد برنامه جدا هستند، می توان آنها را به صورت موازی با موارد ادغام حداقل توسط تیم دیگری نوشت.

  • تست واحد

بدون صحبت در مورد آمادگی تست واحد، چه توصیفی از Angular کامل خواهد بود؟ کل Angular توسط Dependency Injection (DI) با هم مرتبط شده است. این همان چیزی است که از آن برای مدیریت کنترل کننده ها و دامنه های شما استفاده می کند. از آنجا که کلیه کنترل کننده های شما برای انتقال اطلاعات به DI وابسته هستند، تست های واحد Angular قادر به تست دیسک واحد با تزریق داده ها به کنترلر شما و اندازه گیری خروجی و رفتار هستند. در واقع، Angular از قبل یک ارائه دهنده HTTP برای تزریق پاسخ های سرورهای جعلی به کنترلرها دارد.

مزایای انگولار جی اس (AngularJS)

در همه سیستم عامل ها توسعه دهید.

 

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

 

سرعت و عملکرد

انگولار توسط Web Platform به حداکثر سرعت ممکن رسیده و آن را از طریق Web Workers و ارائه سمت سرور سریع تر می کند. Angular به شما را در کنترل مقیاس پذیری کمک می کند. با ساختن مدل های داده در RxJS، Immutable.js یا مدل های دیگر، نیازهای عظیم داده را برآورده کنید.

ابزار باورنکردنی

با الگوهای ساده و اعلانی به سرعت ویژگی ها را بسازید. زبان الگو را با کامپوننت ها گسترش دهید و از مجموعه وسیعی از مولفه های موجود استفاده کنید. تقریباً با هر IDE و ویرایشگر از Help و Feedback ویژه Angular بهره مند شوید. همه اینها در کنار هم قرار می گیرند تا بتوانید به جای تلاش روی کارایی کد، روی ساخت برنامه های شگفت انگیز تمرکز کنید.

تفاوت بین انگولار (Angular) و انگولار جی اس (Angular JS) چیست؟

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

علاوه بر این، AngularJS دستورالعمل هایی دارد که به ما اجازه می دهد تا کدهای جدا شده و قابل استفاده مجدد بیشتری نسبت به گذشته ایجاد کنیم. به طور کلی، این امکان را برای ما فراهم می کند که برنامه نویسان، برنامه هایی را در معماری MVC یا MVVM (که بعضاً معماری MVW نامیده می شوند (Model-View-What)) به روشی ساده تر بنویسیم و به دلیل تزریق وابستگی، یک قدم به جلو در آزمایش برنامه های فرانت اند ساخته است.

با گذشت زمان پشتیبانی بسیاری از توسعه دهندگان را بدست آورده است. آنها بسته های مفید زیادی ایجاد کرده اند که باعث می شود کدگذاری حتی سریعتر انجام شود. موارد بیشتر و بیشتر به هسته اضافه شد، بنابراین تیم Angular تصمیم گرفت فریمورکی کاملاً جدید ایجاد کند. در ابتدا، فریمورک جدید به نام Angular 2. نامگذاری شده است. بعضی اوقات ممکن است باعث ایجاد فراموشی شود، زیرا با گذشت زمان، نسخه بتا به Angular تغییر نام داد. حال، هنگامی که افراد می خواهند برخی از قسمت های AngularJS را پیدا کنند، ممکن است مواردی را پیدا کنند که با Angular 2 یا بالاتر ارتباط دارند. بالاتر، زیرا Angular 4 در دسامبر سال 2016 اعلام شد. سازندگان عمدا شماره 3 را رد کردند تا به دلیل سوء استفاده از نسخه بسته روتر، که قبلاً توزیع شده بود، دچار سردرگمی نشوند.

کنترلر ها در مقابل کامپوننت ها

بنابراین تفاوت بین AngularJS و Angular چیست؟ اول از همه، Angular مبتنی بر تایپ اسکریپت است در حالی که AngularJS مبتنی بر JavaScript است. TypeScript یک مجموعه از ES6 است و با ES5 به قبل سازگار است. Angular همچنین دارای مزایای ES6 مانند: اپراتورهای لامبدا، تکرار شونده یا مکانیسم بازتاب است. AngularJS از اصطلاحات دامنه و کنترلر استفاده می کند. برای دامنه متغیر می توانید متغیرهای زیادی را اضافه کنید که در View و Controller قابل مشاهده خواهند بود. AngularJS همچنین مفهومی از rootScope دارد. متغیرهای موجود در rootScope در کل برنامه در دسترس هستند. انگولار مفهومی از دامنه یا کنترل کننده ها ندارد. به جای آنها، از سلسله مراتب اجزا به عنوان مفهوم اصلی معماری خود استفاده می کند.

تفاوت در موتور تمپلیت

AngularJS دستورالعمل های زیادی دارد و هر توسعه دهنده نیز می تواند داریکتیو جدید دلخواه را تعیین کند. Angular همچنین دارای دستورالعمل های استاندارد است، اما از آنها به روش کمی متفاوت استفاده می شود. به عنوان مثال، ng-model در AngularJS بدان معنی است که شما می خواهید اتصال دو طرفه ایجاد کنید. اگر می خواهید یک اتصال یک طرفه ایجاد کنید، باید از ng-bind استفاده کنید. انگولار فقط ngModel اتفاق می افتد، اما اگر آن را فقط در این قسمت بنویسید: "[]"،اتصال یک طرفه خواهد بود. اگر می خواهید اتصال دو طرفه ایجاد کنید، باید آن را در این قسمت بنویسید: "[()". ما باید این را بنویسیم به این دلیل که "[]" به ویژگی (property) اتصال داده می شود و "()" برای ایجاد استفاده می شود. در Angular، برخی از دستورالعمل ها نام خود را مانند ng-rep را به ngFor تغییر داده اند.

چه چیز دیگری تغییر کرده است؟

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

مقایسه انگولار جی اس (AngularJS) با ری اکت (React)

انتخاب فریمورک مناسب برای سیستم، برنامه یا وب سایت جدید جاوا اسکریپت اولویت اصلی برای هر مشاغل است. این می تواند تأثیر مستقیمی بر دوام و توانایی پروژه در مهلت های مقرر، حفظ بیشتر کد و قابلیت مقیاس پذیری برنامه آینده شما داشته باشد.

میزان ابزار های جاوا اسکریپت به طور پیوسته در حال افزایش است و انتخاب فناوری مناسب به یک چالش تبدیل می شود. در حالی که در میان بحث های برتر، AngularJS و Reactjs است. هر دو در سراسر جهان بسیار کارآمد، پیشرفته و گسترده هستند.

ری اکت (React)

ری اکت (React) که همچنین به عنوان React.js یا ReactJS شناخته می شود، کتابخانه جاوااسکریپت برای ایجاد رابط کاربری است. این برنامه توسط فیس بوک و جامعه ای از توسعه دهندگان و شرکت های خاص نگهداری می شود. React را می توان به عنوان پایه ای در توسعه برنامه های تک صفحه ای یا تلفن همراه استفاده کرد. با این وجود React فقط به ارائه داده به DOM مربوط می شود و بنابراین ایجاد برنامه های React معمولاً نیاز به استفاده از کتابخانه های اضافی برای مدیریت state، مسیریابی و تعامل با API دارد. Redux،React Router و axios نمونه های مربوط به چنین کتابخانه هایی هستند.

React و Angular رویکردهای کاملاً متنوعی را برای توسعه برنامه وب برای مشاغل نوپا، کوچک و میانه ارائه می دهند. هر دو فناوری قدرتمند و انعطاف پذیر هستند، در حالی که هیچ یک از آن ها از دیگری بدتر و بهتر نیستند. بسته به اهداف برنامه های سفارشی و محدودیت های سیستم خاص، توسعه دهندگان می توانند از ng2 به React و برگشت استفاده کنند.

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

مثال های انگولار جی اس (AngularJS)

در این مثال توضیح داده می شود:

  • AngularJS با بارگیری صفحه وب به طور خودکار شروع می شود.
  • دایرکتیو ng-app به AngularJS می گوید که عنصر <div> "مالک" برنامه AngularJS است.
  • دایرکتیو ng-model مقدار قسمت ورودی را به نام متغیر برنامه پیوند می زند.
  • دایرکتیو ng-bind محتوای المنت <p> را به نام متغیر برنامه وصل می کند.
 <!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app=""> <p>Name : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div>

</body> </html>

آیا این نوشته را دوست داشتید؟
packt-ionic-4-build-pwa-and-mobile-apps-with-angular

آیونیک 4 - ساخت PWA و اپلیکیشن های موبایل با Angular


چه می شود اگر ما بتوانیم از دانش Angular خود برای ساخت اپلیکیشن هایی استفاده کنیم که بتوانند به صورت Progressive Web Apps و Native Mobile Apps در هر د...

1400/02/13 183 بازدید
full-stack-angular-and-java-spring-boot

دوره Full Stack - انگولار و Java Spring Boot


این دوره به شما کمک می کند تا Angular و Java Spring Boot را به سرعت یاد بگیرید. این دوره مفاهیم اساسی ساخت یک برنامه Full Stack را با Angular و Java S...

1400/02/06 444 بازدید زیرنویس دارد
packt-wordpress-rest-api-and-ionic-4-angular-app-with-authentication

برنامه Ionic 4 (Angular) و REST API وردپرس با احراز هویت


در این دوره، مباحث زیر را مرور خواهیم کرد: راه اندازی وردپرس بر روی دستگاه محلی و نصب افزونه JWT Authentication. تسلط بر REST API وردپرس با استفاده از...

1400/02/04 351 بازدید
pluralsight-ng-conf-19-angular-blast-off-day-1

کنفرانس ng-conf '19: آماده پرتاب با انگولار - روز اول


در این کنفرانس، متخصصان گوگل Aaron و Brian تخصص خود را با شما در پیشرفت با انگولار به اشتراک می گذارند. آنها بسیاری از مباحث، مانند مبانی تایپ اسکریپت...

1400/02/02 241 بازدید
pluralsight-ng-conf-19-thinking-reactively-most-difficult

کنفرانس ng-conf '19: تفکر واکنش گرایی - دشوارترین


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

1400/02/02 214 بازدید
pluralsight-rxjs-in-angular-reactive-development

آموزش RxJS در Angular: توسعه واکنش گرا


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

1400/01/29 465 بازدید
pluralsight-securing-angular-apps-with-openid-connect-and-oauth-2

آموزش ایمن سازی اپلیکیشن های انگولار با OpenID Connect و OAuth 2


در این دوره، شما نحوه اعمال پروتکل های OpenID Connect و OAuth 2 برای احراز هویت کاربران و اجازه دسترسی آنها به عملکردها و داده ها در اپلیکیشن های خود ...

1400/01/24 442 بازدید
linkedin-angular-creating-and-hosting-a-full-stack-site

آموزش Angular: ایجاد و میزبانی یک سایت فول استک


به Shaun Wassell، مدرس دوره بپیوندید. او شما را در مراحل ساخت یک وب سایت فول استک، قدرت گرفته از Angular، از ابتدا راهنمایی می کند. نشان می دهد که چگو...

1400/01/17 548 بازدید زیرنویس دارد
pluralsight-angular-denver-19-5-4-3-2-1-blast-auth

دوره Denver '19 انگولار: 5, 4, 3, 2, 1: Blast Auth


در این دوره، Kim Maida نکاتی را در اختیار شما قرار می دهد تا احراز هویت را به سادگی انجام دهید، کال بک ها را به موارد قابل مشاهده تبدیل کنید، داده های...

1399/12/07 343 بازدید
pluralsight-ng-conf-19-not-every-app-is-a-spa

کنفرانس ng-conf '19: هر اپلیکیشنی که SPA نیست


یک موضوع مهم در ارتقاء اپلیکیشن ها، عملکرد است که اولین تجربیات بارگذاری خوب را ارائه می دهد، و هر اپلیکیشنی لزوماً نباید در اولین بارگذاری، اپلیکیشن ...

1399/11/28 410 بازدید
pluralsight-ng-conf-19-personalization-performance-and-probably-dynamic-content

کنفرانس ng-conf '19: شخصی سازی، عملکرد، و Dynamic Content


ما همه اینها را می خواهیم: سایت های مبتنی بر CMS، با محتوای شخصی سازی شده، بدون تضعیف عملکرد بارگذاری. در این کنفرانس، مدرس تکنیک های اثبات شده ای که ...

1399/11/28 327 بازدید
pluralsight-ng-conf-19-reactive-forms-demystified

کنفرانس ng-conf '19: ابهام زدایی Reactive Forms


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

1399/11/28 338 بازدید
pluralsight-ng-conf-19-amazing-backends-for-angular-devs-with-nestjs

کنفرانس ng-conf '19: بک اندهای حیرت انگیز برای توسعه دهندگان انگولار با NestJS


با استفاده از مهارت های موجود خود، Backends حیرت انگیز با NestJS بسازید! Nest فریمورکی است که تایپ اسکریپت و قدرت Node را در بر می گیرد. با استفاده از...

1399/11/28 361 بازدید
pluralsight-ng-conf-19-schematics-an-untapped-frontier

کنفرانس ng-conf '19: شماتیک ها: یک مرز بکر


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

1399/11/22 308 بازدید
pluralsight-ng-conf-19-rxjs-schedulers-from-outer-space-performance-animations-asynchrony

کنفرانس RxJS Schedulers :ng-conf '19 از فضای بیرونی - عملکرد، انیمیشن ها، غیرهمزمانی


آیا یک Observable به صورت همزمان اجرا می شود؟ شاید شما بدانید، اما بیشتر افراد خیر. ng-conf یک کنفرانس سه روزه انگولار است که با ارائه آموزش های فریمو...

1399/11/22 320 بازدید
pluralsight-ng-conf-19-rxjs-advanced-patterns-operate-heavily-dynamic-uis

کنفرانس ng-conf '19: الگوهای پیشرفته RxJS - عملیات سنگین رابط کاربری های پویا


ng-conf یک کنفرانس سه روزه انگولار است که با هدف ارائه آموزش هایی با بالاترین کیفیت در فریمورک Angular JavaScript برگزار می شود. بیش از 1500 توسعه دهن...

1399/11/22 301 بازدید
pluralsight-ng-conf-19-the-future-of-machine-learning-javascript

کنفرانس ng-conf '19: آینده یادگیری ماشینی و جاوااسکریپت


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

1399/11/20 582 بازدید
pluralsight-ng-conf-19-the-form-awakens

کنفرانس ng-conf '19: ظهور فرم


در این کنفرانس، مدرس یک روش جایگزین برای اجرای درست Observable Forms با کاربرد ساده را نمایش خواهد داد. این شیوه از قابلیت های مدرن Ivy برای ایجاد روش...

1399/11/20 295 بازدید
pluralsight-ng-conf-19-testing-is-a-black-hole-of-time-and-effort-avoiding-the-suck-using-cypress

کنفرانس ng-conf '19: تست، سیاهچاله ای از زمان و تلاش است: جلوگیری از مکش با استفاده از Cypress


ng-conf یک کنفرانس سه روزه انگولار است که با هدف ارائه آموزش هایی با بالاترین کیفیت از فریمورک Angular JavaScript برگزار می شود. بیش از 1500 توسعه دهن...

1399/11/19 321 بازدید