Page tree
Skip to end of metadata
Go to start of metadata

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

در اینجا سه دلیل وجود دارد که به شما کمک می کند که AngularJS را برای پروژه ی بعدی خود انتخاب کنید.

۱- توسط گوگل ایجاد شده است

فریم ورک انگولار توسط مهندسان گوگل ساخته و نگهداری می شود.

این یک دلیل آشکار است اما باید به یاد داشته باشیم که بسیاری از فریم ورک ها (و نه همه ی آنها) به صورت تفننی و در انجمن های open source ایجاد شده اند. در حالی که اشتیاق و انگیزه باعث ظهور فریم ورک هایی مانند Cappucino و Knockout شده است، اما AngularJS توسط مهندسان متخصص و بسیار با استعداد گوگل ساخته و نگهداری می شود. این یعنی شما نه تنها یک جامعه ی بزرگ و باز برای یادگیری در اختیار دارید، بلکه مهندسانی با مهارت، متخصص و همیشه در دسترس نیز برای کمک و پاسخ به سوالات شما در مورد Angular وجود دارند.

این اولین اقدام گوگل در جهت ساخت یک فریم ورک جاوا اسکریپتی نیست؛ آنها ابتدا Web Toolkit جامع خود را ایجاد نمودند که جاوا را با جاوا اسکریپت ترکیب می کرد و به طور گسترده توسط تیم Google Wave مورد استفاده قرار می گرفت. با ظهور HTML5، CSS3 و جاوا اسکریپت به عنوان یک زبان که از آغاز تا پایان نوشتن یک برنامه را پشتیبانی می کند، گوگل دریافت که وب نمی تواند به طور خالص به زبان جاوا نوشته شود.

AngularJS برای استاندارد سازی ساختار وب اپلیکیشن ها و ارائه ی تمپلیتی برای نشان دادن نحوه ی توسعه ی اپلیکیشن های سمت کلاینت ایجاد شد.

نسخه ی ۱٫۰ این فریم ورک در سال ۲۰۱۲ منتشر شد و در اپلیکیشن ها مختلف در دسته بندی سرگرمی تا محصولات تجاری ، مورد استفاده قرار گرفت. پذیرش AngularJS به عنوان یک فریم ورک با دوام و کارآمد برای برنامه نویسی سمت کلاینت، به سرعت در بین جامعه ی توسعه دهندگان وب اپلیکیشن ها در حال پیشروی است.

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

۲- فریم ورکی جامع و کامل است

اگر با پروژه هایی مانند QUnit، Mocha یا Jasmine آشنا باشید، هیچ مشکلی در یادگیری API مربوط به unit-testing در فریم ورک انگولار نخواهید داشت.

انگولار نیز مانند Backbone یا JavaScriptMVC، روشی کامل برای توسعه ی سریع اپلیکیشن می باشد. هیچ فریم ورک یا plugin دیگری برای ساخت یک وب اپلیکیشن داده محور لازم نیست. در اینجا به ویژگی های برجسته ی فریم ورک انگولار می پردازیم:

–          اعمال ساده یREST . اعمال دارای REST به سرعت در حال تبدیل شدن به استانداردهایی بری ارتباط از سرور به کلاینت هستند. در یک خط کد جاوا اسکریپت، شما می توانید سریعا با سرور ارتباط برقرار کرده و داده های لازم را به دست آورده تا با صفحات وب خود تعامل داشته باشید. AngularJS این امر به یک شیء ساده ی جاوا اسکریپت، مانند Model، تبدیل می کند که از الگوی MVVM (مخفف Model View View-Model) پیروی می کند.

–         معماری MVVMهمان طور که می دانید Model ها (از طریق شیء $scope) با اشیاء ViewModel که تغییراتی که در Model ایجاد شده است را listen می کند، ارتباط برقرار می کنند. این تغییرات می توانند توسط View ها، که یک HTML است که کد شما را بیان می کند، تحویل و رندر شوند. View ها را می توان با استفاده از شیء $routProvider مسیر یابی کرد، بنابراین شما می توانید View ها و Controller های خود را deep-link و سازماندهی کرده و آنها را به URL های قابل navigate کردن تبدیل کنید. AngularJS همچنین controller های stateless ایجاد می کند که شیء $scope را راه اندازی و کنترل می کند.

–         قابلیت های Data Binding و Dependency Injectionدر الگوی MVVM هر گاه تغییری ایجاد شود، به صورت خودکار در تمام UI مخابره می شود. این امر باعث می شود که نیاز به wrapper (پوشاننده ها)، getter/setter (متد های گیرنده/تنظیم کننده) و بیان کلاس (class declaration) از بین برود. AngularJS تمام این کارها را انجام می دهد بنابراین شما می توانید داده ی خود را به راحتی موارد ابتدایی جاوا اسکریپت، مثل آرایه ها، یا به پیچیدگی دلخواه خود از طریق روش customize کردن، بیان کنید. از آنجایی که همه چیز به صورت خودکار انجام می شود، به جای فراخوانی یک main() غول پیکر برای اجرای کد خود، می توانید dependency (وابستگی ها) را به عنوان پارامتر هایی در توابع خدمات Angular JS در خواست کنید.

