مقاله برسی AngularJS در ASP.NET MVC

AngularJS

در این پروژه شما درباره ی تکنولوژی AngularJS و مخزن که یکی ازالگو های مفید طراحی برای توسعه ی آسان و حرفه ای تر برنامه های کاربردی تحت وب است را می آموزید.

این آسان ترین آموزش در مبحث AngularJS  و الگوی مخزن برای توسعه ی حرفه ای تر برنامه های کاربردی MVC میباشد که شامل یه کد منبع درباره ی پروژه ی مدیریت اجازه ی تمرینی میباشد.

هدف این پروژه مشخص کردن تکنولوژی AngularJS  و مخزن می باشد که یکی از الگو های مفید طراحی به منظوره توسعه ی آسان و حرفه ای تر برنامه های کاربردی می باشد.

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

AngularJS قدرت کافی را دارد به خصوص برای برنامه های کاربردی (ساختن ، خواندن ، به روز رسانی،حذف). آن از الگو های MVC پیروی میکند تا کد هایمان واضح و مرتب باشند.

همچنین به ما این امکان را میدهد که کد بنویسیم و تست کردن کد ها وضعیت بسیار بهتری در AngularJS دارند .

اگر چه این فاکتور ها منجر به کاهش قدرت جی کوئری برای نوشتن سایر مدل های برنامه های کاربردی مانند بازی و غیره نمیشود.

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

این شامل چندین مزیت برای توسعه دهندگان است. برای مثال : تغییرات و به روز رسانی زمینه ها را مناسب تر باشند و چارچوب تست کردن برای کد هلی دسترسی داده ای فیزیکی اجرا نمیشود پس ایزوله بودنشان را انعطاف پذیرتر میکند.

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

در رابطه با هرکدام از این بخش ها توضیحات بیشتری خواهم داد. من این الگو ها و تکنولوژی ها را با پروژه های واقعی باز میکنم تا تصویر واضحی از آنها داشته باشیم

مخزن چیست؟

مخزن یکی از الگو های طراحی سودمند است که داده های فیزیکی را از میان بقیه ی لایه های بخش های دسترسی داده ها پنهان میکند.

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

این مانند یک خط است که پایگاه داده های واقعی را نسبت به سایر اجزا ایزوله میکند.

همچنین باعث میشود که برنامه های کاربردی وب مان مناسب تر برای تست کردن لایه به لایه بشوند.

علاوه بر این یک مموری داخلی مانند () تهیه میکند که با دسترسی به دامنه ی اشیاء منجر به چشم پوشی از تداوم و افزایش عملکرد میشود.

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

 آموزش AngularJS

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

قطعا راه دوم برای زمانی که تعداد زیادی اطلاعات دارید پیشنهاد می شود.

به همین ترتیب برای هر موجودی یک کنترلر در MVC تحت ایکس کنترلر تولید میکنیم.

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

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

شما باید داخل این کلاس لیست مخزن ها برای هر موجودی راعلاوه بر متد های “ذخیره” و “مرتب کردن” بسازید.

کنترلر ها فقط به واحد کار دسترسی دارند. شما لایه ی کاری و لایه ی داده تان را از هم جدا میکنید و هروقت که بخواهید میتوانید سیستمتان را عوض کنید و با ترجیح “ORM” دیگری مانند “nHibernate ” مشکلی با لایه ی بالاتر مانند “لایه کاری” بوجود نمی آید

چرا مخزن با چارچوب موجودی؟

این سوال خوبیست که اگر ما از چارچوب موجودی استفاده میکنیم پس دیگر چه احتیاجی به برپا کردن مخزن دیگری بالای زمینه داده ها داریم؟

زیرا زمینه داده ها خود یک مخزن می باشد.

تصور کنید یک روز شما میخواهید از لایه ی دسترسی داده های دیگری مانند “nHibernate ” یا ” ADO” و یا حتی فایل های “XML” استفاده کنید .

شما تنها کافیست که پایگاه داده را از “SQL” به “اوراکل” تغییر دهید.

پس مشکلاتتان بسیار کوچک است و تنها ناچار به تغییر کوچکی درکد های خود می باشید به جای تغییر تقریبا کل ساختار ها و بانویسی دوباره آنها.

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

AngularJS

AngularJS چیست ؟

AngularJS یک چارچوب جاوا اسکریپت است که برای مرتب کردن کد های “HTML” به صورت ساخت یافته تر و واضح تر و مختصر تر بکار میرود .

این تکنولوژی مشتری مداری کد های آسان و ارزان به منظور توسعه دادن و حتی طراحی وظایف ساده ارائه میدهد.

