آموزش مقدماتی انگولار جی‌اس [AngularJS]

آموزش مقدماتی انگولار جی‌اس [AngularJS]

آموزش مقدماتی انگولار جی‌اس [AngularJS]

AngularJS Tutorial For Beginners

آموزش مقدماتی انگولار جی‌اس

 

راهنمای نصب و استفاده از انگولار 1 در پروژه MVC

سلام – با آموزش AngularJS  در خدمتتان هستیم. انگولار جی‌اس (AngularJS) با نام های انگولار 1 (Angular 1.x) و Angular.js نیز شناخته شده است.

  • اولین نسخه انگولار در اکتبر ۲۰۱۰ میلادی (Oct 2010) ارائه شد.
  • آخرین نسخه Angular 1.x نیز در سال ۲۰۱۷ به بیرون آمد که ورژن Angular 1.6.9 بود.

 

در این سری آموزشی می خواهیم از Angular در پروژه ASP.NET MVC استفاده کنیم . پس برنامه ویژوال استودیو را باز کرده و یک پروژه MVC جدید بسازید ( دوستان عزیز ، لینک دانلود سورس کد این مقاله در انتهای مقاله آمده است )

نصب AngularJS  :

می توانیم برای افزودن کتابخانه Angular به پروژه خود نوگت مربوط به آنرا نصب کنیم ولی برای شروع کار ، فعلا reference  مربوط به Angular  را به پروژه خود اضافه میکنیم . بنابراین عبارت زیر را در گوگل جستجو کنید :

AngularJS google developer reference

سپس روی اولین سایت یافت شده توسط گوگل کلیک کنید (تصویر زیر) :

جستجوی AngularJS در گوگل

پس از ورود به لینک Hosted Libraries در وب سایتی که باز شده ، روی AngularJS کلیک کرده و کد script موجود را کپی میکنیم و در فایل Layout واقع در فولدر Shared پروژه MVC خود پیست میکنیم :

AngularJS Reference

 

