بعد از ارائه Framework جدید Angular با نام Angular 2 ، این framework نسبت به نسخه قبلی خود یعنی AngularJS به کلی تغییر کرد . ما در این مقاله قصد داریم که مقایسه ای بر AngularJS و Angular 2 داشته باشیم .

AngularJS :
در گذشته ، امکان ایجاد برنامه های وب بسیار پیشرفته  با استفاده از APIهای JavaScript وجود داشت ، اما نگهداری و استفاده دوباره از کدهای اولیه آن و تست همه آنها کاری بسیار دشوار بود. تا اینکه درسال 2010 AngularJS به عنوان یک Javascript MVW Framework معرفی شد . AngularJS دارای سه مزیت بزرگ میباشد که باعث محبوب شدن آن در بین توسعه دهندگان شده است :

• سرعت تولید کد بی مانند بود 
• هر قطعه کد از برنامه به راحتی قابل تست کردن بود 
• و اینکه کمپانی بزرگ گوگل پشت این پروژه بود 

ویژگی ها و چیزهایی دیگری از AngularJS نیز وجود دارد که آن را نزد برنامه نویسان محبوب کرده است . اولین آن data binding دو طرفه می باشد . Angular این امکان را به شما میدهد که تغییرات داده ها در JavaScript را برای منعکس کردن آن بصورت خودکار بر روی UI ، مشاهده کنید . در ابتدای کار ، Angular توسعه چیزهایی را بسیار سهولت میبخشد و این بدین دلیل است که کدهای زیادی برای متصل کردن Controller به صفحه HTML نیاز نیست . مزیت دومی که AngularJS برای برنامه نویسان محیا کرده است Directiveها هستند . اینها نقطه شروعی برای تمام مولفه هایی هستند که ما در Fron-tendهای مدرن میبینیم . Directiveها امکان بیشتری به کدها برای استفاده دوباره را میدهند .AngularJS بصورت اجباری از Dependency Injection پیروی میکند ، و این به بر طرف کردن Dependency ها کمک شایانی میکند . ظاهر AngularJS در Framework ، یکی از ویژگی های بزرگ و مهم آن در تست برنامه های front-end است .

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

Angular 2 :
AngularJS یک راه فوق العاده برای شروع یک برنامه یا MVP میباشد . با بالا رفتن محبوبیت آن روز به روز ویژگی های بیشتری به هسته آن اضافه شد ، تا آن که تیم Angular تصمیم به بازنویسی دوباره Framework اصلی گرفتن ، بنابراین Angular 2 رو معرفی کردند . AngularJS و Angular 2 فقط در نام مشترک هستند . در اینجا یک migration path (با نام ng-upgrade) از AngularJS به Angular 2 وجود دارد .

تمامی ساختار های برنامه در Angular 2 تغییر کرده است . در گذشته این MVC Framework بود که امکان ایجاد برنامه هایی با استفاده از الگوی tightly coupled همانند Controllerها ، Viewها و Serviceها و ... را به ما می‌داد . تمام ساختار AngularJS همانند زیر است :

برنامه های وب تک صفحه واقعی ( Real Single Page Web Applications ) با استفاده از AngularJS :

معماری img – ng1 :
در حال حاضر مفهوم Directiveها به این سمت هل داده میشود که به کامپوننت های استاندارد نزدیک تر باشند و بگونه ای عمل کنند که برنامه را ایجاد کنند .  همه ی اینها در مورد Componentها در Angular 2 میباشد . این بدان معناست که کل برنامه فقط یک Component است ، که شامل مجموعه  Componentهای دیگر می باشد . این با یک ساختار درختی شکل پایان میابد :

معماری img – ng2 :
هدف معماری برنامه های Angular 2 این است که Componentهایی ایجاد کنند که وابسته به یکدیگر نباشند ، و تا جایی که امکان دارد Loosly coupled باشند .

مهمترین چیز معرفی دو راه برای ایجاد Componentها می باشد :

Smart Component : آنها وضعیت برنامه را میدانند ، و آنها میتوانند برای واکشی یا ویرایش داده ها با سرویس ها ارتباط برقرار کنند .

Dumb Component : آنها بهتر است که فقط Inputها و Outputهایی داشته باشند . آنها آماده ای هستند که در هر جایی از سیستم جاگذاری شوند (حتی خارج از سیستم ) زمانی که داده های درستی را برای inputها فراهم می آورد ، و در مورد وضعیت برنامه موجود نباید اطلاعات داشته باشند . 

آموزش angular