AngularJS and W3.CSS

W3.CSS এর সাথে AngularJS ব্যবহার করা

AngularJS এবং W3.CSS

আপনি সহজেই AngularJS এর ​​সাথে W3.CSS স্টাইল শীট ব্যবহার করতে পারেন। এই পাঠটি আপনাকে দেখায় কিভাবে এটি করতে হয়।

🏁টিপ:

আপনার অগ্রগতি ট্র্যাক করতে লগ ইন করুন - এটি বিনামূল্যে৷

W3.CSS যোগ করা হচ্ছে

আপনার AngularJS অ্যাপ্লিকেশনে W3.CSS যোগ করতে, আপনার নথির প্রধান বিভাগে নিম্নলিখিত লাইন যোগ করুন:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

W3.CSS , W3.CSS .

নীচে একটি সম্পূর্ণ এইচটিএমএল উদাহরণ, সমস্ত AngularJS নির্দেশাবলী এবং W3.CSS ক্লাস ব্যাখ্যা করা হয়েছে।

HTML কোড উদাহরণ

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="w3-container">

<h3>Users</h3>

<table class="w3-table w3-bordered w3-striped">
  <tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr ng-repeat="user in users">
    <td>
      <button class="w3-btn w3-ripple" ng-click="editUser(user.id)">&#9998; Edit</button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr>
</table>
<br>
<button class="w3-btn w3-green w3-ripple" ng-click="editUser('new')">&#9998; Create New User</button>

<form ng-hide="hideform">
  <h3 ng-show="edit">Create New User:</h3>
  <h3 ng-hide="edit">Edit User:</h3>
    <label>First Name:</label>
    <input class="w3-input w3-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  <br>
    <label>Last Name:</label>
    <input class="w3-input w3-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  <br>
    <label>Password:</label>
    <input class="w3-input w3-border" type="password" ng-model="passw1" placeholder="Password">
  <br>
    <label>Repeat:</label>
    <input class="w3-input w3-border" type="password" ng-model="passw2" placeholder="Repeat Password">
 <br>
<button class="w3-btn w3-green w3-ripple" ng-disabled="error || incomplete">&#10004; Save Changes</button>
</form>

</div>

<script src="myUsers.js"></script>

</body>
</html>

নির্দেশের ব্যাখ্যা

AngularJS নির্দেশিকা ব্যাখ্যা
<body ng-app <body> উপাদানের ব্যবহার সংজ্ঞায়িত করে
<body ng-controller <body> উপাদানের জন্য নিয়ামক সংজ্ঞায়িত করে
<tr ng-repeat ব্যবহারকারীদের প্রতিটি ব্যবহারকারীর জন্য <tr> উপাদানটি পুনরাবৃত্তি করে
<button ng-click <button> উপাদানটি ক্লিক করা হলে editUser() ফাংশনটি কল করুন
<h3 ng-show যদি edit = true তাহলে <h3> উপাদানটি প্রদর্শিত হয়
<h3 ng-hide hideform = true ফর্মটি লুকায়, এবং edit = true <h3> উপাদান লুকায়
<input ng-model অ্যাপ্লিকেশনের সাথে <input> উপাদান যুক্ত করে
<button ng-disabled ত্রুটি বা অসম্পূর্ণ = সত্য হলে <বোতাম> উপাদান নিষ্ক্রিয় করে

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

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim',  lName:"Pim" },
{id:3, fName:'Sal',  lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$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 মডেল ভেরিয়েবল (ব্যবহারকারীর পাসওয়ার্ড 1)
$scope.passw2 মডেল পরিবর্তনশীল (ব্যবহারকারীর পাসওয়ার্ড 2)
$scope.users মডেল পরিবর্তনশীল (ব্যবহারকারীর অ্যারে)
$scope.edit ব্যবহারকারী যখন 'ব্যবহারকারী তৈরি করুন'-এ ক্লিক করেন তখন সত্যে সেট করুন
$scope.hideform ব্যবহারকারী 'সম্পাদনা' বা 'ব্যবহারকারী তৈরি করুন' এ ক্লিক করলে মিথ্যাতে সেট করুন
$scope.error যদি passw1 passw2 এর সমান না হয় তাহলে সত্যে সেট করুন
$scope.incomplete কোনো ক্ষেত্র খালি থাকলে সত্যে সেট করুন (দৈর্ঘ্য = 0)।
$scope.editUser মডেল ভেরিয়েবল সেট করে
$scope.$watch মডেল ভেরিয়েবল মনিটর
$scope.test ত্রুটি এবং অসম্পূর্ণতার জন্য মডেল ভেরিয়েবল পরীক্ষা করে

ব্যায়াম

❓ W3.CSS ?

w3-blue
✗ ভুল! w3-নীল একটি নীল বোতাম তৈরি করে
w3-green
✓ ঠিক আছে! w3-সবুজ একটি সবুজ বোতাম তৈরি করে
w3-red
✗ ভুল! w3-লাল একটি লাল বোতাম তৈরি করে
w3-yellow
✗ ভুল! w3-হলুদ একটি হলুদ বোতাম তৈরি করে

💡প্রশিক্ষণ শুরু করুন:

W3.CSS AngularJS আধুনিক ওয়েব অ্যাপ্লিকেশনসহজে তৈরি করতে সাহায্য করে।

উপরের বিকল্পগুলি থেকে সঠিক উত্তরনির্বাচন করুন.

একীকরণের সুবিধা

দ্রুত উন্নয়ন:

W3.CSS - UI .

প্রতিক্রিয়াশীল ডিজাইন:

W3.CSS .

ক্লিন কোড:

AngularJS নির্দেশিকা HTML থেকে জাভাস্ক্রিপ্ট কোড আলাদা করতে সাহায্য করে।

দ্বি-মুখী ডেটা বাইন্ডিং:

AngularJS স্বয়ংক্রিয়ভাবে ব্যবহারকারী ইন্টারফেস এবং ডেটা মডেল সিঙ্ক্রোনাইজ করে।

⚠️গুরুত্বপূর্ণ নোট:

W3.CSS AngularJS , CSS W3.CSS . CSS .