باسلام در این قسمت از اموزش های انگولار قصد داریم که اتصال شیوه نامه ی w3.css را به برنامه ی انگولاری خود اموزش دهیم. پیشنهاد میشود قبل از ورود به این قسمت از اموزش سایر قسمت های دوره اموزش angularjs را مطالعه فرمایید.
شما به سادگی میتوانید از سبک استایل دهی w3.css به همراه angulajs استفاده کنید . این بخش به شما اموزش خواهیم داد که چگونه این کار را انجام دهید.
w3.css
همانطور که میدانید برای افزودن فایل های css به سند html راه های مختلفی وجود دارد که یکی از این شیوه ها افزودن ادرس فایل می باشد ، برای افزودن فایل w3.css به اپلیکیشن انگولاری کافی است فایل زیر را در بین تگ head سند خود قرار دهید.
|
1 |
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> |
برای مطالعه انواع روش های استایل دهی برو روی نوشته کلیک کنید.
در زیر یک مثال کامل از تمامی دستورالعمل های angularjs و کلاس های مختلف w3.css اورده شده است برای درک بهتر این کدها را در کامپیوتر خود اجرا کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<link rel="stylesheet" href="/w3css/4/w3.css"> < script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> <div class="w3-container"> <h3>کاربران</h3> <table class="w3-table w3-bordered w3-striped"> <tbody><tr> <th>ویرایش</th> <th>نام</th> <th>نام خانوادگی</th> </tr> <tr ng-repeat="user in users"> <td> <button class="w3-btn w3-ripple" ng-click="editUser(user.id)">✎ ویرایش</button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr></tbody></table> <button class="w3-btn w3-green w3-ripple" ng-click="editUser('new')">✎ افزودن کاربر</button> <form ng-hide="hideform"> <h3 ng-show="edit">افزودن کاربر:</h3> <h3 ng-hide="edit">ویرایش کاربر:</h3> <label>نام:</label> <input class="w3-input w3-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="نام"> <label>نام خانوادگی:</label> <input class="w3-input w3-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="نام خانوادگی"> <label>رمز:</label> <input class="w3-input w3-border" type="password" ng-model="passw1" placeholder="رمز"> <label>تکرار رمز:</label> <input class="w3-input w3-border" type="password" ng-model="passw2" placeholder="تکرار رمز"> <button class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">✔ ذخیره</button> </form> </div> < script src= "myUsers.js"> |
توضیح اجمالی دستورالعمل های استفاده شده در برنامه بالا
| دستورالعمل | توضیحات |
| <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 ایجاد کنید و محتویات زیر را درون ان قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
angular.module('myApp', []).controller('userCtrl', function($scope) { $scope.fName = ''; $scope.lName = ''; $scope.passw1 = ''; $scope.passw2 = ''; $scope.users = [ {id:1, fName:'Morteza', lName:"Afzali" }, {id:2, fName:'Sajjad', lName:"Hossienzadeh" }, {id:3, fName:'Pooriya', lName:"Moradi" }, {id:4, fName:'Mohammad Reza', lName:"Ahmadinasab" }, {id:5, fName:'Mahdi', lName:"Sepehri" }, {id:6, fName:'Mohammad Erfan',lName:"Sadeghiani" } ]; $scope.edit = true; $scope.error = false; $scope.incomplete = false; $scope.hideform = true; $scope.editUser = function(id) { $scope.hideform = false; if (id == 'new') { $scope.edit = true; $scope.incomplete = true; $scope.fName = ''; $scope.lName = ''; } else { $scope.edit = false; $scope.fName = $scope.users[id-1].fName; $scope.lName = $scope.users[id-1].lName; } }; $scope.$watch('passw1',function() {$scope.test();}); $scope.$watch('passw2',function() {$scope.test();}); $scope.$watch('fName', function() {$scope.test();}); $scope.$watch('lName', function() {$scope.test();}); $scope.test = function() { if ($scope.passw1 !== $scope.passw2) { $scope.error = true; } else { $scope.error = false; } $scope.incomplete = false; if ($scope.edit && (!$scope.fName.length || !$scope.lName.length || !$scope.passw1.length || !$scope.passw2.length)) { $scope.incomplete = true; } }; }); |
توضیحات کدهای جاوااسکریپت
| ویژگی محدوده | استفاده شده برای |
| $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 مراجعه فرمایید.
یاعلی
مرتضی افضلی
این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید.
با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.
