بسم الله الرحمن الرحیم

یکی از مباحث بسیار مهم تعیین سطح دسترسی و احراز هویت در سیستم های وب سرویس، Angular ،Single Page Application می باشد. در این آموزش یکی از بهترین روش های ممکن برای انجام این گونه فعالیت ها را به شما آموزش خواهیم داد.

آموزش web api

امروزه تکنولوژی های بسیار زیادی وجود دارند مانند Angular یا AngularJS , Node , Single Page Application , mobile applications, RESTful API services web API,و ...همه ی این تکنولوژی ها داده هایی را از سمت Back-end دریافت می کنند و در بخش Front-End سایت نمایش می دهند.

یکی از مباحثی که در استفاده از این تکنولوژی ها مطرح است، مبحث Authentication می باشد. در تمامی این تکنولوژی ها شما می توانید اطلاعات را توسط Request هایی به سمت Back-end ارسال کنید و نتایج مربوطه را دریافت کنید، در اینجا این مسئله بسیار مهم خواهد بود که چطور مشخص کنید چه کسانی اجازه دریافت اطلاعات را دارند.

با توجه به این مسئله که امروزه Cookie به عنوان یک روش نوین جهت مشخص کردن سطوح دسترسی و محلی برای ذخیره سازی این اطلاعات مطرح است و دیگر از این روش به جای روش منسوخ شده ی Session استفاده می شود. پس می توان نتیجه گرفت که در اینجا نیز می توانیم از این روش استفاده کنیم.
در مقاله های پیشین به صورت مفصل در خصوص آموزش ASP Identity صحبت کرده ایم. در صورت تمایل می توانید این مقالات را از طریق لینک زیر مطالعه کنید، تا با روش کار Cookie و ASP Identity بیشتر آشنا شوید.

آموزش ASP Identity

بسم الله الرحمن الرحیم

بخش اول آموزش Angular و  ASP.NET Web API

بخش دوم آموزش Angular و  ASP.NET Web API

بخش سوم آموزش Angular و  ASP.NET Web API

بخش  سوم ساخت پروژه و اضافه کردن Angular به پروژه

در این دوره آموزشی قصد داریم یک پروژه را با استفاده ASP.NET MVC & Web API و همچنین Angular پیاده سازی کنیم.

از این رو آموزش هایی برای این معماری ها قبلا ارائه گردیده است که شما می بایست ابتدا این آموزش ها را مطالعه نمایید تا بتوانیم به سراغ مباحث مربوط به این دوره برویم، پس اگر با این معماری ها آشنایی کاملی ندارید ابتدا از طریق لینک های زیر آموزش های پیش نیاز این دوره را بررسی و مطالعه کنید و سپس به سراغ این آموزش بیاید.

 آموزش Angular

 آموزش Web API

و در نهایت دوره آموزش Angular و  ASP.NET Web API

کدهای این دوره را در پایین همین صفحه قرار داده ام

در بخش قبل کدهای مربوط به Web API را با هم بررسی کردیم در این بخش انشالله کدهای مربوط به Angular را با هم بررسی خواهیم کرد و آموزش مربوط به این دوره را به پایان خواهیم رساند.
در این بخش ابتدا بر روی کدهای مربوط به Angular تمرکز خواهیم کرد و سپس با کدهای CSS3 وب سایت خود را زیبا می کنیم.

Angular یک open-source JavaScript framework است که با استفاده از آن می توانیم برنامه های خود را به صورت Model-View-Controller (MVC) توسعه دهیم تا فرایند تست و توسعه آن ساده تر شود. در خصوص مباحث Angular دوره کاملی را در همین بلاگ بیان کردیم اگر نیاز به آموزش این مفاهیم دارید لطفا دوره زیر را بررسی کنید
 

دوره آموزشی Angular

