AngularJs Routing

این مقاله angularJs routing را توضیح می دهد و نشان می دهد که چگونه می توان پروژه های ASP.NET MVC را تنظیم کرده و با آن کار کرد.

قدرت فریم ورک AngularJs در این است که بسیار جالب بوده و به سرعت می توانید آن را یاد بگیرید و با آن کار کنید. یکی از مواردی که در AngularJS بسیار به چشم می آید فریم ورک routing است. حال می خواهیم ببینیم routing چیست و چگونه می توان آن را تنظیم کرد و با پروژه های asp.net mvc کار کرد.

angularJs routing

در برنامه های معمولی ASP.Net MVC جا به جایی بین بخش های برنامه معمولا نیاز به یک رفت و برگشت به سرور برای refresh کامل محتوای صفحه دارد.

اگرچه، در یک Single Page Application فقط عناصر داخل صفحه آپدیت می شوند و تجربه بهتری را در اختیار کاربر قرار می دهند.

در پیاده سازی معمولی ASP.Net MVC ممکن است همچنان برای رفتن به قسمت های دیگر برنامه نیاز به refresh کامل صفحه باشد، اما عموما یک single page امکانات برنامه را از طریقه Viewهای داینامیک و فراخوانی web service Ajax مدیریت می کند.

AngularJS از Viewهای داینامیک از طریق route و ngView directive پشتیبانی می کند و برنامه MVC شما partial viewهایی فراهم می کند که ngView directive به طور داینامیک بارگذاری می کند.

AngularJs Routing چیست

بخش کد:

در این مثال، viewهای Home، About و Contact به صورت partial viewهایی هستند که توسط MVC Controller اجرا می شوند.

public class HomeController : Controller

   {

       public ActionResult Index()

       {

           return View();

       }

       public ActionResult Home()

       {

           return PartialView();

       }

       public ActionResult About()

       {

           return PartialView();

       }

       public ActionResult Contact()

       {

           return PartialView();

       }

   }

App.js فایلی است که ماژول AngularJs برنامه در آن ایجاد شده است. اجازه دهید، تنظیمات را یک به یک بررسی کنیم.

 'use strict';
var app = angular.module('App',['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
      templateUrl: '/Home/Home',
      controller: 'homeCtrl',
    });
    $routeProvider.when('/About', {
      templateUrl: '/Home/About',
      controller: 'aboutCtrl',
    });
    $routeProvider.when('/Contact', {
      templateUrl: '/Home/Contact',
      controller: 'contactCtrl'
    });
    $routeProvider.otherwise({
      redirectTo: '/'
    });
  }]);

Routeها با استفاده از ngView directive ای به صورت “<div ng-view></div>” در صفحه Layout.cshtml استفاده می شوند که وظیفه بارگذاری محتوای route را دارد.

به محض اینکه route تغییر می کند، محتوا نیز آپدیت می شود.

جزئیات فایل

زبان پروژه : JS&C#&MVCASP.NET
حجم فایل پیوست : 19 MB

دانلود فایل

دانلود با لینک مستقیم
پسورد فایل : www.mspsoft.com
مسعود شریفی پور

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

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

دیدگاه‌ها

*
*

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