آموزش AngularJS

آموزش AngularJS

سلام – با آموزش AngularJS  در خدمتتان هستم . در این سری آموزشی می خواهیم از 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 type="text" ng-model="myInput"/>

<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) منتقل می کنیم :

<script type="text/javascript">

     var myApp = angular.module('myApp', []);

     myApp.controller('myAppCtrl', function ($scope) {

     $scope.somestring = 'test string';

     $scope.employeeModel = @Html.Raw(Json.Encode(Model));

     });

</script>

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

 

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

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

AngularJS & ASP.NET MVC InterAction

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

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

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

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

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

public string Extra { get; set; }

اکنون باید یک اکشن در کنترولر دات نت بسازیم بنام 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 میفرستیم .

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

<script type="text/javascript">

            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;

                    });

                }

            });

        </script>

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

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


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

 

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

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

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

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

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


تاریخ انتشار :۱۵ دی ۱۳۹۴



دیدگاه ها :