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

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

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

معماری MVC

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

مقایسه انگولار جی اس (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، یکپارچه کرد.

آیا این نوشته را دوست داشتید؟