–         توسعه ی HTMLاکثر وب سایت هایی که امروزه ساخته می شوند زنجیره هایی غول پیکر از تگ های <div> با شفافیت معنایی بسیار کم هستند. شما باید کلاس های گسترده و خسته کننده ی CSS را برای بیان هدف هر شیء در DOM ایجاد کنید. در فریم ورک AngularJS شما می توانید HTML خود را مانند XML اجرا کنید که این امر به شما امکانات نامحدودی برای تگ ها و ویژگی ها (attribute) می دهد. انگولار این کار را از طریق HTML compiler خود و استفاده از دایرکتیو ها برای ایجاد رفتار ها بر اساس سینتکس جدیدی که شما نوشته اید، انجام می دهد.

–         استفاده از HTML به عنوان تمپلیت. اگر از Mustache یا Hogan.js استفاده کرده اید پس می توانید به سرعت bracket syntax موتور تمپلت انگولار را درک کنید، زیرا فقط از HTML ساخته شده است. انگولار DOM را که محل قرارگیری دایرکتیو های ذکر شده در بالا می باشد، برای این تمپلیت ها پیمایش می کند. سپس تمپلیت ها به عنوان پارامتر های DOM به compiler فریم ورک Angular JS اضافه می شوند و می تواند آنها را توسعه داده، اجرا کرد یا مورد استفاده ی مجدد قرار داد. نکته ی کلیدی در همین است زیرا اکنون شما به جای رشته ها، صاحب کامپوننت های خام DOM هستید که امکان تغییر و توسعه ی مستقیم درخت DOM را ایجاد می کند.

–        آزمون در سطح enterprise. همانطور که در بالا گفته شد، فریم ورک AngularJS نیاز به فریم ورک یا plugin دیگری من جمله testing ندارد. اگر با پروژه هایی مانند QUnit، Mocha یا Jasmine آشنا باشید، هیچ مشکلی در یادگیری API مربوط به unit-testing و Scenario Runner در فریم ورک انگولار که شما را در اجرای تست ها هدایت می کند، نخواهید داشت.

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

۳- راه اندازی در چند دقیقه

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

۱-     دایرکتیو ng-app را به تگ <html> اضافه کنید تا انگولار در صفحه اجرا شود:

 

<html lang="en"ng-app>

 

 

۲-     تگ <script> انگولار را به انتهای تگ  <head> خود اضافه کنید:

 <head>
...meta and stylesheet tags...
<script src="lib/angular/angular.js"></script>

۳-     HTML را اضافه کنید. دایرکتیو های AngularJS از طریق attribute های HTML قابل دسترسی می باشد، در حالی که عبارت ها از طریق علامت براکت دوتایی ارزیابی می شوند:

 

<body ng-controller="ActivitiesListCtrl">
<h1>Today's activities</h1>
<ul>
<li ng-repeat="activity in activities">
</li>
</ul>
</body>
</html 

 

۴-     دایرکتو ng-controller یک namespace ایجاد می کند که می توانیم جاوا اسکریپت انگولاری خود را در آن قرار دهیم تا داده را تغییر داده و عبارات را در HTML ما ارزیابی کند. ng-repeat یک شیء تکرار کننده ی (repeater object) انگولار می باشد که به انگولار می گوید تا زمانی که ما فعالیت هایی را برای نمایش داریم به ایجاد المان های لیست ادامه دهد و از المان <li> به عنوان تمپلیتی برای نمایش آنها به روش دلخواه ما استفاده کند.

5-     هنگامی که می خواهید چیزی را از انگولار بگیرید، داده ی خود را با یک فایل جاوا اسکریپتی واکشی کنید که حاوی تابعی باشد که نام آن مشابه با controller به کار رفته در HTML شما باشد:

 function ActivitiesListCtrl($scope) {
$scope.activities = [

{ "name": "Brush teeth" },
{ "name": "Wake up" },


{ "name": "Shower" },
{ "name": "Go to work" },

{ "name": "Have breakfast" },


{ "name": "Go to the gym" },
{ "name": "Write a Nettuts article" },


{ "name": "Meet friends" },

}
{ "name": "Go to bed" }

];

همان طور که قبلا گفته شد، ما تابعی هم نام با دستور ng-controller ایجاد می کنیم، بنابراین صفحه ی ما می تواند تابع انگولاری مربوطه را پیدا کرده و کد ما را با داده ای که می خواهیم به دست آوریم، راه اندازی و اجرا کند. ما از پارامتر $scope برای دسترسی به لیست activities تمپلیت، که در HTML view خود ایجاد کردیم، استفاده می کنیم. سپس یک مجموعه اولیه از فعالیت ها را با name کلیدی، مشابه با  name خصوصیت آن  activity که در علامت براکت دوتایی خود لیست کرده ایم و یک مقدار، که یک رشته است که نشاندهنده ی فعالیت هایی می باشد که می خواهیم امروز انجام دهیم، ایجاد می کنیم.

