آموزش انگولار جی اس (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>

آیا این نوشته را دوست داشتید؟
pluralsight-angular-and-the-case-for-rxjs-codemash

انگولار و Case برای CodeMash :RxJS


RxJS بخشی اصلی از فریمورک Angular است که در همه موارد از Reactive Form گرفته تا ماژول HTTP استفاده می شود. بهره برداری از مشاهدات با استفاده از async ...

1399/10/27 208 بازدید
pluralsight-angular-denver-19-bridging-parallel-universes-upgrading-huge-apps-with-angular-elements

دوره Denver '19 انگولار: پل زدن بین دنیاهای مجازی: به روز رسانی برنامه های بزرگ با Angular Elements


در این دوره، Sam Julien به شما می آموزد که چگونه می توانید با Angular Elements مهاجرت خود را برنامه ریزی کنید، چگونه می توانید اجزای سازنده و سرویس ها...

1399/10/22 266 بازدید
pluralsight-angular-denver-19-subjecting-state-to-good-behavior

دوره Denver '19 انگولار: کنترل State برای رفتار خوب


در این دوره، Kim Maida مقیاس گذاری مدیریت state را در انگولار از ساده تا قوی تر بررسی می کند. شما درک بهتری از کتابخانه های مدیریت state یعنی Angular ...

1399/10/22 219 بازدید
pluralsight-angular-denver-19-demystifying-token-authentication-in-ngrx

دوره Denver '19 انگولار: مصداق زدایی احراز هویت توکن در NgRx


در این دوره، Sam Julien نحوه و دلیل احراز هویت مبتنی بر رمز را در NgRx به شما می آموزد. همچنین با استفاده از بهترین شیوه های احراز هویت، در مورد مدیری...

1399/10/22 220 بازدید
pluralsight-angular-denver-19-schematics-an-untapped-frontier

دوره Denver '19 انگولار: Schematics: یک مرز استفاده نشده


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

1399/10/22 215 بازدید
pluralsight-angular-denver-19-designing-against-domestic-violence

دوره Denver '19 انگولار: طراحی در برابر خشونت خانگی


Eva Penzeymoog تلاش می کند تا اطمینان حاصل کند که محصولات دیجیتالی نمی توانند به عنوان ابزاری برای سو استفاده، استفاده استفاده شوند و یافته های خود را...

1399/10/22 238 بازدید
pluralsight-angular-denver-19-supercharge-your-angular-tests-with-jest-snapshots-included

دوره Denver '19 انگولار: تست های انگولار خود را با Jest سوپرشارژ کنید (شامل Snapshots)


در این دوره، Michal Szcepaniak عملکرد تست را با استفاده از Jest و Jasmine در یک برنامه Angular مقایسه می کند، نحوه کار تماشاگران را در هر دو فریمورک ت...

1399/10/10 316 بازدید
pluralsight-angular-denver-19-simplifying-front-end-state-management-with-observable-store

دوره Denver '19 انگولار: ساده سازی مدیریت Front-end State با Observable Store


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

1399/10/10 301 بازدید
pluralsight-angular-denver-19-quasi-human-angular-automated-testing-with-cucumber

دوره Denver '19 انگولار: تست خودکار انگولار شبه انسانی با Cucumber


در این دوره، Lukas Ruebbelke به شما می آموزد كه چگونه با ایجاد ارتش روباتی برای سازمان خود اطمینان حاصل كنید كه برنامه شما همانطور كه تبلیغ می شود كار...

1399/10/10 273 بازدید
pluralsight-angular-denver-19-diversity-in-tech-made-easy

دوره Denver '19 انگولار: تنوع در فناوری ساخته شده آسان


در این دوره، Elise Heron یک نکته ساده برای ورود کاندیدهای متنوع تر به سازمان شما و جزئیات نحوه نگهداری این کارمندان در سازمان شما را ارائه می دهد....

1399/10/07 289 بازدید
pluralsight-angular-denver-19-architecting-angular-apps-for-scalability

دوره Denver '19 انگولار: معماری اپلیکیشن های انگولار برای مقیاس پذیری


در این دوره، Doguhan Uluca بررسی می کند که چگونه router-first تفکر سطح بالا را اجرا می کند، قبل از شروع برنامه نویسی، توافق بر روی ویژگی ها، حساب های ...

1399/10/07 286 بازدید
pluralsight-angular-denver-19-enhance-customizing-the-angular-cli

دوره Denver '19 انگولار: پیشرفت کنید! سفارشی سازی Angular CLI


Angular CLI یکی از بهترین ویژگی های Angular Platform است که بسته بندی، بهینه سازی ساخته شده، تقسیم کد و تولید کامپوننت ها را کنترل می کند. با این حال،...

1399/10/07 258 بازدید
pluralsight-angular-denver-19-building-pwas-with-angular-and-ionic

دوره Denver '19 انگولار: ساخت PWA ها با انگولار و آیونیک


در این دوره، Ely Lucas چگونگی ایجاد یک PWA ساده با استفاده از انگولار و آیونیک و بهترین شیوه هایی که می توانید در ایجاد اپلیکیشن بعدی خود اعمال کنید ر...

1399/10/05 392 بازدید
pluralsight-angular-denver-19-1x-programmer-10x-programmer-100x-programmer

دوره Denver '19 انگولار: برنامه نویس 1x، برنامه نویس 10x، برنامه نویس 100x


به Ado Kukic و چند مهمان خاص بپیوندید آن ها همانطور که در یک تمرین برنامه نویسی زنده شرکت می کنند، برای اطمینان از آماده بودن برنامه Angular Denver Ba...

1399/10/05 334 بازدید
pluralsight-angular-denver-19-so-little-code-are-you-even-still-a-programmer-anymore

دوره Denver '19 انگولار: کدی بسیار کوچک! آیا هنوز هم یک برنامه نویس هستید؟


در این دوره، Jon Rista سادگی و قدرت NgRx Auto-Entity را معرفی می کند....

1399/10/05 337 بازدید
pluralsight-angular-denver-19-mockstore-in-ngrx-8

دوره Denver '19 انگولار: MockStore در NgRx 8


در این دوره، John Crowson تست اجزای وابسته به فروشگاه را با استفاده از NgRx MockStore نشان می دهد که توانایی ساخت موک کل حالت یا انتخاب کننده های تکی ...

1399/10/01 336 بازدید
pluralsight-angular-denver-19-make-your-component-tell-you-stories-with-storybook

دوره Denver '19 انگولار: با Storybook کامپوننت هایی بسازید که داستان شما را بازگو می کنند


در این دوره، Austin McDaniel به بررسی عمیق Storybook می پردازد و کامپوننت های شما را به یک داستان قبل از خواب تبدیل می کند....

1399/10/01 331 بازدید
pluralsight-angular-denver-19-the-facade-of-ngrx-facades

دوره Denver '19 انگولار: نمایی از NgRx Facades


در این دوره، Mike Ryan و Brandon Roberts به بررسی عمیق نماها می پردازند تا بررسی کنند که آیا واقعاً نماها فقط یک نما هستند یا اینکه آیا یک الگوی نما ک...

1399/10/01 304 بازدید
pluralsight-angular-denver-19-e2e-testing-with-cypress-io

دوره Denver '19 انگولار: تست E2E با Cypress.io


در این دوره، Jesse Sanders جنبه های درون NgRx را بررسی می کند. برخی از این جنبه ها شامل تست، NgRx Entity ،NgRx Data ،NgRx Auto Entity، مدیریت خط، اکشن...

1399/09/28 408 بازدید
pluralsight-angular-denver-19-dark-patterns-in-ui-what-not-to-do-to-your-users

دوره Denver '19 انگولار: الگوهای Dark در رابط کاربری: کارهایی که نباید برای کاربران خود انجام دهید


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

1399/09/28 383 بازدید