ساخت لاگین در MVC با استفاده از Angular

این مقاله به نحوه ساخت یک لاگین از نوع Angular به کمک UI-Route در MVC پرداخته است و آموزش داده می شود که چگونه یک لاگین مبتنی بر نقش را می توان به کمک Angular JS ساخت.

Angular JS یک چارچوب بسیار قدرتمند برای ساخت برنامه های تک صفحه ایی است و وقتی ما در حال ساخت یک SPA هستیم، مسیریابی در این نوع برنامه ها بسیار مهم است. در این آموزش ما از UI-Route استفاده می کنیم و در سیستم دو نقش مدیر و کارمند داریم.

مرحله ۱

ویژوال استدیو را باز کرده و وارد File > New > Project بشوید.

از بین گزینه های موجود، گزینه Web template and ASP.NET Web Application را همانگونه که در تصویر زیر نمایش داده شده است انتخاب کنید.

گزینه MVC را انتخاب کنید.

بعد از زدن کلید OK صفحه project solution همانگونه که در تصویر زیر دیده می شود، باز خواهد شد.

مرحله ۲

در داخل Solution Explorer یک فولدر جدید با نام App بسازید و فولدرهای نقش های داخل برنامه را (مدیر و کارمند) بسازید. فایل های HTML و JavaScript که در تصویر بالا نمایش داده شده است را در داخل این فولدر بسازید. ما از UI-Route برای لاگین برنامه استفاده کردیم چراکه UI-Route قابلیت مدیریت وضعیت برنامه را دارد.

مرحله ۳

صفحه login.html را بسازید و کدهای زیر را در آن کپی کنید.

 

حالا فایل loginController.js را برای صفحه لاگین بسازید و کدهای زیر را در آن وارد کنید.

 

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

۱- مدیر

نام کاربری:”manager” و رمز عبور “۱”

۲- کارمند

نام کاربری:”employee” و رمز عبور “۱”

مرحله ۴

در داخل فولدر Manager یک صفحه با نام home.html برای مدیران بسازید و کد زیر را در آن قرار دهید.

 

سپس در داخل فولدر Employee یک صفحه با نام home.html برای کارمندان بسازید و کد زیر را در آن قرار دهید.

 

مرحله ۵

وقتی در حال تنظیم وضعیت در UI-Route هستیم، به کمک stateProvider صفحه /login را به عنوان صفحه پیشفرض برنامه تعیین می کنیم. ثبت لینک ها در _layout.cshtml را فراموش نکنید.

 

مرحله ۶

بعد از اینکه مراحل فوق را کامل انجام دادید، برنامه را اجرا کنید، خروجی در مرورگر پیشفرض شما نمایش داده خواهد شد.

ابتدا نام کاربری و رمز عبور مدیر را وارد می کنیم

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

 

دانلود سورس کد
پسورد : csharpoop.com

ساخت لاگین در MVC با استفاده از Angular
5 (100%) 1 رای

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *