نظرات مطالب
چطور مسیریابیهای ASP.NET MVC را دیباگ کنیم؟
در بخشهای پیشین ( بخش اول و بخش دوم) به خوبی با اصول و روش مسیریابی (Routing) در AngularJS آشناشدیم. در این بخش میخواهم به برخی جزئیات درباره مسیریابی بپردازم.اولین موضوع، تغییراتی است که از نسخه 1.2 به بعد در روش استفاده از سرویس مسیریابی در AngularJS بوجود آمده است. از نسخه 1.2 سرویس مسیریابی از هسته اصلی AngularJS خارج شد و برای استفاده از امکانات این سرویس باید فایل angular-route.js و یا angular-route.min.js را به صفحه خود بیفزاییم:
<script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/angular-route.min.js"></script>
var app = angular.module("mainApp", ['ngRoute']);
.when('/controllerAS', { controller: 'testController', controllerAs: 'tCtrl', template: '<div>{{tCtrl.Title}}</div>' })
باقی ماجرا مانند گذشته است.
موضوع دیگری که پرداختن به آن میتواند مفید باشد، بررسی بیشتر متد when است. وقتی در متد config ماژول از routeProvider$ استفاده میکنیم، داریم سرویس route$ را تنظیم، مقداردهی اولیه، و نمونه گیری میکنیم. درواقع با استفاده از متدهای when و otherwise داریم سرویس route$ را مقداردهی اولیه میکنیم (برای آشنایی با تقاوت factory، service و provider کلیک کنید ). خوب! جریان این مقادیری که به عنوان پارامتر به این متدها پاس میکنیم چیست؟
متد when به این صورت تعریف شده است:
when(string path, object route)
پارامتر path در بخشهای قبل به اندازه کافی معرفی شده است. پارامتر route یک شی است شامل اطلاعاتی که با تطبیق آدرس صفحه با پارامتر path، به route.current$ مقداردهی میشود (حالا باید متوجه شده باشید که روال افزودن دادههای سفارشی به سیستم مسیریابی و دسترسی به آنها که در بخش دوم مطرح شد به چه شکل کار میکند). این شی میتواند خصوصیات از قبل تعریف شدهای داشده باشد که در ادامه آنها را مرور میکنیم:
controller: میتواند یک رشته شامل نام کنترلر از قبل تعریف شده، یا یک تابع به عنوان تابع کنترلر باشد.
controllerAs: رشتهای شامل نام مستعار کنترلر.
template: رشتهای شامل قالب html، و یا تابعی که قالب html را بازمیگرداند. این خصوصیت بر templateUrl اولویت دارد. اگر مقدار این خصوصیت یک تابع باشد، routeParams$ به عنوان پارامتر ورودی به آن پاس میشود.
templateUrl: رشتهای شامل مسیر فایل قالب html، و یا تابعی که این رشته را بازمیگرداند. اگر مقدار این خصوصیت یک تابع باشد، routeParams$ به عنوان پارامتر ورودی به آن پاس میشود.
redirectTo: مقداری برای به روز رسانی location$، و فراخوانی روال مسیر یابی. این مقدار میتواند یک رشته، و یا تابعی که یک رشته را بازمیگرداند باشد. اگر مقدار این خصوصیت یک تابع باشد، این پارامترها به آن پاس میشود:
- routeParams$ برای دسترسی به پارامترهای آمده در آدرس صفحه جاری.
- ()location.path$ جاری به صورت یک رشته.
- ()location.search$ جاری به صورت یک شی.
caseInsensitiveMatch: یک مقدار منطقی است که مشخص میکند بزرگ و کوچک بودن حروف در تطبیق آدرس صفحه با پارامتر route در نظر گرفته بشود یا نه. مقدار پیشفرض این خصوصیت false است. یعنی در همه مثالهایی که تا کنون زده شده، اگر بزرگ و کوچه بودن حروف آدرس صفحه با مقدار مشخص شده برای پارامتر route متفاوت باشد، روال مسیریابی انجام نخواهد شد. برای رفع این مشکل کافی است مقدار این خصوصیت را true قرار دهیم. برای مثال، مسیر 'controllerAS/' که بالاتر تعریف کردهایم را درنظر بگیرید. اگر www.mySite.com/#/ControllerAS را وارد کنیم، هیچ اتفاقی نخواهد افتاد و در واقع این آدرس با route مشخص شده تطبیق پیدا نمیکند. اگر بخواهیم کوچک و بزرگ بودن حروف در نظر گرفته نشود، کافیست به این ترتیب عمل کنیم:
.when('/controllerAS', { controller: 'testController', controllerAs: 'tCtrl', template: '<div>{{tCtrl.Title}}</div>', caseInsensitiveMatch: true })
resolve: نگاشتی از وابستگیهایی که میخواهیم به کنترلر تزریق شود. قبلا مفهوم promise توضیح داده شده است . اگر هر یک از این وابستگیها یک promise باشد، مسیریاب تا resolve شدن همه آنها یا reject شدن یکی از آنها منتظر میماند. در صورتی که همه promiseها resolve شوند، رخداد routeChangeSuccess$، و در صورتی که یکی از آنها reject شود رخداد routeChangeError$ اجرا میشود. یکی از کاربردهای resolve زمانیست که بخواهید جلوی تغییر محتویات صفحه، پیش از بارگذاری دادهای که از سمت سرور درخواست کردهاید را بگیرید.
$routeProvider .when('/resolveTest', { resolve: { // این وابستگی بلافاصله بازمیگردد person: function () { return { name: "Hamid Saberi", email: "Hamid.Saberi@Gmail.com" } }, // بازمیگرداند promise این وابستگی یک // شدن آن به تاخیر میافتد resolve پس تغییر مسیر تا currentDetails: function ($http) { return $http({ method: 'Get', url: '/current_details' }); }, //میتوانیم از یک وابستگی در وابستگی دیگر استفاده کنیم facebookId: function ($http, currentDetails) { $http({ method: 'GET', url: 'http://facebook.com/api/current_user', params: { email: currentDetails.data.emails[0] } }) }, // بارگذاری فایلهای اسکریپت مورد نیاز fileDeps:function($q, $rootScope){ var deferred = $q.defer(); var dependencies = [ 'controllers/AboutViewController.js', 'directives/some-directive.js' ]; //$Script.js بارگذاری وابستگیها با استفاده از $script(dependencies, function(){ // همه وابستگیها بارگذاری شده اند $rootScope.$apply(function(){ deferred.resolve(); }); }); return deferred.promise; } }, controller: function ($scope, person, currentDetails, facebookId) { this.Person = person; }, controllerAs: 'rtCtrl', template: '<div>{{rtCtrl.Person.name}}</div>', caseInsensitiveMatch: true })
اشتراکها
نگاهی به تغییرات اخیر ASP.NET
چند مطلب تکمیلی در مورد فرمهای RC3
Template-driven Forms in Angular 2
Model-driven Forms in Angular 2
Custom Validators in Angular 2
Template-driven Forms in Angular 2
Model-driven Forms in Angular 2
Custom Validators in Angular 2
نظرات مطالب
معرفی Kendo UI
در حال مطالعه فریم ورکهای جاوااسکریپتی طی مقالات سایت جاری هستم
با توجه ب گستردگی این فرم ورکها مثل کندو ، آنگولار ، ناک اوت ، React ، Ember و ..
با توجه به زمان حال و توسعه ی برنامههای حاضر و گستردگی منابع برای هر کدام ، انتخاب بهتر کدام است و یا برای چه موردی از چه فریم ورکی استفاده میشود ؟
واقعا دچار اختلال در انتخاب شدم ، لطفا راهنمایی کنید. تشکر
با توجه ب گستردگی این فرم ورکها مثل کندو ، آنگولار ، ناک اوت ، React ، Ember و ..
با توجه به زمان حال و توسعه ی برنامههای حاضر و گستردگی منابع برای هر کدام ، انتخاب بهتر کدام است و یا برای چه موردی از چه فریم ورکی استفاده میشود ؟
واقعا دچار اختلال در انتخاب شدم ، لطفا راهنمایی کنید. تشکر
نظرات مطالب
Url Routing در ASP.Net WebForms
مرجع رسمی مسیریابی در وب فرمها عنوان میکنه که URL routing allows you to configure an application to accept request URLs that do not map to physical files. یعنی چون آدرس شما الان پسوند پیدا کرده، دیگه وارد سیستم مسیریابی نمیشه و به صورت یک فایل فیزیکی پردازش میشه. یعنی در مسیر و پوشهای شبیه به آدرسی که نوشتید به دنبال اون فایل میگرده (که نیست و به همین جهت خطای 404 رو دریافت میکنید). البته با تنظیم RouteTable.Routes.RouteExistingFiles = true امکان تغییر این پیش فرض هست. در این حالت درخواست تمام فایلهای فیزیکی وارد سیستم مسیریابی میشن. البته در این مورد خاص باید یک IRouteHandler بنویسید تا این درخواست فایل رسیده رو پردازش کنه.
نظرات مطالب
Url Routing در ASP.Net WebForms
در حالت کلی در وب فرمها، برای مسیردهی سازگار با Routing باید از ResolveUrl استفاده کنید.
برای اسکریپتها:
برای شیوهنامهها:
متد ResolveUrl به صورت خودکار مسیر صحیح را تولید میکند.
اما ... این روش کار کردن صحیح نیست. چون به زودی به تعداد زیادی فایل اسکریپت و CSS لینک داده شده در صفحه میرسید. برای یکی کردن آنها یا از ScriptManager استفاده کنید (برای اسکریپتها) و یا از روشهای bundling & minification که با فایلهای CSS و JS سازگار است. مسیریابیها را هم به صورت خودکار تصحیح میکند.
برای اسکریپتها:
<script type='text/javascript' src='<%= ResolveUrl("~/Scripts/test.js") %>'></script>
<link rel="stylesheet" href="<%= ResolveUrl("~/myStylysheet.css")%>" type="text/css" />
اما ... این روش کار کردن صحیح نیست. چون به زودی به تعداد زیادی فایل اسکریپت و CSS لینک داده شده در صفحه میرسید. برای یکی کردن آنها یا از ScriptManager استفاده کنید (برای اسکریپتها) و یا از روشهای bundling & minification که با فایلهای CSS و JS سازگار است. مسیریابیها را هم به صورت خودکار تصحیح میکند.
اشتراکها
انجام SEO بر روی برنامه های Angular
نکات ارتقاء به نگارش RC5
در نگارش RC5، فرمت فایل app.routes.ts که در نگارش RC4 معرفی شد، اندکی تغییر کردهاست.
ابتدای فایل به این شکل:
و انتهای آن نیز به این شکل تغییر پیدا میکند:
پس از آن، این تعاریف، با توجه به ساده شدن فایل main.ts، به قسمت imports فایل app.module.ts منتقل و معرفی میشوند.
به علاوه در قسمتهای مختلف برنامه مواردی مانند ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HTTP_PROVIDERS را یافته و حذف کنید. اینها نیز به فایل app.module.ts و قسمت imports آن منتقل شدهاند.
در نگارش RC5، فرمت فایل app.routes.ts که در نگارش RC4 معرفی شد، اندکی تغییر کردهاست.
ابتدای فایل به این شکل:
// - Routes instead of RouteConfig // - RouterModule instead of provideRoutes import { Routes, RouterModule } from '@angular/router';
// - Updated Export export const routing = RouterModule.forRoot(routes);
به علاوه در قسمتهای مختلف برنامه مواردی مانند ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HTTP_PROVIDERS را یافته و حذف کنید. اینها نیز به فایل app.module.ts و قسمت imports آن منتقل شدهاند.