انگولارجی اس اکثر کد های زائد را حذف میکند به خصوص کد های برنامه تحت وب “”. این یک الگوی “”MV” میباشد و فقط یک ” MVC” نیست.

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

  • کتابخانه: این نوع شامل سری های تابعی مانند جی کوئری میباشند و زمانیکه شما از چند تا از آنها استفاده کنید ($.AJAx) این تابع های مرتبط را برای مدیریت توابع صدا میزند.
  • چارچوب ها: این نوع شامل ساختار های مخصوصی برای برنامه های اجرایی است وتوسعه دهنده ها باید از این ساختار ها پیروی کنند. مانند “handl”

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

خواص جدید AngularJS در تگ های “HTML ” مانند “ng-model” و “ng-repeat” که به اسم بخشنامه شناخته میشوند به منظور مچ شدن با موانع و انتقال داده میباشند.

در سوی دیگر AngularJS مخلوطی از “AJax” و “HTML DOM ” با ساختار های خوبی است که من به صورت زیر آنها را توصیف میکنم:

مزایای انگولار:

  • برای برنامه های کاربردی وب “CRUD ” بسیار خوب است.
  •  تست کردن را در برنامه های کاربردی وب “CRUD ” بسیار آسان میکند.
  • به نوشتن کد های کمتری احتیاج است.
  • میتوانید از کد هایتان سریعتر اجرا بگبرید.
  • یکی از معروفترین و پرطرفدارترین خاصیت ها در AngularJS دو راه آسان برای انقیاد است.
input type="text" ng-model="simpleBinding" /span{{simpleBinding}}/span
  • احتیاجی به تغییر دادن “HTML DOM ” نیست.
  • با کمک بخشنامه ها وظایف شما بسیار راحت تر و زودتر انجام میگیرد.
  • با طراحی آن در “MVC ” یا به عبارت بهتر “MVW” واشدن واقعی و عالی است

 AngularJS MVC

 

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

داخل “Model.js” نام برنامه ی انگولار را بنویسید مانند “Myup”.

این نام فایل های انگولارتان را به هم مرتبط میکند و شما باید برای مشاهده از آن درون تگ اچ تی ام التان استفاده نمایید.

در این سناریو من از””_Layout.cshtml” به عنوان مستر ویو خود (با توجه به الگوی MVC) استفاده میکنم.

در تگ اچ تی ام ال شما باید یک انگولار بخشنامه بنویسید ng-app=’MyApp’که فایل های انگولار را در خود نگه میدارد.

سپس شما باید این فایل ها را به ویو خود معرفی نمایید.

tablegt;

tr ng-repeat="employee in employees"gt;

  tdgt;

         {{employee.ID}}

  /tdgt;

/trgt;

/tablegt;

()()()()()()()()()()()()(()())()()()()()())

var Employee = {

   FirstName: $scope.FirstName ,

   LastName: $scope.LastName ,

   UserName: $scope.UserName

};

angularService.Add(Employee)

 

درون “Service.js” برای پاس دادن داده ها به “employos.cs“:


this.Add = function (employee) {

   var response = $http({

     method: "post",

     url: "/Employee/Add",

     data: JSON.stringify(employee),

     dataType: "json"

   });

   return response;

}

AngularJS در برابر جی کوئری

موانع در جی کوئری و راه حل ها در AngularJS :

  •  مشکل جی کوئری : اگر شما میخواهید که از چندین شخص استفاده کنید به شما اجازه استفاده از چندین مدل در یک مشاهده نخواهید داشت. برای پشتیبانی از آن احتیاج به نوشتن مشاهده ی مدل دارید.
  • راه حل AngularJS : میتوانید آن را با استفاده از شئ $Scope آن را کنترل کنید. این شئ فوق العاده ی ریز میتواند داده ها را ذخیره کند وتغییرات لازمه را انجام دهد.
  •  مشکل جی کوئری : شما مشکلی برای استفاده از حلقه ی foreach loop if  دارید اگر از مشاهده ی مدل استفاده میکنید. برای آن شما باید از حلقه ی For استفاده کنید.
  • راه حل AngularJS : میتوانید این مشکل را با استفاده از رهنمود “ng-repeat ” در داخل جدول حل کنید.
  •  مشکل جی کوئری :شما باید “HTM DOM ” را دستکاری کنید و با توجه به نیاز های مربوط به طراحی مدلتان آن را اختصاصی کنید و چیزی مانند این بنویسید :
Html.EditorFor(model = model.ArticleTitle).
  • راه حل AngularJS : اما با کمک گرفتن از AngularJS میتوانید با استفاده از <input> و تنها با اضافه کردن رهنمود مخصوصی به هدفتان برسید .

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

 AngularJS چیستدفع الگو

