۵ ویژگی خارق العاده AngularJS

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

برای این که یک ایده از آن چه می توان با AngularJS انجام داد داشته باشیم نگاهی به میزان فروش آیتم های AngularJS در بازار Envato  داشته باشید.

رشد قابل قبول فروش

 فریم ورک AngularJS  یک فن آوری قوی و Client Side جدید است که روشی برای رسیدن به گزینه های قوی تر برای CSS ،HTML  و جاوا معرفی کرده و مشکلات آن ها را حل می کند. این دقیقا یک HTML  است که برای محتوای پویا ساخته شده باشد. در این مقاله ، ما مهم ترین مفاهیم فریم ورک AngularJS را با هم مرور خواهیم کرد تا یک تصویر کلی از آن بدست آوریم.هدف ما این است که بعد از دیدن این ویژگی ها شما  هیجان لازم را برای ایجاد برنامه های بعدی خود با کمک AngularJS را بدست بیاورید.

ویژگی شماره ۱ : Data-Binding دو طرفه

به مدل کد نویسی خود به عنوان تنها منبع حقیقی برنامه فکر کنید. این دقیقا همان جایی است که شما  همه چیز را خوانده و بروز رسانی می کنید.

اتصال داده ها(Data-Binding ) جذاب ترین ویژگی در فریم ورک AngularJS می باشد. این ویژگی باعث می شود در زمان کد نویسی صرفه جویی شود. در برنامه نویسی تحت وب ۸۰ درصد از کد ها صرف تغییرات و دستکاری در DOM می شود که با کمک اتصال داده ها می توانید این زمان را صرف خود برنامه کنید.

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

به شکل سنتی، برنامه نویس موظف است به شکل دستی عناصر و خصیصه های DOM را دستکاری کند. این یک مسیر دو طرفه است. تغییرات در Model باعث تغییرات در عناصر  DOM می شود یعنی که تغییرات در عناصر DOM  ملزم به تغییرات در Model می باشند. البته این موضوع بعد ها در تراکنش با کاربر کمی پیچیده می شود چون که برنامه نویس موظف است تغییرات را برداشت مفید کرده و آن را به شکل Model درآورده و در صورت نیاز بروز رسانی کند. این یک پروسه دستی و خسته کننده است که با بزرگ تر شدن برنامه، کنترل آن سخت تر شده و پیچیدگی آن بیشتر می شود.

باید یک راه بهتر وجود داشته باشد. فریم ورک AngularJS با ویژگی Data-Binding خود، همگام سازی بین DOM و Model و بالعکس را انجام  می دهد. در این جا نمونه ای را  می بینیم که چگونه یک مقدار ورودی به یک عنصر متصل می شود .

ویژگی ۲ : قالب(Template) ها

در AngularJS، یک قالب، همان HTML  قدیمی و ساده است. زبان HTML  گسترده است و شامل دستور العمل هایی در  مورد ارائه ی مدل به شکل ظاهری است.

قالب های Html توسط مرورگر در DOM قرار داده می شوند. سپس DOM به کامپایلری برای AngularJS تبدیل شده و این فریم ورک، قالب Dom  را برای رندر کردن دستور العمل ها، تغییر می دهد که به آن ها Directive می گویند. در مجموع، این دستور العمل ها موظف به Data-Binding برای  نمایش برنامه ی شما هستند.

باید بدانیم که در هیچ جایی فریم ورک AngularJS،  قالب ها را به شکل String دستکاری نمی  کند. ورودی AngularJS در مرور گر DOM است نه HTML. اتصال  داده، تغییر شکل Dom است و نه تغییرات در InnerHTML. استفاده از DOM به عنوان ورودی، مهم ترین تفاوت AngularJS  با هم نوعان خود است. استفاده از DOM به شما امکان می دهد تا دستور العمل های خودتان را ایجاد کرده و حتی آن ها را به شکل کامپوننت هایی با قابلیت مصرف دوباره جمع کنیم.

یکی از مزیت های این روش جریان کاری نزدیک بین برنامه نویس و طراح می باشد. طراحان معمولا به شکل معمولی HTML  را علامت گذاری می کنند و سپس برنامه نویس با تلاش بسیار کم اتصال داده(Data-Binding) را انجام داده و  کارکرد هر بخش را تعیین می کند.

در این جا نمونه ای را به شما نشان می دهد که در آن از Ng-repeat  برای ایجاد Loop در آرایه Image و پر کردن یک قالب Img استفاده شده است.

باید اشاره کنم که AngularJS  برای استخراج غالب ها در برنامه تان شما را وادار به یادگیری زبان و کد های جدیدی نمی کند.

