در این مقاله می آموزیم که Angularjs چیست و چرا یکی از بهترین تکنولوژی هاست؟ و نحوه ی استفاده از آن در MVC و همچنین نحوه ی پیکربندی آن را در Visual Studio را فرا خواهیم گرفت.

در ابتدا:

با سلام خدمت کاربران گرامی در این مقاله ما سعی داریم، تا تجربیات خودمان را در زمینه ی Angular.js درAsp.Net MVC با شما به اشتراک بگذاریم این مقاله حتی برای افراد مبتدی نیز مفید است.

1.چرا این تکنولوژی بهترین است؟

2.چرا ما باید از MVC استفاده کنیم؟

3.چرا ما باید از Angular.js استفاده کنیم؟

4.چرا ما باید با از Angular.js در MVC استفاده کنیم؟

5.روش پیکربندی Angular.js در MVC چگونه است؟

با ما باشید تا پاسخ تمام این سوالات در این مقاله بدست بیاورید.

1.چرا این تکنولوژی بهترین است؟

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

اکثر اوقات برنامه نویسان برنامه های خود را با مدل (Model,View,Controller) MVC ایجاد می کنند بدلیل اینکه این ساختار بسیار ساده است و مامی توانیم بعد از ایجاد این مدل از آن مجددا استفاده کنیم.

توضیح کوتاه : ( Model=بخش داده ها) ( View=نمایش) ( Controller=بخش مدیریت) در ادامه توضیح کاملتری خواهیم داد.

Asp.net MVC با Web Api بهترین نوع تکنولوژی زبان سمت سرور است که ما می توانیم تمام خدمات پروژه خود را در ابزارهای مختلف مانند (تلفن همراه، آی پد و غیره ) داشته باشیم، و همچنین می توانیم  API های مختلف Web رابطور جداگانه در IIS میزبانی کنیم که این موضوع عملکرد سرور را افزایش می دهد.

Angular.js برای مشتریان بهترین گزینه است بدلیل اینکه با استفاده از پروتکل RESTful می توانیم به سرعت آن را توسعه دهیم، و همچنین  بهترین اتصال را با داده هایمان برقرار کنیم.

2..چرا ما باید از MVC استفاده کنیم؟

ASP.NET MVC به شما یک راه و روش با قدرت ارائه می دهد تا بر اساس این الگو یک وب سایت پویا بسازید، و با کنترل تمام یک، برنامه نویسی لذتی بخشی را تجربه کنید.

MVC الگوی معماری یک برنامه را به سه قسمت اصلی جدا می کند.

Model=به طور کلی داده ها و منطق و قواعد کلی به طور مستقیم از این بخش مدیریت می شود.

View=این بخش به معنای نمایش و در واقع بخش خروجی اقدامات ما می باشد.

Controller=این بخش قلب اصلی نرم افزار است و ورودیها را دریافت تبدیل و به دو بخش نمایش یا مدل ارسال می کند.

از ویژگی های ASP.NET MVC

API وب از چهارچوب MVC برای ساخت و ساز رست ( RESTful یک معماری وب سرویس است که از HTTP برای انتقال اطلاعات میان کلاینت و سرور استفاده میکند ).

ما می توانیم با استفاده از jQuery , AngularJS)  NuGet) را نصب کنیم ..

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

 ماژول مسیریابی مسئول mapping اقدامات خاص است.

چرا ما باید از Angular.js استفاده کنیم ؟

Angular.js یک زبان برنامه نویسی منبع باز است که بر پایه ی الگوی Model-view-Controller عمل میکند، که آخرین و پیشرفته ترین فریم ورک سمت کاربر جاوا اسکریپت می باشد.

یکی از بهترین مزیت های این مدل از اتصال داده ها این است که مدل تغییرات بطور خودکار با تغییر مقادیر، آن را در لحظه، در دید کاربر نیز تغییر می دهد و به همین دلیل آن را  two way binding می نامند.

ویژگی هایی از Angular.js

دو راه متصل کردن داده ها

استفاده و پشتیبانی از الگوی طراحی MVC

پشتیبانی و مسیریابی مانند Singel Page Application (پیج های تک صفحه ای)

پشتیبانی از خدمات RESTful

تزریق وابستگی (Dependency Injection) (جهت تزریق وابستگی‌های خارجی یک کلاس به آن، بجای استفاده مستقیم از آن‌ها در درون کلاس.)

چرا ما باید از AngularJS در MVC استفاده کنیم.

Angular.js و Asp.net mvc هردو با الگوی MVC سازگار هستند و مقدار زیادی از پروژه ها هستند که از این دو باهم استفاده می کنند.

وباهم به خوبی عمل می کنند زیرا کدهای  MVC سمت سرور، نهایتا فایل های JSON را تولید می کند که سمت سرویس گیرنده نامیده می شود.

علاوه بر این شما می توانید از کنترل MVC در HTML استفاده کنید، برای View ها یا Razor Views برای برنامه های خودتان استفاده کنید این قابلیت به شما قدرت می دهد تا برای مجوز هدایت و خطاها و ..

نحوه ی پیکر بندی کردن Angular.js در MVC

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

در ویژوال استودیو 2015 منوی File سپس New وبعد ASP.NET Web Application

سپس از تصویری که در زیر نشان داده شده در قسمت نوع پروژه Web API Project را انتخاب کنید.

حالا Project Solution باز می شود و طبق تصویر زیر ادامه می دهیم.

راست کلیک بروی پروژه و انتخاب کنید قسمت NuGet را انتخاب کنید.

بر روی Browes Table کلیک کنید و Angular.js را جستجو کنید.

ما باید در ابتدا فایل های AngularJS و AngularJS.Core و AngularJS.Route را دانلود کنیم.

پس از دانلود کامل صفحه ای که باز میشود که مسیر نصب را در یک مسیر خروجی نمایش داده خواهد شد.

اضافه کردن یک پوشه و ایجاد فایل جدید اسکریپت بعنوان مدل Ng.Module.js.

صفحه _layout.cshtml  را باز میکنیم و فایل ng-appرا  بانام تست ایجاد میکنیم

<body ng-app="Test">

بک فایل برای script برای یک کنترل ایجاد میکنیم.

صفحه Index.cshtml را باز کرده وکد ng-controller را در کنترل آن مینوسیم.

    <div class="row" ng-controller="HomeController">  
        <div class="col-md-4 btn-success"> {{Testname}} </div>  
        <div class="col-md-4 btn-primary"> {{Test}} </div>  
        <div class="col-md-4 btn-danger"> {{happy}} </div>  
    </div> Link the AngularJS files in _layout.cshtml page  
    <script src="~/Scripts/angular.min.js"></script>  
    <script src="~/AngularJS/Ng.Module.js"></script>  
    <script src="~/AngularJS/Ng.Ctrl.js"></script>   

و در آخر برای اجرا کلید f5 را میزنیم.

آموزش angular