قسمت نوزدهم AngularJS :استفاده از استایل w3.css در انگولار

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت نوزدهم AngularJS :استفاده از استایل w3.css در انگولار

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

2340

Calendar-amico (2)

تاریخ انتشار:

7 , خرداد , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

باسلام در این قسمت از اموزش های انگولار قصد داریم که اتصال شیوه نامه ی w3.css را به برنامه ی انگولاری خود اموزش دهیم. پیشنهاد میشود قبل از ورود به این قسمت از اموزش سایر قسمت های دوره اموزش angularjs را مطالعه فرمایید.

شما به سادگی میتوانید از سبک استایل دهی w3.css به همراه angulajs استفاده کنید . این بخش به شما اموزش خواهیم داد که چگونه این کار را انجام دهید.

w3.css

همانطور که میدانید برای افزودن فایل های css به سند html راه های مختلفی وجود دارد که یکی از این شیوه ها افزودن ادرس فایل می باشد ، برای افزودن فایل w3.css به اپلیکیشن انگولاری کافی است فایل زیر را در بین تگ head سند خود قرار دهید.

برای مطالعه انواع روش های استایل دهی برو روی نوشته کلیک کنید.

در زیر یک مثال کامل از تمامی دستورالعمل های angularjs و کلاس های مختلف w3.css اورده شده است برای درک بهتر این کدها را در کامپیوتر خود اجرا کنید.

توضیح اجمالی دستورالعمل های استفاده شده در برنامه بالا

دستورالعملتوضیحات
<body ng-appبرای تعریف یک اپلیکیشن انگولار در تگ body به کار میرود.
<body ng-controllerبرای تعریف کنترل کننده بر روی تگ body به کار میرود.
<tr ng-repeatبرای تکرار تگ tr برای هرکاربر استفاده میشود.
<button ng-clickهنگامی که بر روی دکمه کلیک میشود تابع editUser فرا خوانی میشود.
<h3 ng-showهنگامی که edit مقدار true دریافت کند تگ h3 را نمایش میدهد.
<h3 ng-hideفرم و تگ h3 را در صورت دریافت مقدار true مخفی میکند.
<input ng-modelبرای اتصال تگ input با برنامه استفاده میشود.
<button ng-disabledدکمه را در حالت غیرفعال نگه میدارد اگر error یا incomplete مقدار true داشته باشند.

توضیحات استایل w3.css

المانکلاستوضیحات
<div> w3-containerمحدوده ی محتوا
<table> w3-tableجدول
<table> w3-borderedحاشیه ی دور جدول
<table> w3-stripedنمایان گر خانه های راه راه جدول
<button> w3-btnدکمه
<button> w3-greenرنک سبز
<button> w3-rippleیک اثر موج زمانی که روی دکمه کلیک میکنید.
<input> w3-inputفیلد ورودی
<input> w3-borderحاشیه دور فیلد

کد های جاوا اسکریپت

برای درست اجرا شدن قطعه کد بالا نیازمندید تا یک فایل با نام myUsers.js ایجاد کنید و محتویات زیر را درون ان قرار دهید.

توضیحات کدهای جاوااسکریپت

ویژگی محدودهاستفاده شده برای
$scope.fNameمتغییر مدل برای نام کاربر
$scope.lName متغییر مدل برای نام خانوادگی کاربر
$scope.passw1 متغییر مدل برای رمز کاربر
$scope.passw2 متغییر مدل برای تکرار رمز کاربر
$scope.usersمتغییر مدل برای ارایه کاربران
$scope.editمقدار true را دریافت میکند هنگامی که بر روی ایجاد کاربر کلیک کنید.
$scope.hideformمقدار false را دریفات میکند هنگامی که کاربر بروی ویرایش یا ایجاد کاربر کلیک کند.
$scope.errorمقدار true را دریافت میکند اگر مقدار رمز و تکرار رمز صحیح نباشد.
$scope.incompleteمقدار true را دریافت میکند اگر همه ی کادرها پر نباشند.
$scope.editUserمجموعه ی متغییر های مدل
$scope.$watchنمایش متغییرهای مدل
$scope.testآزمایش متغیرهای مدل برای خطا و ناقص بودن

امیدواریم که از این قسمت از اموزش های انگولار رضایت کافی داشته باشید. لطفا درصورت داشتن هرگونه سوال با ما در ارتباط باشید. برای مطالعه موارد بیشتر میتوانید به سایت w3schools مراجعه فرمایید.

یاعلی

مرتضی افضلی

مرتضی افضلی

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

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت نوزدهم AngularJS :استفاده از استایل w3.css در انگولار"

    ارسال یک پیام

    نشانی ایمیل شما منتشر نخواهد شد.