6-     اگرچه این اپلیکیشن کامل است اما هنوز قابل استفاده نیست. اکثر وب اپلیکیشن ها حاوی داده های فراوانی هستند که در سرور های remote ذخیره شده اند. اگر شما نیز داده های خود را در سروری در جایی دور ذخیره کرده اید، می توانیم به راحتی این آرایه را با یک فراخوانی از AJAX API انگولار جایگزین کنیم:

 function ActivitiesListCtrl($scope) {
	$http.get('activities/list.json').success(function (data) {
	$scope.activities = data;
	}
}

ما به سادگی شیء hash آرایه ی native جاوا اسکریپت را با یک تابع اختصاصی HTTP GET که توسط API انگولار ارائه شده است، جایگزین نمودیم. ما نام فایلی که می خواهیم از سرور واکشی کنیم اضافه می کنیم (در این مورد، یک فایل JSON از فعالیت ها) و یک promise (قرارداد) از انگولار به ما بازگردانده می شود که تا حد زیادی مانند الگوی promise در jQuery کار می کند.

هنگامی که داده بازگشت داده شده است، این promise می تواند تابع  success ما را اجرا کند و تمام کاری که ما باید انجام دهیم متصل کردن داده ی بازگردانده شده به فعالیت های خود است، که همانطور که قبلا هم گفته شد، توسط عمل dependency injection و از طریق پارامتر $scope انجام می شود.

یک لیست استاتیک از کارهایی که باید انجام شود (to-do list) خوب است اما قدرت حقیقی در این است که ما به سادگی می توانیم صفحه را تغییر دهیم و مجبور به راه اندازی یک سری از توابع جاوا اسکریپتی برای listen کردن تعاملات کاربر و پاسخ به آنها نیستیم. تصور کنید که باید لیست فعالیت های خود را بر اساس حروف الفبا طبقه بندی کنید. برای این کار، به راحتی یک سلکتور drop down اضافه می کنیم که به کاربر اجازه می دهد لیست را طبقه بندی کند:

 

<h3>Sort:</h3>
<select>
<option value="name">Alphabetically</option>
</select>
 

 

دایرکتیو model را به drop down اضافه کنید:

 

<select ng-model="sortModel"> 

 

 

در آخر ما تگ <li> را اصلاح می کنیم تا sortModel را به عنوان روشی برای طبقه بندی لیست ما بشناسد:

 

<li ng-repeat="activity in activities | orderBy: sortModel"> 

 

 

تمام کارهای پیچیده و سنگین به صورت هوشمندانه توسط AngularJS انجام می شود.

به همین سادگی کار انجام شد و راز ما در فیلتری است که ما به دایرکتیو ng-repeat در لیست آیتم ها اضافه کرده ایم. فیلتر orderBy یک آرایه ی ورودی (لیست فعالیت های ما) را پذیرفته، آن را کپی کرده و آن کپی را با خصوصیت ذکر شده در تگ select، مجددا مرتب می کند. تصادفی نیست که ویژگی مقداری تگ option نیز name است و همان مقداری است که توسط فایل JSON به عنوان خصوصیت یک activity ارائه شده است. این امر به AngularJS این امکان را می دهد که به صورت خودکار مقدار گزینه ی HTML ما را به یک لغت کلیدی قدرتمند برای طبقه بندی تمپلیت فعالیت های ما تبدیل کند.

دقت داشته باشید که ما رویداد های مربوط به تعامل کاربر را listen نمی کنیم. کد ما با callback ها و event handler هایی که برای رسیدگی به object هایی که ما بر روی ان ها کلیک کرده ایم، آنها را انتخاب نموده، لمس کرده یا فعال می کنیم، به کار برده شده اند گیج کننده نمی شوند. تمام کارهای سنگین و پیچیده به صورت هوشمند توسط AngularJS انجام می شود تا تابع controller را بیابیم، بین تمپلیت و controller پیوستگی ایجاد کنیم و داده را واکشی کرده و آن را بر روی صفحه نمایش دهیم.

AngularJS به سرعت در حال تبدیل شدن به فریم ورک جاوا اسکریپتی برتر برای توسعه ی وب اپلیکیشن های حرفه ای می باشد.

اگر شما نیز به دنبال فریم ورکی قدرتمند برای پروژه های مختلف در هر اندازه ای هستید، به شما توصیه می شوند AngularJS را بررسی کنید. می توانید این فریم ورک را از وب سایت AngularJS.org به صورت رایگان دانلود کنید.

 

 

منبع:

http://summits.ir/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA/%D9%81%D8%B1%DB%8C%D9%85-%D9%88%D8%B1%DA%A9-angular-js-%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA/3-%D8%AF%D9%84%DB%8C%D9%84-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D9%81%D8%B1%DB%8C%D9%85-%D9%88%D8%B1%DA%A9-angularjs-%D8%AF%D8%B1-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%DB%8C-%D8%A8/

 

 




  • No labels

1 Comment

  1. Anonymous

    سلام چرا من وقتی از ng-view استفاده میکنم با کلیک روی منو و navigate کردن اون به صفحات داخلی جی کوئری ها لود نمیشن؟