ما باید ابتدا توسط Package Manager Console در Visual Studio فایل های مربوط به AngularJS را به پروژه خود اضافه کنیم و سپس کنترلر مربوطه خود را اضافه کنیم تا توسط آن اطلاعات مربوط به پاسخ ها و سوالات را بررسی کنیم.
خوب Visual Studio خود را باز کنید و کدهای مربوط به این آموزش که در پایین همین صفحه برای دانلود قرار داده شده است را دانلود کنید و سپس کدهای درون پوشه Begin را باز کنید همچنین شما می توانید با کدهایی که در مرحله گذشته با یکدگیر ایجاد کردیم را در این بخش از آموزش نیز استفاده کنید. همچنین اگر در بخش قبل کدها را دانلود کرده اید نیازی به دانلود مجدد نیست زیرا در فایل دانلود شده دو پوشه وجود دارد یکی با نام End که در آموزش قبل با آن کار کردیم و دیگری Begin که در این آموزش بر روی آن کار خواهیم کرد.

از منوی Tools | Library Package Manager گزینه Package Manager Console را انتخاب کنید و سپس دستور زیر را برای نصب AngularJS.Core NuGet package به صورت زیر اجرا کنید.

Install-Package AngularJS.Core

بسم الله الرحمن الرحیم

مشاهده تمامی آموزش های دوره AngularJS

آموزش Angular

بخش بیست و سوم (پیاده سازی یک مثال ساده)

AngularJS Application

یکی از اهداف AngularJS ساخت نرم افزارهایی با قابلیت SPA یا همان single page application است، ما در این دوره با برخی از دستورات در AngularJS آشنا شدیم و حال وقت آن است تا یک برنامه کاربردی برای خود تولید کنیم.
 

ساخت AngularJS Application

شما به اندازه کافی در حال حاضر با AngularJS آشنا شده اید که بتوانید یک برنامه SPA طراحی کنید.

کد برنامه

 <html ng-app="myNoteApp">

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش بیست و دوم

AngularJS Internalization

AngularJS از سه نوع مختلف فیلتر برای تاریخ، اعداد، واحد پول در خصوص internationalization پشتیبانی می کند. برای استفاده از این ویژگی کافی است فایل JS مورد نظر خود را برای استفاده از فرمت کشور مربوطه در صفحه قرار دهید. به صورت پیش فرض تنظیمات مرورگر شما برای نمایش اطلاعات مورد استفاده قرار می گیرد. برای مثال ما از فرمت کشور دانمارک در زیر استفاده کرده ایم.
 

<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش بیست و یکم

AngularJS Custom Directives

Custom directive ها برای افزایش کارایی صفحات HTML مورد استفاده قرار می گیرند. Custom directive به وسیله تابع "directive" تعریف می شوند. یک custom directive به سادگی عناصر مطابقت داده شده را جایگزین می کند. برنامه های AngularJS در زمان لود شدن و آماده شدن برای اجرا (bootstrap) عنصرهایی که تطابق با درخواست ما را دارند پیدا می کند و در زمان فعال شدن از متد ()compile استفاده می کند پس از این مرحله با استفاده از متد ()link مربوط به Custom directive بر اساس Scope رهنمود مربوطه را پردازش می کند.


AngularJS  برای ساخت custom directive از انواع زیر پشتیبانی می کند.

•    Element  هنگامی که با یک عنصر مطابقت داده شود، رهنمود فعال می شود.
•    Attribute هنگامی که با یک خاصیت مطابقت داده شود، رهنمود فعال می شود.
•    CSS هنگامی که با یک استایل CSS مطابقت داده شود، رهنمود فعال می شود.
•    Comment هنگامی که با یک comment  مطابقت داد شود، رهنمود فعال می شود.
 

درک کردن رهنمودهای Custom

تگ های HTML را بنویسید:

<student name="Mahesh"></student><br/>
<student name="Piyush"></student>

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش نوزدهم

AngularJS Services

AngularJS به وسیله معماری سرویس از مفهوم جدا سازی ارتباطات پشتیبانی می کند. سرویس ها توابع javascript ایی هستند که فقط برای پاسخ گویی به کارهای خاص مورد استفاده قرار می گیرند. این باعث می شود کارها به صورت

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش هجدهم

AngularJS Scopes

بخش دوم AngularJS Scopes

Scope  یک شی جاوا اسکریپتی است که وظیفه اتصال مابین View و کنترلرها را بر عهده دارد. Scope شامل مدل داده (model data) است. در کنترلر مدل داده از طریق شی scope$ مورد دسترسی قرار می گیرد.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش هفدهم