معرفی دایرکتیوهای انگولار (Angular Directives(

به عباراتی نظیر ng-model , ng-app که در تگ های صفحه مینویسیم ، گویند . اولین دایرکتیوی که مینویسیم ng-app می باشد . در فایل Layout پروژه خود ، در تگ html آغازین صفحه ، عبارت ng-app را بصورت زیر می نویسیم :

<html lang="en" ng-app>

قابلیت Angular Binding :

برای شروع ، فایل ویوی Index را که در فولدر Home می باشد را باز کنید . در یک پاراگراف به دلخواه دستورات زیر را بنویسید :

<input ng-model="myInput" type="text">
<span>you Typed : {{myInput}}</span>

با اجرای این View ، هر متنی که داخل TextBox بنویسیم بلافاصله در span نوشته می شود . میبینیم که اینکار براحتی توسط Angular قابل انجام است ولی اگر میخواستیم با Javascript و یا حتی JQuery قابلیت فوق را پیاده سازی کنیم مسلما به این سادگی نبود ! بنابراین انجام فرآیندهای Interaction در UI توسط AngularJS بسیار راحت می باشد.

قابلیت تعامل با Code Behind :

برای این منظور ، روی فولدر Scripts راست کلیک کرده و Add >> New Item را انتخاب کنید . سپس از بخش general ، یک فایل متنی (Text File) به این فولدر اضافه کنید و نام آنرا controller.js بگذارید .

در این فایل دستورات زیر را وارد میکنیم :

var myApp = angular.module('myApp', []); 
myApp.controller('myAppCtrl', function ($scope) { 
 $scope.somestring = 'test string'; 
});

 

توضیح : در دستور خط اول توسط تابع module ، نام برنامه را تعریف کرده ایم (بطور مثال myApp) و در دستورات بعد ، یک controller نوشتیم که رشته تستی ، خروجی آن است .

برای استفاده از این دستورات جاوااسکریپت در برنامه ، ابتدا فایل controller.js را به فایل  Layout اضافه میکنیم (بعد از ارجاع به AngularJS) . سپس تگ html فایل Layout را بصورت زیر تعریف میکنیم :

<html lang="en" ng-app="myApp">

اکنون فایل Index.cshtml را باز کرده و تگ div را بصورت زیر مینویسیم :

<div ng-controller="myAppCtrl">
From Controller : {{somestring}}
</div>

خروجی دستورات فوق From Controller : test String می باشد .

ارتباط Models  و Angular :

ابتدا در فولدر Models ، یک کلاس بنام Employee.cs میسازیم و property های زیر را برایش تعریف میکنیم :

public class Employee { 
 public string FirstName { get; set; } 
 public string LastName { get; set; } 
}

 

سپس در HomeController و در اکشن Index ابتدا یک reference به Models در بالای صفحه میدهیم و سپس از کلاس Employee یک شئ می سازیم و مقداردهی میکنیم :

Employee e = new Employee() { 
 FirstName="Ehsan" , LastName="Safari"
}; 
return View(e);

 

اکنون عبارت $scope.employeeModel = Model; را به controller.js اضافه میکنیم .

بعد از اجرای پروژه مشاهده می کنیم که خروجی ما بصورت تصویر زیر است یعنی کدهای Angular رندر (render) نشده اند :

مشکل render نشدن angular

پس متوجه می شویم که عبارت Model در controller.js شناخته شده نیست و error میدهد .

نکته : برای تعامل بین دات نت و AngularJS ، باید کدهای جاوااسکریپت مربوط به Angular را داخل فایلهای cshtml بنویسیم .

بنابراین برای رفع این مشکل دستورات فایل controller.js را به فایل Layout (تگ head بخش script) منتقل می کنیم :

var myApp = angular.module('myApp', []); 
myApp.controller('myAppCtrl', function ($scope) { 
 $scope.somestring = 'test string'; 
 $scope.employeeModel = @Html.Raw(Json.Encode(Model)); 
});

 

پس در این مثال ، دیگر نیازی به رفرنس دادن به فایل controller.js نداریم . همانطور که متوجه شدید employeeModel را Encode کرده ایم.

 

برقراری تعامل بین کدهای MVC و AngularJS

 

ارسال داده از UI به Model و سپس به Angular :

در تعامل بین دات نت و انگولار ، میخواهیم داده ای را که کاربر از سمت View به دات نت میفرستد را بررسی و کنیم و پس از اعمال تغییراتی ، به انگولار پاس دهیم .

برای شروع این تعامل ، مثال زیر را مرحله به مرحله با هم پیاده سازی میکنیم :

ابتدا در فایل Index.cshtml و در تگ div که قبلا کدها را نوشتیم ، یک submit قرار میدهیم بصورت زیر :

<input type="submit" ng-click="update(myInput)" value="Update" />

دایرکتیو ng-click:

در اینجا با دایرکتیو دیگری بنام ng-click آشنا می شویم . که یک نام دلخواه update به آن میدهیم و مقدار textbox که در بالا داشتیم را بصورت پارامتر ورودی آن در نظر میگیریم.

حال در مدل Employee که قبلا ساختیم ، یک property دیگری بنام Extra تعریف میکنیم :

public string Extra { get; set; }

ایجاد اکشنی بنام UpdateData :

اکنون باید یک اکشن در کنترولر دات نت بسازیم بنام UpdateData :

public ActionResult UpdateData(string p1) { 
 var updatedData = p1 + "–successfull–"; 
 var response = new Employee() { 
  FirstName = "John", LastName = "Doe", Extra=updatedData 
 }; 
 return Json(response,JsonRequestBehavior.AllowGet); 
}

 

توضیح : این اکشن یک پارامتر رشته ای میگیرد و در بدنه تابع ، روی آن تغییراتی انجام میشود و سپس از مدل Employee یک شئ میسازیم و سه property آنرا مطابق دستورات فوق ، مقداردهی میکنیم . در نهایت response را به صورت Json به View میفرستیم .

تعریف تابع update در فایل Layout:

در این مرحله باید فایل Layout را باز کنیم و تابع update را برای Angular بنویسیم . بنابراین کدهای جاوااسکریپتی که در فایل Layout مینویسیم به شکل زیر خواهد بود :

var myApp = angular.module('myApp', []); 
myApp.controller('myAppCtrl', function ($scope,$http) { 
 $scope.somestring = 'test string'; 
 $scope.employeeModel = @Html.Raw(Json.Encode(Model)); 
 $scope.update = function(p1){ 
  $http({ url : 'Home/UpdateData?p1='+p1, method:'GET' })
  .success(function(data){ 
   $scope.somestring = data.Extra; $scope.employeeModel = data; 
   }); 
  } 
});

 

نکته : $http یکی از سرویسهای Angular می باشد .

مشاهده خروجی برنامه:

پس از اجرای برنامه و وارد کردن کلمه mohtava در textbox و زدن کلید Update خروجی بصورت زیر خواهد بود :

تعامل بین UI و Model و Angular

بدین ترتیب توانستیم بین کدهای دات نت (MVC Models & Controllers) و کدهای AngularJS و View (UI) تعامل برقرار کنیم .

برای یادگیری بیشتر در زمینه AngularJS به وب سایت W3Schools مراجعه شود .

منبع مقاله آموزشی AngularJS برای توسعه دهندگان MVC : وب سایت Udemy

برای دانلود سورس کد این مقاله روی لینک زیر کلیک نمایید :

 دانلود سورس کد مقاله آموزشی AngularJS 

0/5 (0 نظر)

مشخصات مقاله

آموزش مقدماتی انگولار جی‌اس [AngularJS]

تبلیغات

فرم ارسال دیدگاه درباره

آموزش ایجاد فرم پیشرفته توسط AngularJS

دیدگاه کاربران درباره

آموزش ایجاد فرم پیشرفته توسط AngularJS

دیدگاهی وجود ندارد