AngularJS W3.CSS

📌 W3.CSS क्या है?

W3.CSS एक modern CSS framework है जिसे W3Schools ने बनाया है। यह:

• 💡 Lightweight (बिना भारी-भरकम फाइलों के)
• 📱 Mobile-First (Responsive Design)
• 🎨 Clean, Minimal और Fast UI design देता है

आसान भाषा में: Bootstrap की तरह ही यह CSS library आपके HTML elements को सुंदर और responsive बना देती है।

---

🔗 AngularJS + W3.CSS क्यों Use करें?

• AngularJS आपका logic और data control करता है
• W3.CSS आपके App को smart look और mobile-ready design देता है
• दोनों मिलकर बनाते हैं: Beautiful + Functional UI

---

✅ शुरुआत कैसे करें?

आपको बस W3.CSS की CDN link अपने HTML में डालनी होगी:

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

---

✅ Example 1: AngularJS Table + W3.CSS Styling

<div ng-app="myApp" ng-controller="tableCtrl">
  <table class="w3-table w3-bordered w3-striped w3-hoverable">
    <tr>
      <th>Name</th><th>City</th><th>Age</th>
    </tr>
    <tr ng-repeat="user in users">
      <td>{{ user.name }}</td>
      <td>{{ user.city }}</td>
      <td>{{ user.age }}</td>
    </tr>
  </table>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("tableCtrl", function($scope) {
  $scope.users = [
    { name: "Amit", city: "Delhi", age: 24 },
    { name: "Priya", city: "Mumbai", age: 22 },
    { name: "Ravi", city: "Kolkata", age: 26 }
  ];
});
</script>

Output: एक सुंदर responsive table बिना किसी extra CSS के।

---

✅ Example 2: W3.CSS Card + AngularJS Binding

<div ng-app="" ng-init="user={name:'Aditi', email:'aditi@example.com'}">
  <div class="w3-card-4 w3-padding w3-margin w3-light-grey">
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
  </div>
</div>

Output: एक सुंदर profile card बिना Bootstrap के।

---

✅ Example 3: AngularJS Form + W3.CSS

<div ng-app="myApp" ng-controller="formCtrl" class="w3-container">
  <form name="myForm" ng-submit="submitForm()" novalidate class="w3-container w3-card w3-padding">
    <label>Name:</label>
    <input class="w3-input" type="text" ng-model="user.name" required>
    
    <label>Email:</label>
    <input class="w3-input" type="email" ng-model="user.email" required>
    
    <button class="w3-button w3-blue w3-margin-top" ng-disabled="myForm.$invalid">Submit</button>
  </form>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("formCtrl", function($scope) {
  $scope.user = {};
  $scope.submitForm = function() {
    alert("Submitted: " + $scope.user.name);
  };
});
</script>

यह form AngularJS logic के साथ W3.CSS से styled है।

---

💡 W3.CSS के कुछ Common Classes

Class	काम
w3-container	Padding वाली div
w3-card, w3-card-4	Card style box
w3-input	Stylish input
w3-button	Button styling
w3-table, w3-striped	Table look
w3-hoverable	Hover effect
w3-green, w3-red, etc.	Background colors

---

🧠 अभ्यास प्रश्न (Exercise)

1. W3.CSS को AngularJS के साथ क्यों use करना चाहिए?
2. W3.CSS की कौन-कौन सी class form को सुंदर बनाती है?
3. नीचे दिए गए code का output क्या होगा?

<div class="w3-card w3-padding">{{ name }}</div>

---

✅ आपने क्या सीखा?

• AngularJS के साथ W3.CSS कैसे जोड़ते हैं
• Table, card और form को W3.CSS से design करना
• Mobile-friendly और clean UI बनाना
• Real-time data binding के साथ सुंदर layout बनाना

---

🎯 अब आप AngularJS App को सिर्फ logical ही नहीं, बल्कि professional look भी दे सकते हैं — बिना किसी भारी framework के!