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

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

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

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

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

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

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

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

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

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

تاریخچه انگولار جی اس (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 اغلب برای توسعه و سازماندهی پیچیده تر هستند. اگر به دنبال راه حلی هستید که سریع، ساده و آسان برای استفاده در لحظه مورد توجه باشد، پس از آن می تواند این باشد.

دسترسی به مدل POJO

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

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

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

فیلتر ها

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

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

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

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

الگو ها

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

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

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

AngularJS از اصطلاح "حوزه" به شکلی مشابه اصول علم کامپیوتر استفاده می کند. حوزه در علوم کامپیوتر توصیف می کند که چه موقع در این برنامه لازم است که صحت خاصی انجام شود. مشخصات ECMA-262 حوزه را به این شرح تعریف می کند: محیط واژگانی که در آن شی عملکرد در اسکریپت های وب سمت کلاینت اجرا می شود. به عنوان بخشی از معماری "MVC"، حوزه "Model" را تشکیل می دهد و به کلیه متغیرهای تعریف شده در دامنه می توان به "ویو" و همچنین "کنترل" دسترسی پیدا کرد. دامنه به عنوان اتصال دهنده رفتار می کند و "نمایش" و "کنترل کننده" را به هم متصل می کند. در AngularJS، "حوزه" نوعی شی خاص است که خودش می تواند در هر قسمت معین از برنامه، با هر یک از شی های دیگر، محدوده یا خارج از محدوده باشد. هنگامی که اصطلاح "Scope" در زیر استفاده می شود، به موضوع حوزه Angular اشاره می شود و نه حوزه اتصال به یک نام.

معماری MVC

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

چرا باید از انگولار جی اس (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)

مزایای استفاده از AngularJS

  • امکان را برای ایجاد برنامه تک صفحه ای به روشی بسیار تمیز و پایدار فراهم می کند.
  • قابلیت اتصال داده به HTML را فراهم می کند. بنابراین، تجربه ای غنی و رسپانسیو به کاربر می دهد.
  • کد AngularJS قابل تست واحد است.
  • AngularJS از تزریق وابستگی استفاده می کند و همچنین دارای قابلیت تفکیک وابستگی است.
  • AngularJS کامپوننت های قابل استفاده مجدد را فراهم می کند.
  • با AngularJS، توسعه دهندگان می توانند با استفاده از کد کوتاه به عملکرد بیشتری برسند.
  • در AngularJS، ویو ها صفحات خالص HTML هستند و کنترل کننده هایی که در جاوااسکریپت نوشته شده پردازش را انجام می دهند.
  • مهمتر از همه، برنامه های AngularJS می توانند بر روی همه مرورگرها و تلفن های هوشمند، از جمله موبایل و تبلت مبتنی بر اندروید و آی او اس (iOS) اجرا شوند.

معایب AngularJS

اگرچه AngularJS دارای بسیاری از شایستگی ها است، برخی از معایب وجود دارد که عبارتند از:

  • امن نیست: تنها فریمورک JavaScript، برنامه نوشته شده در AngularJS ایمن نیست. احراز هویت و مجوزهای سمت سرور باید یک برنامه را ایمن نگه دارند.
  • قابل تجزیه نیست: اگر کاربر برنامه شما جاوااسکریپت را غیرفعال کند، به جز صفحه اصلی، هیچ چیز قابل مشاهده نخواهد بود.

تفاوت بین انگولار (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>

آیا این نوشته را دوست داشتید؟
udemy-learn-to-build-an-e-commerce-app-with-dot-net-core-and-angular

ساخت اپلیکیشن تجارت الکترونیک با Net Core. و Angular


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

1399/07/29 177 بازدید زیرنویس دارد
pluralsight-angular-forms

آموزش فرم‌های Angular


در این دوره، فرم‌های Angular، یاد می گیرید چگونه با استفاده از فریمورک Angular، فرم‌های قالب محور ایجاد کنید. ابتدا نحوه استایل دادن به آنها، استفاده ...

1399/06/09 828 بازدید
linkedin-angular-cloud-powered-apps-with-firebase

آموزش Angular: اپلیکیشن های تقویت شده ابری با Firebase


در این دوره، مدرس Victor Mejia نحوه ساخت اپلیکیشن های قدرتمند با Firebase را نشان می دهد.او نگاهی به کنسول Firebase می اندازد و نحوه استفاده از Fireba...

1399/04/07 847 بازدید زیرنویس دارد
codewithmosh-angular-4-beginner-to-pro

دوره Angular 4 - از مبتدی تا پیشرفته - Code With Mosh


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

1399/02/08 3102 بازدید
udemy-the-modern-angular-bootcamp-2020

بوت کمپ انگولار مدرن 2020


اگر می خواهید برنامه های بزرگ و مقیاس پذیر بسازید، Angular فریمورک جاوااسکریپت برای یادگیری است! انگولار نزدیک به یک دهه است که توسط Google ساخته شده ...

1399/01/18 3989 بازدید زیرنویس دارد
linkedin-building-angular-and-asp-net-core-applications

آموزش ساخت اپلیکیشن های Angular و ASP NET Core


آیا می خواهید وب اپلیکیشن خود را بسازید؟ در این دوره، Ervis Trupja به شما نشان می دهد که چه چیزهایی برای ساخت یک وب اپلیکیشن با استفاده از Angular، فر...

1399/01/15 2898 بازدید زیرنویس دارد
linkedin-building-angular-and-asp-net-web-api-apps-2

آموزش ساخت اپلیکیشن با Angular و ASP NET Web API


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

1399/01/15 1295 بازدید
linkedin-building-angular-and-node-apps-with-authentication

آموزش ساخت برنامه های Angular و Node با احرازهویت


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

1399/01/12 1366 بازدید
linkedin-building-angular-and-django-apps

آموزش ساخت اپلیکیشن های Angular و Django


دانش Angular و Django REST خود را بیازمایید. در این دوره، به Rudolf Olah بپیوندید زیرا او به بررسی پیچیدگی های جفت کردن این دو فریمورک برای ساخت وب اپ...

1399/01/12 2846 بازدید زیرنویس دارد
linkedin-building-a-reactive-app-with-angular-and-spring-boot-2

ساخت برنامه های واکنشگرا با Angular و Spring Boot 2


Angular به دلیل ایجاد برنامه های تک صفحه ای غنی و داده محور (SPA) معروف است، در حالی که Spring Boot یک فریمورک محبوب و قدرتمند برای توسعه بک اند است. ...

1399/01/11 1960 بازدید
linkedin-angular-essential-training

آموزش اساسی Angular


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

1399/01/04 2016 بازدید
teamtreehouse-angular-basics

آموزش مبانی Angular


با Angular شروع به کار کنید. در این دوره یاد می گیرید که چگونه محیط خود را پیکربندی کنید ، وابستگی ها را نصب کنید و با یک اپلیکیشن Angular شروع به کار...

1398/10/10 2153 بازدید
pluralsight-developing-with-the-sharepoint-framework-and-angular

توسعه با فریمورک شیرپوینت و انگولار


در این دوره یاد می گیرید که شیرپوینت را سفارشی کنید و افزونه های سایت را با استفاده از آن بنویسید، همچنین یاد می گیرید چگونه داده هایتان را در شیرپوین...

1398/09/28 1207 بازدید
packtpub-angular-web-development-in-2-hours

توسعه وب انگولار در 2 ساعت


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

1398/09/22 2125 بازدید
packtpub-angular-full-app-with-angular-material-angularfire-and-ngrx-video

آموزش انگولار (برنامه کامل) با انگولار متریال، Angularfire و NgRx


این دوره با استفاده از انگولار ، انگولار متریال، AngularFire + Firebase با Firestore و NgRx، یک برنامه انگولار واقعی خواهید ساخت....

1398/08/16 2189 بازدید
packtpub-angular-7-a-practical-guide

راهنمای کاربردی انگولار 7


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

1398/08/13 2972 بازدید
packtpub-hands-on-web-development-with-asp-net-core-and-angular-7

طراحی وب عملی با دات نت کور و انگولار7


این دوره به شما یاد می دهد که چگونه قدرت رابط کاربری Angular و NET. را برای ساخت اپلیکیشن های تعاملی ترکیب کنید؛ به صورتی که ارتباط بین frontend و bac...

1398/08/13 5228 بازدید
packtpub-learning-angular-services

آموزش سرویس های Angular


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

1398/07/09 1655 بازدید
linkedin-angular-building-an-interface

آموزش Angular: ساخت اینترفیس


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

1398/07/06 1923 بازدید زیرنویس دارد
packtpub-hands-on-typescript-3-and-angular-7-for-web-development

آموزش TypeScript 3 و Angular 7 برای توسعه وب


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

1398/06/11 4052 بازدید