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

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

باسلام در این قسمت از اموزش های انگولار قصد داریم که اتصال شیوه نامه ی 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 مراجعه فرمایید.

یاعلی

برچسب ها : اموزش انگولار جی اس، اموزش کامل angularjs

دیدگاه تازه ای بنویسید