برای فهمیدن دفع الگو احتیاج دارید که Garbage Collection را نیز بشناسید.

Garbage Collection

هنگامی که شما یک شئ از نوع داده ی “زبان مشترک زمان اجرا” (CRL) بسازید فضای اختصاصی در داخل حافظه به شئ جدیدتان اختصاص داده خواهد شد.

در این پروسه مدیریت پشته به CRL کمک میکند تا فضای مخصوص را در حافظه به شئ اختصاص بدهد.

فضای حافظه محدود است و امکان ندارد که بتوان از اشیا زیادی به عنوان مصرف کنندگان منابع استفاده کرد.

به همین علت ما نیاز به ابزاری داریم که حافظه را از اشیایی که به مدت طولانی از حافظه استفاده نمیکنند و توسط برنامه ها برای مدتی صدا زده نمیشوند آزاد کند.

Garbage Collection ابزاری مناسب برای مدیریت حافظه و آزاد نمودن فضا از اشیای قدیمی و بلااستفاده است.

“IDisposable ” یک رابط کاربری است که منابع را برای بازپس گیری منابع خاص آزاد میکند که طول عمرشان برای برنامه نویس کاملا مشخص است.

مزایای آن عبارتند از خدمات تخصیص سرعت بالا بدون مشکلات دراز مدت تکه تکه شدن.

در تصویر زیر شما سه مرحله میبینید .در اولی اشیایی با نام های “A” و “B” و “C” در نظر گرفته شده اند که واضح است که “A” و “B” مرده اند درحالی که ” “C زنده است.

در طرف دیگر شئ های جدیدمان “D” و “”E و””F در یک صف برای استفاده از منابع هستند.

فرض کنید اگر ابزاری برای متوقف کردن و آزاد سازی حافظه یا منابع وجود نداشته باشد آنگاه سایر اشیای ما باید مدت های مدیدی در صف بمانند و این سرعت اجرا را بسیار پایین می آورد.

جمع کننده ی زباله ها اینجاست تا به ما کمک کند و “A” و “B” را جمع آوری میکند و آن ها را از منابع میگیرد زیرا آنها قدیمی هستند و برنامه ای از آنها تا مدت طولانی استفاده نمیکند.

پس در مرحله ی دوم ما فضای خالی بیشتری داریم و “D” و “E” و “F” نیز میتوانند در مرحله سوم وارد شوند.

متد دفع یا به بیان بهتر الگوی دفع به ما کمک میکند که اجرای بهتری داشته باشیم. خصوصا زمانیکه از طول عمر منابع اطلاعات کامل داشته باشیم.

 آموزش AngularJS

class X : IDisposable
{

//Define Flag: Show us if dispose has been called or not
bool disposed = false;

// Public implementation of Dispose pattern callable by consumers.
public void Dispose()
{
Dispose(true);
//Using SuppressFinalize helps us to do not finalize object later
GC.SuppressFinalize(this);
}

// Protected implementation of Dispose pattern and allow to override it later
protected virtual void Dispose(bool disposing)
{
if (disposed)
return;

if (disposing)
{
//Free any other managed objects here.
context.Dispose();
}

// Free any unmanaged objects here.
disposed = true;
}

~X()
{
// release resources
Dispose(false);

}
};

//Calling dispose inside Controller:
protected override void Dispose(bool disposing)
{
X.Dispose();
base.Dispose(disposing);
}

چگونه AngularJS را نصب کنیم

به مسیر زیر بروید :

  • Tools menu -> library package manager -> package manager concole

درخط این را بنویسید : install-package angularjs –version 1.3.8

مراقب انواع ورژن های angular باشید زیرا امکان دارد استایل کد ها اندکی با هم متفاوت باشد.

 AngularJS چیست

استفاده از کد

سناریو: من میخواهم از سناریوی مدیریت اجازه برای توضیح بهتر این بخش استفاده کنم.

(angularJS و مخزن در MVC) که شامل دو صفحه می باشد , اولی فقط برای انجام تابع CRUD , ساخت کارکنان , خواندن یا انتخاب کارکنان , به روز رسانی یا حذف اطلاعاتشان , علاوه بر اشاره کردن به سایر امکانات در Angular مانند جهت یابی , فیلتر کردن می باشد صفحه ی دوم اختصاص دارد به اجازه برای هر یک از کارکنان .

در اینجا شما به یک جعبه کمبو برای نگه داشتن نام کارکنان و نقش آنها احتیاج دارید. بنابراین الزامات اساسی در برخورد با یک برنامه ی تحت وب قوی MVC را پوشش میدهد.

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

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.