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

فیلتر ها

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

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

قابلیت اطمینان و کارایی بخش مهمی از اطمینان از کارکرد سایت به شکلی که باید باشد. قبل از 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 در کل برنامه در دسترس هستند. انگولار مفهومی از دامنه یا کنترل کننده ها ندارد. به جای آنها، از سلسله مراتب اجزا به عنوان مفهوم اصلی معماری خود استفاده می کند. مؤلفه یک بخشنامه با یک الگوی است. این یک رویکرد مشابه با ReactJS است - کتابخانه دیگری که برای ساخت واسط کاربر استفاده می شود.

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

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>

آیا این نوشته را دوست داشتید؟
lynda-building-applications-with-angular-asp-net-core-and-entity-framework-core

آموزش ساخت اپلیکیشن ها با Angular، ASP.NET Core و Entity Framework Core


ایجاد اپلیکیشن full-stack، نیاز به یکپارچه سازی چندین کامپوننت دارد. در این دوره با نحوه استفاده از Angular، ASP.NET Core و Entity Framework برای ایجا...

1397/01/09 3458 بازدید
pluralsight-integrating-angular-with-asp-net-core-restful-services

آموزش یکپارچه سازی Angular با خدمات ASP.NET Core RESTful


در این دوره، نحوه ی ایجاد Angular و ASP.NET Core  که بتواند عملیات ایجاد، خواندن، به روز رسانی و حذف (CRUD) را انجام دهد آموزش داده می شود. همچنین نحو...

1397/01/09 3388 بازدید زیرنویس دارد
wintellectnow-getting-started-with-angular-and-asp-net-core

آموزش شروع کار با Angular و ASP.NET Core


Angular همانند ASP.NET Core باعث ایجاد امواج در جامعه توسعه دهندگان می شود. این دو باهم، یک دستورالعمل برای برنامه نویسی وب فراهم می کند. سرفصل: م...

1397/01/09 3597 بازدید
wintellectnow-fundamentals-of-angularjs

آموزش مبانی AngularJS


AngularJS یک موضوع داغ در محافل برنامه نویسی است. در این دوره با data-binding، کنترلرها برای MVC در کلاینت، رویدادها، فیلترها برای خروجی فرمت، دستورال...

1397/01/06 1054 بازدید
wintellectnow-mobile-first-responsive-design-using-less-bootstrap-and-angular

آموزش طراحی واکنش گرا موبایل با LESS، بوت استرپ و Angular


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

1396/12/27 1599 بازدید
wintellectnow-introduction-to-angular-2

آشنایی با Angular 2


AngularJS محبوب ترین فریمورک اپلیکیشن وب در جهان است و Angular 2 گوشه ای از آن می باشد.  در این دوره با کامپوننت ها، pipes، تزریق وابستگی و دیگر ویژگی...

1396/12/18 810 بازدید
wintellectnow-angularjs-testing

آموزش AngularJS - انجام تست


ماژول angular-mocks از موتور تزریق وابستگی منحصر به فرد Angular بهره می برد تا mocks و stubs مناسب برای واحد، ادغام و تست end-to-end اپلیکیشن را فراهم...

1396/12/15 742 بازدید
wintellectnow-angularjs-services

آموزش AngularJS - سرویس ها


در Angular اصطلاح سرویس ها به آبجکت ها و توابعی که task خاصی را به همراه دارند برمی گردد. Angular سرویس هایی را ارائه می دهد که کارهایی از جمله دستکار...

1396/12/14 817 بازدید
wintellectnow-angularjs-scope-and-digest-loop

دوره AngularJS: Scope and Digest Loop


در این دوره با مجموعه ابزار به نام scope آشنا می شوید که با digest loop اتصال داده را تسهیل می بخشد. همچنین چرخه عمر scope، نحوه تعامل scope با HTML D...

1396/12/14 723 بازدید
wintellectnow-angularjs-routes

آموزش AngularJS - مسیرها


اپلیکیشن های تک صفحه ای (SPAs) تجربه های دسکتاپ غنی را برای کاربران بدون نیاز به صفحات برای رندر یا بازگرداندن به سرور فراهم می کنند. با این حال باید ...

1396/12/14 780 بازدید
wintellectnow-angular-ui-router-how-to-build-complex-html-user-interfaces

آموزش Angular UI-Router - نحوه ساخت رابط های کاربری پیچیده HTML 


ایجاد رابط کاربری پیچیده در HTML می تواند پیچیده و دشوار باشد. UI-Router یک ماژول Angular است که توسط گروه AngularUI ساخته شده است. به عنوان یک جایگزی...

1396/12/14 1098 بازدید
wintellectnow-angularjs-dependency-injection

آموزش AngularJS - تزریق وابستگی


اپلیکیشن های Enterprise و line-of-business  غالبا از اجزای مختلف وابسته تشکیل شده اند. Angular مجموعه ای از سرویس ها را فراهم می کند که مدیریت وابستگی...

1396/12/14 989 بازدید
wintellectnow-angularjs-debugging-and-performance

آموزش AngularJS - اشکال زدایی و عملکرد 


در این دوره با نکات، ترفندها و تکنیک های اشکال زدایی و عملکرد در AngularJS آشنا شوید. سرفصل: مقدمه پیش فرض ها بخش 1: اشکال زدایی وقتی همه چی...

1396/12/14 797 بازدید
wintellectnow-angularjs-advanced-filters

آموزش AngularJS - فیلترهای پیشرفته 


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

1396/12/14 802 بازدید
wintellectnow-angularjs-advanced-directives

آموزش AngularJS - دستورالعمل های پیشرفته


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

1396/12/14 829 بازدید
pluralsight-building-a-site-with-angular-and-php

آموزش ساخت سایت با Angular و PHP


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

1396/11/10 2301 بازدید
1396/11/09 1646 بازدید
1396/11/08 908 بازدید زیرنویس دارد