Pwned Passwords is the password search feature for Have I Been Pwned (HIBP), a free service that aggregates data breaches and helps people find out if they've been impacted by malicious activity on the web.
اشتراکها
سایت CodePlex آرشیو شد
اشتراکها
101 مثال از LINQ در اندروید
«... در این سیستم از AngularCLI استفاده نشده است ...»
مشکل همینجا است! اگر از Angular CLI استفاده کنید، در پشت صحنه تمام مباحث bundling & minification و همچنین حذف کدهای مرده (استفاده نشده) را به صورت خودکار توسط Webpack، پلاگینهای آن و کامپایلر مورد استفاده، انجام میدهد (و شما نیازی به تنظیم اضافهتر و یا دستی برای این مورد ندارید). در کل روش استاندارد کار با Angular با راه اندازی یک پروژهی Angular CLI شروع میشود. بنابراین بهتر است آرام آرام کارتان را به این سیستم منتقل کنید (روش کار با System JS که روزهای اول ارائهی Angular مطرح شده بود (همان تصویری که ارسال کردید)، الان دیگر مطلقا استفاده نمیشود). همین سری Angular CLI را از قسمت اول آن پیگیری کنید، برای شروع کفایت میکند.
اگر به قسمت «یک مثال: ساخت برنامهی مثال قسمت چهارم - تنظیمات مسیریابی در حالت prod » مطلب جاری دقت کنید، یک تصویر خروجی ذیل آن ارسال شدهاست.
در این خروجی، کمتر از 5 فایل js قابل مشاهده هستند که حاصل bundling & minification نهایی و تمام فایلهای برنامه، توسط Angular CLI هستند.
به علاوه Kendo UI یک نگارش مخصوص Angular را دارد که برای آن از صفر بازنویسی شدهاست و کاملا با Angular CLI سازگار است. همچنین مجموعه کامپوننتهای سبکتر و بهتر دیگری هم برای Angular وجود دارند.
اشتراکها
Autofac 4 core منتشر شد
Autofac 4 core is released. Many of the integration libraries have also been updated for Autofac 4 compatibility.
پس از سیستم طرحبندی بوت استرپ، مهمترین کامپوننتهای آن، کامپوننتهای راهبری سایت مانند Navs ،Tabs ،Pills و Navbars هستند. Navbars در بوت استرپ 4 نسبت به نگارش سوم آن بازنویسی کامل شدهاند و شامل بهبودهای قابل ملاحظهای هستند.
کامپوننتهای Nav در بوت استرپ 4
کامپوننتهای گروه Nav، در نگارش 4 آن به علت استفادهی از Flexbox، تغییرات بسیاری داشتهاند و در نتیجهی آن، انعطاف پذیرتر و سادهتر شدهاند.
در ابتدا لیست سادهی زیر را در نظر بگیرید. تنظیمات ابتدایی آن برای تبدیل به منوی راهبری بالای سایت به صورت زیر است:
ابتدا کلاس nav به یک ul اضافه میشود. سپس به هر آیتم آن، کلاس nav-item را اضافه میکنیم. در آخر به هر لینک آن نیز کلاس nav-link نسبت داده میشود:
در اینجا دو کلاس active و disabled نیز به لینکهای منوی راهبری اضافه شدهاند. البته این کلاسها تا تکمیل نهایی nav، ظاهر آنچنان متفاوتی را ارائه نمیدهند.
اولین شیوهنامهای را که میتوان به nav اضافه کرد، nav-pills است:
Pills شبیه به دکمهها هستند و در این حالت لینک active، واضحتر به نظر میرسد.
و یا میتوان nav-tabs را به nav افزود:
روش دیگر تعریف nav، استفاده از المان nav و سپس حذف ul و li و همچنین nav-item است:
در اینجا امکان کار با کلاسهای Flexbox، مانند justify-content-center را نیز مشاهده میکنید. برای مثال برای هدایت منوی راهبری به سمت چپ و یا راست صفحه میتوان بجای center، از end و یا start استفاده کرد. انجام یک چنین کارهایی در نگارشهای قبلی بوت استرپ بدون Flexbox، مشکل بودند.
کلاس دیگری را که در اینجا میتوان استفاده کرد، flex-column است تا آیتمهای nav، بجای نمایش در یک ردیف، در یک ستون ظاهر شوند:
و یا میتوان با استفاده از break-points، سبب شد تا اگر اندازهی صفحه بیش از sm بود، آیتمهای منوی راهبری، ردیفی و اگر کمتر از آن بود (حالت موبایل)، ستونی نمایش داده شوند:
ایجاد navbars در بوت استرپ 4
Navbar بوت استرپ 4، بازنویسی کامل شده و کار کردن با آن نسبت به نگارش سوم آن بسیار سادهتر شدهاست.
با این خروجی:
در اینجا، کار با افزودن کلاس navbar به المان nav شروع میشود. سپس هر لینک داخل آن، کلاسهای nav-item nav-link را پیدا میکند. در اینجا اگر آیتمی قرار است به صفحهی جاری اشاره کند، با کلاس active مشخص خواهد شد.
سپس توسط کلاسهای bg-dark navbar-dark، رنگهای پس زمینه و رنگ متن مشخص شدهاند. برای مثال میتوان bg-light navbar-light را نیز آزمایش کرد:
و یا بجای این رنگهای پیشفرض، در بوت استرپ 4 میتوان به سادگی رنگ navbar را توسط یک background-color دلخواه، سفارشی سازی کرد:
کاری که در نگارشهای پیشین بوت استرپ به سادگی میسر نبود.
همچنین اگر دقت کرده باشید از کلاس navbar-expand-sm نیز استفاده شدهاست. حالت پیشفرض نمایش آیتمهای navbar، ستونی است و برای حالت موبایل درنظر گرفته شدهاست. استفادهی از navbar-expand-sm سبب میشود تا پس از عرض sm، آیتمهای navbar همانند شکلهای فوق، در طی یک ردیف نمایش داده شوند و در عرض کمتر از sm، به صورت یک ستون:
به علاوه آیتمهای navbar را داخل یک container قرار دادهایم:
علت اینجا است که چون navbar تعریف شده خارج از container اصلی است، اگر چنین کاری را انجام ندهیم، آیتمهای آن از سمت چپ صفحه بدون تراز بودن با container ذیل آن نمایش داده خواهند شد. تعریف یک container داخل navbar، این مشکل عدم تراز بودن عمودی را برطرف میکند.
تعریف متون و لوگو در navbar بوت استرپ 4
برای تعریف متن لوگوی سایت در navbar به صورت زیر عمل میشود:
در اینجا با استفاده از کلاس navbar-brand در یک div مجزا، سبب نمایش متن لوگوی سایت شدهایم:
و یا میتوان بجای div، از المان anchor نیز استفاده کرد تا به صورت لینک نمایش داده شود:
و بجای متن، تصاویر را نیز میتوان قرار داد.
برای تعریف متنی در navbar از کلاس navbar-text استفاده میشود:
اما چون این متن طولانی است، بهتر است آنرا در اندازهی صفحهی xl نمایش دهیم. به همین جهت با افزودن کلاس d-none، آنرا در تمام اندازهها مخفی میکنیم. سپس با افزودن d-xl-inline-block، آنرا پس از عرض xl نمایان خواهیم کرد.
همین تنظیم را به navbar-brand، در اندازهی sm نیز اضافه کردهایم تا لوگوی سایت در اندازههای موبایل ظاهر نشود.
افزودن drop downs به navbar در بوت استرپ 4
برای تبدیل یکی از آیتمهای منوی راهبری، به منو، از dropdown استفاده میشود که نمونهای از آنرا در مثال زیر مشاهده میکنید:
با این خروجی:
- دراپداون نیاز به یک container دارد که آنرا با تعریف یک div با کلاس dropdown تعریف کردهایم.
- سپس به لینکی که قرار است آنرا نمایش دهد، کلاس dropdown-toggle را اضافه میکنیم تا آیکن مثلثی رو به پایینی را نمایان کند. وجود این مثلث، بیانگر وجود منویی به همراه آن است.
- اکنون با تنظیم data-toggle به dropdown، کدهای جاوا اسکریپتی بوت استرپ، این المان را به صورت یک dropdown پردازش میکنند و نیازی به افزودن اسکریپتی به صفحه برای فعالسازی آن نیست. ویژگیهای aria-expanded و aria-haspopup نیز به مقدار دهی پیشفرضهای کدهای جاوا اسکریپتی آن کمک میکنند.
- خود منو توسط دربرگیرندهای با کلاس dropdown-menu و آیتمهایی با کلاس dropdown-item تشکیل میشود.
- در ادامه برای متصل کردن این دربرگیرنده به لینک نمایش دهندهی منو، یک id را به لینک انتساب میدهیم (به نام servicesDropdown) و سپس aria-labelledby دربرگیرنده را به این id، مقدار دهی میکنیم.
- در این مثال با استفاده از کلاس navbar-nav ml-sm-auto، سبب شدهایم تا منوی سایت، از لبهی سمت راست صفحه پس از عرض sm، شروع شود.
افزودن المانهای فرمها به منوی راهبری سایت
برای اضافه کردن المانهای فرم به منوی راهبری سایت، ابتدا نیاز است کلاس form-inline را بر روی container این فرم قرار داد و سپس به ورودیهای این فرم، کلاس form-control را اضافه میکنیم. اگر نیاز بود، توسط کلاسهای margin و padding مخصوص بوت استرپ 4 مانند mr-2 نیز میتوان بین آنها فاصله ایجاد کرد:
با این خروجی:
بوت استرپ در اندازهی بزرگتر صفحه، فرم را به سمت راست و آیتمهای منو را در سمت چپ نمایش میدهد.
کنترل محل قرارگیری المانها در منوی راهبری سایت
توسط کلاسهایی مانند fixed-top (قرار گرفتن در بالای صفحه)، fixed-bottom (قرار گرفتن در پایین صفحه) و sticky-top، میتوان محل قرارگیری منوی راهبری را تغییر داد. این کلاسها را در مطلب «طرحبندی صفحات وب با بوت استرپ 4 - قسمت دوم» پیشتر بررسی کردیم.
برای توضیح حالت sticky-top، فرض کنید بالای منو، تصویر بزرگی از لوگوی سایت را دارید و این منو زیر آن قرار گرفتهاست. زمانیکه صفحه به سمت پایین اسکرول میشود، این منو نیز پایین خواهد آمد تا جائیکه در لبهی بالای صفحه قرار گیرد. پس از آن، این منو در همین ناحیه باقی مانده و شبیه به fixed-top عمل میکند.
یک نکته: اگر fixed-bottom را مورد استفاده قرار دادید:
ممکن است متن پایین صفحه زیر این منو قرار گیرد و قابل خوانده شدن نباشد. برای این منظور میتوان از کلاس margin-bottom بر روی container استفاده کرد:
اضافه کردن منوی همبرگری به منوی راهبری سایت
در مورد کلاس navbar-expand-sm در این مطلب توضیح دادیم. هرچند قابلیت عمودی و افقی شدن خودکار آیتمهای منوی راهبری بسیار جالب و کاربری است، اما در صفحات نمایشی کوچک، این نمایش عمودی میتواند ارتفاع قابل ملاحظهای را به خود اختصاص دهد. به همین جهت میخواهیم نمایش آیتمهای آنرا وابسته به تصمیم کاربر کنیم.
- در اینجا نحوهی پیاده سازی منوی همبرگری را در بوت استرپ 4 ملاحظه میکنید.
- ابتدا نیاز است دکمهی این منو اضافه شود که توسط کلاس navbar-toggler مشخص شدهاست. سپس با توجه به اینکه این کامپوننت توسط کدهای جاوا اسکریپتی بوت استرپ کار میکند، اطلاعات مورد نیاز آنرا توسط ویژگیهای data-toggle، data-target و aria مشخص میکنیم.
- این دکمه نیاز دارد تا به یک div با کلاس collapse navbar-collapse متصل شود. این اتصال نیز از طریق id آن صورت میگیرد که در ویژگی data-target مقدار دهی شدهاست.
- اگر این دکمه را پس از navbar-brand قرار دهیم، در سمت چپ صفحه و اگر پیش از آن قرار دهیم، در سمت راست صفحه ظاهر میشود.
در حالت نمایش sm، آیتمهای منو مخفی شده:
با کلیک بر روی دکمهی منوی همبرگری آن، گزینههای منو نمایش داده میشوند:
و در حالت اندازهی بزرگتر صفحه، محو میشود:
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_07.zip
کامپوننتهای Nav در بوت استرپ 4
کامپوننتهای گروه Nav، در نگارش 4 آن به علت استفادهی از Flexbox، تغییرات بسیاری داشتهاند و در نتیجهی آن، انعطاف پذیرتر و سادهتر شدهاند.
در ابتدا لیست سادهی زیر را در نظر بگیرید. تنظیمات ابتدایی آن برای تبدیل به منوی راهبری بالای سایت به صورت زیر است:
<body> <div class="container"> <div class="row"> <section class="col-12"> <ul class="nav"> <li class="nav-item"><a class="nav-link active" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Mission</a></li> <li class="nav-item"><a class="nav-link" href="#">Services</a></li> <li class="nav-item"><a class="nav-link" href="#">Staff</a></li> <li class="nav-item"><a class="nav-link disabled" href="#">Testimonials</a></li> </ul> </div> </div> </body>
در اینجا دو کلاس active و disabled نیز به لینکهای منوی راهبری اضافه شدهاند. البته این کلاسها تا تکمیل نهایی nav، ظاهر آنچنان متفاوتی را ارائه نمیدهند.
اولین شیوهنامهای را که میتوان به nav اضافه کرد، nav-pills است:
<ul class="nav nav-pills">
Pills شبیه به دکمهها هستند و در این حالت لینک active، واضحتر به نظر میرسد.
و یا میتوان nav-tabs را به nav افزود:
<ul class="nav nav-tabs">
روش دیگر تعریف nav، استفاده از المان nav و سپس حذف ul و li و همچنین nav-item است:
<nav class="nav nav-pills justify-content-center"> <a class="nav-link active" href="#">Home</a> <a class="nav-link" href="#">Mission</a> <a class="nav-link" href="#">Services</a> <a class="nav-link" href="#">Staff</a> <a class="nav-link disabled" href="#">Testimonials</a> </nav>
کلاس دیگری را که در اینجا میتوان استفاده کرد، flex-column است تا آیتمهای nav، بجای نمایش در یک ردیف، در یک ستون ظاهر شوند:
و یا میتوان با استفاده از break-points، سبب شد تا اگر اندازهی صفحه بیش از sm بود، آیتمهای منوی راهبری، ردیفی و اگر کمتر از آن بود (حالت موبایل)، ستونی نمایش داده شوند:
<nav class="nav nav-pills justify-content-center flex-column flex-sm-row">
ایجاد navbars در بوت استرپ 4
Navbar بوت استرپ 4، بازنویسی کامل شده و کار کردن با آن نسبت به نگارش سوم آن بسیار سادهتر شدهاست.
<body> <nav class="navbar bg-dark navbar-dark navbar-expand-sm"> <div class="container"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link disabled" href="#">Testimonials</a> </div> </div> </nav> <div class="container">
در اینجا، کار با افزودن کلاس navbar به المان nav شروع میشود. سپس هر لینک داخل آن، کلاسهای nav-item nav-link را پیدا میکند. در اینجا اگر آیتمی قرار است به صفحهی جاری اشاره کند، با کلاس active مشخص خواهد شد.
سپس توسط کلاسهای bg-dark navbar-dark، رنگهای پس زمینه و رنگ متن مشخص شدهاند. برای مثال میتوان bg-light navbar-light را نیز آزمایش کرد:
<nav class="navbar bg-light navbar-light navbar-expand-sm">
و یا بجای این رنگهای پیشفرض، در بوت استرپ 4 میتوان به سادگی رنگ navbar را توسط یک background-color دلخواه، سفارشی سازی کرد:
<nav class="navbar navbar-dark navbar-expand-sm" style="background-color:red">
کاری که در نگارشهای پیشین بوت استرپ به سادگی میسر نبود.
همچنین اگر دقت کرده باشید از کلاس navbar-expand-sm نیز استفاده شدهاست. حالت پیشفرض نمایش آیتمهای navbar، ستونی است و برای حالت موبایل درنظر گرفته شدهاست. استفادهی از navbar-expand-sm سبب میشود تا پس از عرض sm، آیتمهای navbar همانند شکلهای فوق، در طی یک ردیف نمایش داده شوند و در عرض کمتر از sm، به صورت یک ستون:
به علاوه آیتمهای navbar را داخل یک container قرار دادهایم:
<div class="container"> <div class="navbar-nav">
تعریف متون و لوگو در navbar بوت استرپ 4
برای تعریف متن لوگوی سایت در navbar به صورت زیر عمل میشود:
<body> <nav class="navbar bg-dark navbar-dark navbar-expand-sm"> <div class="container"> <div class="navbar-brand"> Wisdom Pet Medicine </div> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link disabled" href="#">Testimonials</a> </div> </div> </nav> <div class="container">
و یا میتوان بجای div، از المان anchor نیز استفاده کرد تا به صورت لینک نمایش داده شود:
<a class="navbar-brand" href="#"> Wisdom Pet Medicine </a>
برای تعریف متنی در navbar از کلاس navbar-text استفاده میشود:
<body> <nav class="navbar bg-dark navbar-dark navbar-expand-sm"> <div class="container"> <a class="navbar-brand d-none d-sm-inline-block" href="#"> Wisdom Pet Medicine </a> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link disabled" href="#">Testimonials</a> </div> <span class="navbar-text d-none d-xl-inline-block">The best in traditional and alternate medicine</span> </div> </nav> <div class="container">
همین تنظیم را به navbar-brand، در اندازهی sm نیز اضافه کردهایم تا لوگوی سایت در اندازههای موبایل ظاهر نشود.
افزودن drop downs به navbar در بوت استرپ 4
برای تبدیل یکی از آیتمهای منوی راهبری، به منو، از dropdown استفاده میشود که نمونهای از آنرا در مثال زیر مشاهده میکنید:
<body> <nav class="navbar bg-dark navbar-dark navbar-expand-sm"> <div class="container"> <a class="navbar-brand d-none d-sm-inline-block" href="#"> <img src="images/wisdompetlogo.svg" style="width:40px;" alt=""> Wisdom Pet Medicine </a> <div class="navbar-nav ml-sm-auto"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <div class="dropdown"> <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" id="servicesDropdown" aria-haspopup="true" aria-expanded="false" href="#">Services</a> <div class="dropdown-menu" aria-labelledby="servicesDropdown"> <a href="#" class="dropdown-item">Grooming</a> <a href="#" class="dropdown-item">General Health</a> <a href="#" class="dropdown-item">Nutrition</a> <a href="#" class="dropdown-item">Pest Control</a> <a href="#" class="dropdown-item">Vaccinations</a> </div> </div> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link disabled" href="#">Testimonials</a> </div> <span class="navbar-text d-none d-xl-inline-block">The best in traditional and alternate medicine</span> </div> </nav> <div class="container">
- دراپداون نیاز به یک container دارد که آنرا با تعریف یک div با کلاس dropdown تعریف کردهایم.
- سپس به لینکی که قرار است آنرا نمایش دهد، کلاس dropdown-toggle را اضافه میکنیم تا آیکن مثلثی رو به پایینی را نمایان کند. وجود این مثلث، بیانگر وجود منویی به همراه آن است.
- اکنون با تنظیم data-toggle به dropdown، کدهای جاوا اسکریپتی بوت استرپ، این المان را به صورت یک dropdown پردازش میکنند و نیازی به افزودن اسکریپتی به صفحه برای فعالسازی آن نیست. ویژگیهای aria-expanded و aria-haspopup نیز به مقدار دهی پیشفرضهای کدهای جاوا اسکریپتی آن کمک میکنند.
- خود منو توسط دربرگیرندهای با کلاس dropdown-menu و آیتمهایی با کلاس dropdown-item تشکیل میشود.
- در ادامه برای متصل کردن این دربرگیرنده به لینک نمایش دهندهی منو، یک id را به لینک انتساب میدهیم (به نام servicesDropdown) و سپس aria-labelledby دربرگیرنده را به این id، مقدار دهی میکنیم.
- در این مثال با استفاده از کلاس navbar-nav ml-sm-auto، سبب شدهایم تا منوی سایت، از لبهی سمت راست صفحه پس از عرض sm، شروع شود.
افزودن المانهای فرمها به منوی راهبری سایت
برای اضافه کردن المانهای فرم به منوی راهبری سایت، ابتدا نیاز است کلاس form-inline را بر روی container این فرم قرار داد و سپس به ورودیهای این فرم، کلاس form-control را اضافه میکنیم. اگر نیاز بود، توسط کلاسهای margin و padding مخصوص بوت استرپ 4 مانند mr-2 نیز میتوان بین آنها فاصله ایجاد کرد:
<body> <nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <div class="container"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link" href="#">Testimonials</a> </div> <form class="form-inline"> <input type="text" placeholder="Search..." class="form-control mr-2"> <button class="btn btn-outline-light" type="submit">Go</button> </form> </div> </nav> <div class="container">
بوت استرپ در اندازهی بزرگتر صفحه، فرم را به سمت راست و آیتمهای منو را در سمت چپ نمایش میدهد.
کنترل محل قرارگیری المانها در منوی راهبری سایت
توسط کلاسهایی مانند fixed-top (قرار گرفتن در بالای صفحه)، fixed-bottom (قرار گرفتن در پایین صفحه) و sticky-top، میتوان محل قرارگیری منوی راهبری را تغییر داد. این کلاسها را در مطلب «طرحبندی صفحات وب با بوت استرپ 4 - قسمت دوم» پیشتر بررسی کردیم.
برای توضیح حالت sticky-top، فرض کنید بالای منو، تصویر بزرگی از لوگوی سایت را دارید و این منو زیر آن قرار گرفتهاست. زمانیکه صفحه به سمت پایین اسکرول میشود، این منو نیز پایین خواهد آمد تا جائیکه در لبهی بالای صفحه قرار گیرد. پس از آن، این منو در همین ناحیه باقی مانده و شبیه به fixed-top عمل میکند.
یک نکته: اگر fixed-bottom را مورد استفاده قرار دادید:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm fixed-bottom">
<div class="container mb-5">
اضافه کردن منوی همبرگری به منوی راهبری سایت
در مورد کلاس navbar-expand-sm در این مطلب توضیح دادیم. هرچند قابلیت عمودی و افقی شدن خودکار آیتمهای منوی راهبری بسیار جالب و کاربری است، اما در صفحات نمایشی کوچک، این نمایش عمودی میتواند ارتفاع قابل ملاحظهای را به خود اختصاص دهد. به همین جهت میخواهیم نمایش آیتمهای آنرا وابسته به تصمیم کاربر کنیم.
<body> <nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <div class="container"> <a href="#" class="navbar-brand">Wisdom Pet Medicine</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myToggle" aria-controls="myToggle" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="myToggle"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">Mission</a> <a class="nav-item nav-link" href="#">Services</a> <a class="nav-item nav-link" href="#">Staff</a> <a class="nav-item nav-link" href="#">Testimonials</a> </div> </div> </div> </nav> <div class="container">
- ابتدا نیاز است دکمهی این منو اضافه شود که توسط کلاس navbar-toggler مشخص شدهاست. سپس با توجه به اینکه این کامپوننت توسط کدهای جاوا اسکریپتی بوت استرپ کار میکند، اطلاعات مورد نیاز آنرا توسط ویژگیهای data-toggle، data-target و aria مشخص میکنیم.
- این دکمه نیاز دارد تا به یک div با کلاس collapse navbar-collapse متصل شود. این اتصال نیز از طریق id آن صورت میگیرد که در ویژگی data-target مقدار دهی شدهاست.
- اگر این دکمه را پس از navbar-brand قرار دهیم، در سمت چپ صفحه و اگر پیش از آن قرار دهیم، در سمت راست صفحه ظاهر میشود.
در حالت نمایش sm، آیتمهای منو مخفی شده:
با کلیک بر روی دکمهی منوی همبرگری آن، گزینههای منو نمایش داده میشوند:
و در حالت اندازهی بزرگتر صفحه، محو میشود:
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_07.zip
در قسمتهای قبل ( ^ ، ^ و ^ ) GraphQL را در ASP.Net Core راه اندازی کردیم و در قسمت ( فراخوانی GraphQL API در یک کلاینت ASP.NET Core ) از GraphQL API فراهم شده در یک کلاینت ASP Net Core استفاده کردیم. اکنون میخواهیم چگونگی استفاده از GraphQL را در انگیولار، یاد بگیریم.
Apollo Angular، به شما اجازه میدهد دادهها را از یک سرور GraphQL دریافت و از آن برای ساختن UI های واکنشی و پیچیده در انگیولار استفاده کنید. وقتی که از Apollo Client استفاده میکنیم، نیازی نیست هیچ چیز خاصی را در مورد سینتکس query ها یادبگیریم؛ به دلیل اینکه همه چیز همان استاندارد GraphQL میباشد. هر چیزی را که شما در GraphQL query IDE تایپ میکنید، میتوانید آنها را در کدهای Apollo Client نیز قرار دهید.
Installation with Angular Schematics
بعد از ایجاد یک پروژه انگیولار با دستور زیر
ng new apollo-angular-project
ng add apollo-angular
const uri = 'https://localhost:5001/graphql';
اکنون همه چیز تمام شدهاست. شما میتوانید اولین query خود را اجرا کنید.
Installation without Angular Schematics
اگر میخواهید Apollo را بدون کمک گرفتن از Angular Schematics نصب کنید، در ابتدا کتابخانههای زیر را نصب نمائید:
npm install --save apollo-angular \ apollo-angular-link-http \ apollo-link \ apollo-client \ apollo-cache-inmemory \ graphql-tag \ graphql
{ "compilerOptions": { // ... "lib": [ "es2017", "dom", "esnext.asynciterable" ] } }
در ادامه، فایل app.module.ts را باز کرده و آن را مطابق زیر ویرایش کنید:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HttpClientModule } from "@angular/common/http"; import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular"; import { HttpLinkModule, HttpLink } from "apollo-angular-link-http"; import { InMemoryCache } from "apollo-cache-inmemory"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ApolloModule, HttpLinkModule ], providers: [ { provide: APOLLO_OPTIONS, useFactory: (httpLink: HttpLink) => { return { cache: new InMemoryCache(), link: httpLink.create({ uri: "https://localhost:5001/graphql" }) } }, deps: [ HttpLink ] }], bootstrap: [ AppComponent ] }) export class AppModule { }
- با استفاده از سرویس apollo-angular-link-http و HttpLink، کلاینت را به یک سرور GraphQL متصل میکنیم.
- apollo-cache-inmemory و InMemoryCache محلی برای ذخیره سازی دادهها میباشد.
- APOLLO_OPTIONS فراهم کننده تنظیمات Apollo Client است.
- HttpLink نیاز به HttpClient دارد. به همین خاطر است که ما از HttpClientModule استفاده کردهایم.
Links and Cache
Apollo Client، یک لایه واسط شبکه قابل تعویض را دارد که به شما اجازه میدهد تا تنظیم کنید که چگونه query ها در HTTP ارسال شوند؛ یا کل بخش Network را با چیزی کاملا سفارشی سازی شده جایگزین کنید؛ مثل یک websocket transport.
apollo-angular-link-http : از Http برای ارسال query ها استفاده میکند.
apollo-cache-inmemory : پیاده سازی کش پیش فرض برای Apollo Client 2.0 میباشد.
نکته
Apollo یک سرویس export شده انگیولار از apollo-angular، برای به اشتراک گذاشتن دادههای GraphQL با UI شما میباشد.
شروع کار
به همان روش که فایلهای Model را برای کلاینت ASP.NET Core ایجاد کردیم، در اینجا هم ایجاد میکنیم. کار را با ایجاد کردن یک پوشه جدید به نام types، شروع میکنیم و چند type را در آن تعریف خواهیم کرد ( OwnerInputType ،AccountType و OwnerType ):
export type OwnerInputType = { name: string; address: string; }
export type AccountType = { 'id': string; 'description': string; 'ownerId' : string; 'type': string; }
import { AccountType } from './accountType'; export type OwnerType = { 'id': string; 'name': string; 'address': string; 'accounts': AccountType[]; }
سپس یک سرویس را به نام graphql ایجاد میکنیم:
ng g s graphql
و آن را همانند زیر ویرایش میکنیم:
import { Injectable } from '@angular/core'; import { Apollo } from 'apollo-angular'; import gql from 'graphql-tag'; @Injectable({ providedIn: 'root' }) export class GraphqlService { constructor(private apollo: Apollo) { } }
اکنون همه چیز آماده است تا تعدادی query و mutation را اجرا کنیم ( providedIn ).
بازیابی تمامی Owner ها
سرویس graphql را باز میکنیم و آن را همانند زیر ویرایش میکنیم ( اضافه کردن متد getOwners ):
public getOwners = () => { return this.apollo.query({ query: gql`query getOwners{ owners{ id, name, address, accounts{ id, description, type } } }` }); }
سپس فایل app.component.ts را باز کرده و همانند زیر ویرایش میکنیم:
export class AppComponent implements OnInit { public owners: OwnerType[]; public loading = true; constructor(private graphQLService: GraphqlService) { } ngOnInit() { this.graphQLService.getOwners().subscribe(result => { this.owners = result.data["owners"] as OwnerType[]; this.loading = result.loading; }); } }
و هم چنین app.component.html:
<div> <div *ngIf="!this.loading"> <table> <thead> <tr> <th> # </th> <th> نام و نام خانوادگی </th> <th> آدرس </th> </tr> </thead> <tbody> <ng-container *ngFor="let item of this.owners;let idx=index" [ngTemplateOutlet]="innertable" [ngTemplateOutletContext]="{item:item, index:idx}"></ng-container> </tbody> </table> </div> <div *ngIf="this.loading"> <p> در حال بارگذاری لیست ... </p> </div> </div> <ng-template #innertable let-item="item" let-idx="index"> <tr> <td>{{idx+1}}</td> <td>{{item.name}}</td> <td>{{item.address}}</td> </tr> <tr *ngIf="this.item.accounts && this.item.accounts.length > 0"> <td colspan="4"> <div> <p>Accounts</p> </div> <div> <table> <thead> <tr> <th>#</th> <th>نوع</th> <th>توضیحات</th> </tr> </thead> <tbody> <tr *ngFor="let innerItem of this.item.accounts;let innerIndex=index"> <td> {{innerIndex+1}} </td> <td> {{innerItem.type}} </td> <td> {{innerItem.description}} </td> </tr> </tbody> </table> </div> </td> </tr> </ng-template>
dotnet restore dotnet run
سپس پروژه را اجرا کنید:
ng serve
خروجی به صورت زیر میباشد (لیست تمامی Owner ها به همراه Accountهای مربوط به هر Owner):
در متد getOwner، بجای apollo.query میتوان از apollo.watchQuery استفاده کرد که در نمونه زیر، در ابتدا، GraphQL query را در تابع gql ( از graphql-tag ) برای خصوصیت query در متد apollo.watchQuery پاس میدهیم.
public getOwners = () => { return this.apollo.watchQuery<any>({ query: gql`query getOwners{ owners{ id, name, address, accounts{ id, description, type } } }` }) }
export class AppComponent implements OnInit { loading: boolean; public owners: OwnerType[]; private querySubscription: Subscription; constructor(private graphQLService: GraphqlService) { } ngOnInit() { this.querySubscription = this.graphQLService.getOwners() .valueChanges .subscribe(result => { this.loading = result.loading; this.owners = result.data["owners"] as OwnerType[]; }); } ngOnDestroy() { this.querySubscription.unsubscribe(); } }
مابقی query ها و mutation ها از سرویس graphql
بازیابی یک Owner مشخص
public getOwner = (id) => { return this.apollo.query({ query: gql`query getOwner($ownerID: ID!){ owner(ownerId: $ownerID){ id, name, address, accounts{ id, description, type } } }`, variables: { ownerID: id } }) }
ایجاد یک Owner جدید
public createOwner = (ownerToCreate: OwnerInputType) => { return this.apollo.mutate({ mutation: gql`mutation($owner: ownerInput!){ createOwner(owner: $owner){ id, name, address } }`, variables: { owner: ownerToCreate } }) }
ویرایش یک Owner
public updateOwner = (ownerToUpdate: OwnerInputType, id: string) => { return this.apollo.mutate({ mutation: gql`mutation($owner: ownerInput!, $ownerId: ID!){ updateOwner(owner: $owner, ownerId: $ownerId){ id, name, address } }`, variables: { owner: ownerToUpdate, ownerId: id } }) }
و در نهایت حذف یک Owner
public deleteOwner = (id: string) => { return this.apollo.mutate({ mutation: gql`mutation($ownerId: ID!){ deleteOwner(ownerId: $ownerId) }`, variables: { ownerId: id } }) }
کدهای کامل این قسمت را از ایجا دریافت کنید : GraphQL_Angular.zip
کدهای کامل قسمت ( GraphQL Mutations در ASP.NET Core ( عملیات POST, PUT, DELETE ) ) را از اینجا دریافت کنید : ASPCoreGraphQL_3.rar
اشتراکها
سری بررسی پشت صحنهی دات نت
In this series I answer various .NET questions. Some of them are asked during interviews, some of them I see on the internet, some of them are completely made up. The goal is to provide short answer with links to references if needed. This is by no means a .NET tutorial or experts reference, this is just a bunch of useful answers to refresh your knowledge.