ویژگی سوم : JVC

 فریم ورک AngularJS اصول پایه ای در الگوی اصلی نرم افزار JVC  را برای ساختن برنامه های تحت وب سمت کاربری پیاده می کند.

MVC یا الگوی کنترلر – نمایه – مدل برای افراد مختلف معنی متفاوتی دارد. AngularJS MVC  را به شکل سنتی در خود جای نداده است و آن را به نزدیک تر به MVVM( مدل – نمایه – نمایه مدل ) ارائه می کند.

Model :

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

مدل نمایه(View model) :

View model، یک شی است که داده های مشخص و روش های خاص برای Profile های مختلف را در خود جای می دهد.

View model خود را به شکل یک شی $scope  نشان می دهد که در AngularJS  قرار دارد. $scope در حقیقت یک شی جاوا اسکریپت است که یک Api  کوچک برای شناسایی تغییرات و نشان دادن آن ها در وضعیتش دارد.

کنترلر (Controller) :

Controller موظف به تنظیم وضعیت اولی و ترکیب $scope برای کنترل رفتار داده هاست. باید  توجه داشته باشید که کنترلر با سرویس های ریموت تراکنش ندارد.

View :

View همانHTML است که فریم ورک AngularJS بعد از اجرای کد های HTML  در اتصال داده ها رندر نموده است.

این بخش ها یک زیربنای مناسب برای معماری برنامه ی شما هستند. $scope دارای مرجعی به داده است controller   رفتار داده ها را کنترل می کند و View طرح ظاهری برنامه را در تراکنش با کنترلر مدیریت می کند.

ویژگی ۴ : Dependency Injection (تزریق وابستگی)

AngularJS  دارای سیستم Dependency Injection است که به برنامه نویس کمک می  کند برنامه ای بسازد که راحت تر نوشته، فهمیده و تست می شود.

DI به شما امکان می دهد تا نیازی به گشتن و یا ایجاد وابستگی(Dependency) ها نداشته باشید. تصور کنید که شما بگویید: ” سلام من x را لازم دارم” و DI آن را در اختیار شما بگذارد.

برای دسترسی به سرویس های هسته ای فریم ورک AngularJS باید این سرویس را به شکل یک پارامتر درون AngularJS  اضافه کنید ، بعد از شناسایی سریعا برای شما سرویس مورد نظر ارائه خواهد شد.

function EditCtrl($scope, $location, $routeParams) {

// Something clever here…

}

شما هم چنین می توانید سرویس های سفارشی خود را ایجاد کرده و به شکل زیر در اختیار بگیرید:

angular.

module(‘MyServiceModule’, []).

factory(‘notify’, [‘$window’, function (win) {

return function (msg) {

win.alert(msg);

};

}]);

function myController(scope, notifyService) {

scope.callNotify = function (msg) {

notifyService(msg);

};

}

myController.$inject = [‘$scope’, ‘notify’];

ویژگی ۵ : دستور العمل ها(Directives)

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

دستور العمل ها یا Directives را می توانید برای ایجاد تگ های سفارشی HTML و ویجت های سفارشی و جدید مورد استفاده قرار دهید. می توانید از آن ها برای  عناصر با رفتار های مختلف استفاده کرده و برای دستکاری ویژگی های DOM  از آن ها بهره ببرید.

در این جا نمونه ای از دستور العمل( Directives) ها را برای یک رویداد و بروز رسانی $scope آن به شکل زیر بررسی میکنیم.

myModule.directive(‘myComponent’, function(mySharedService) {
return {
restrict: ‘E’,
controller: function($scope, $attrs, mySharedService) {
$scope.$on(‘handleBroadcast’, function() {
$scope.message = ‘Directive: ‘ + mySharedService.message;
});
},
replace: true,
template: ‘‘
};
});

شما می توانید این دستور العمل را به شکل زیر سفارشی کنید :

ساختن برنامه با ترکیبی از این دستور العمل ها کمک می کند براحتی بتوانید کاربرد های جدید را همانطور که به ان ها نیاز است به برنامه اضافه کنید.

ویژگی ها خاص دیگر : تست کردن

تیم AngularJS  معتقدند که تمامی کد ها در جاوا اسکریپت باید با یک سری تست همراه باشند. با این ذهنیت , امکان تست کردن برنامه های  نوشته شده توسط AngularJS همیشه وجود دارند. پس هیچ عذر و بهانه ای برای انجام ندادن این کار وجود ندارد.

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

وقتی که پروژه ی اصلی را نوشتید باید تست آن را انجام دهید . نتیجه تست معمولا به شکل زیر است:

مستندات API موجود پر از تست هایی هستند که به شما بخوبی نشان می دهند که بخش های مختلف فریم ورک Angular.JS چگونه عمل می کنند.