AngularJS Views

AngularJS از قابلیت طراحی برنامه های تک صفحه (Single Page Application) با قابلیت استفاده از چندین View در یک صفحه پشتیبانی می کند. برای استفاده از این ویژگی AngularJS رهنمودهای ng-view  و  ng-templateرا به همراه سرویس routeProvider$ فراهم کرده است.

ng-view

تگ ng-view به سادگی یک place holder ایجاد می کند که بر اساس تنظیمات صورت گرفته View مورد نظر (html  یا  ng-template view) می تواند درون place holder ما قرار گیرد.

روش استفاده

یک Div با ng-view درون ماژول اصلی تعریف می کند.

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش شانزدهم

AngularJS Ajax

AngularJS با استفاده از سرویس http$ امکان خواندن اطلاعات را از سرور فراهم می کند. سرور شما می تواند یک دیتابیس برای خواندن اطلاعات ایجاد کند. AngularJS به داده ها در قالب JSON نیاز دارد و هنگامی که داده ها آماده باشند سرویس http$ می تواند از داده های سرور به صورت زیر استفاده کنند.

بسم الله الرحمن الرحیم

بخش اول معرفی دوره

در این دوره آموزشی قصد داریم یک پروژه را با استفاده ASP.NET MVC & Web API و همچنین Angular پیاده سازی کنیم.

از این رو آموزش هایی برای این معماری ها قبلا ارائه گردیده است که شما می بایست ابتدا این آموزش ها را مطالعه نمایید تا بتوانیم به سراغ مباحث مربوط به این دوره برویم، پس اگر با این معماری ها آشنایی کاملی ندارید ابتدا از طریق لینک های زیر آموزش های پیش نیاز این دوره را بررسی و مطالعه کنید و سپس به سراغ این آموزش بیاید.

بخش اول آموزش Angular و  ASP.NET Web API

بخش دوم آموزش Angular و  ASP.NET Web API

بخش سوم آموزش Angular و  ASP.NET Web API

 آموزش Angular

 آموزش Web API

و در نهایت دوره آموزش Angular و  ASP.NET Web API

در برنامه های وب سنتی، client (که معمولا یک مرورگر{browser} است) ارتباط خود را با سرور با ارسال یک درخواست برای صفحه ای خاص آغاز می کند. سرور درخواست ارسالی را بررسی و پردازش می کند و سپس صفحه HTML مربوطه را برای کلاینت ارسال می کند. در ادامه این فرایند ممکن است کاربر (Client) مجددا بر روی یک لینک کلیک کند یا یک فرم اطلاعاتی را برای سرور ارسال کند، با این کار، فرایند بررسی و ارسال پاسخ در سرور مجددا آغاز می شود و یک صفحه جدید برای کاربر ارسال می شود.

در یک Single-Page Applications (SPA) با ارسال اولین درخواست تمام صفحه در مرورگر لود می شود، اما پس از این مرحله دیگر تمامی اطلاعات ارسال و دریافت نمی شوند بلکه تعامل از طریق ارسال درخواست به روش Ajax ادامه می یابد.این فرایند باعث می شود که تنها بخشی از صفحه که نیاز است تغییر داده شود، پس نیازی به لود شدن تمامی صفحه نیست. روش SPA باعث می شود زمان انتظار کاربر برای دریافت پاسخ کاهش داده شود، در نتیجه منابع بهتر مورد استفاده قرار خواهند گرفت.

معماری SPA شامل رقابت های خاص خود می باشد که در برنامه های وب سنتی این موارد وجود ندارد، اما تکنولوژی های در حال ظهوری مانند ASP.NET Web API، JavaScript framework هایی مانند AngularJS و روش های استایل دهی که به وسیله CSS3 فراهم شده است، طراحی و ساخت برنامه های SPA را ساده کرده است.

در این بخش ما یک برنامه SPA را برای یک پرسش و پاسخ ساده ایجاد می کنیم. در این برنامه ابتدا فرایند انجام پرسش و پاسخ را به وسیله ASP.NET Web API ایجاد می کنیم و سپس با استفاده ازAngularJS  و  CSS3برنامه خود را طراحی و قابلیت responsive UI را به آن اضافه می کنیم.