← Previous Next →

AngularJS with Bootstrap 5

अब हम सीखते हैं एक ऐसा चैप्टर जो AngularJS के साथ आपकी वेबसाइट या वेब ऐप को professional, responsive और mobile-friendly बना देगा:

🎨 AngularJS with Bootstrap 5

(AngularJS की power + Bootstrap 5 की modern design system = सुंदर और functional UI)

📌 Bootstrap 5 क्या है?

Bootstrap 5 एक बहुत ही popular CSS framework है जो आपकी वेबसाइट को:

✅ Responsive (mobile/tablet compatible)
✅ सुंदर UI Design
✅ Ready-made components (buttons, forms, tables, alerts…)
✅ Grid system, spacing, flexbox utilities

के साथ डिज़ाइन करने की सुविधा देता है।

🎯 AngularJS + Bootstrap क्यों?

Feature	AngularJS	Bootstrap 5
Logic	Form handling, data binding, events	Design और layout
Components	Data-driven UI	Alerts, modals, navbars, grid system
Together	Powerful apps	सुंदर और responsive UI

✅ Setup: AngularJS + Bootstrap 5 Add कैसे करें?

HTML में CDN से जोड़ें:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS + Bootstrap 5</title>

  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- AngularJS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl" class="p-4">
  ...
</body>
</html>

✅ Basic Example: Form + Bootstrap 5 + AngularJS

<div class="container">
  <h2 class="mb-4">User Login</h2>

  <form name="loginForm" ng-submit="login()" novalidate>
    <div class="mb-3">
      <label class="form-label">Username</label>
      <input type="text" ng-model="user.username" class="form-control" required>
    </div>

    <div class="mb-3">
      <label class="form-label">Password</label>
      <input type="password" ng-model="user.password" class="form-control" required>
    </div>

    <button type="submit" class="btn btn-primary" ng-disabled="loginForm.$invalid">Login</button>

    <div class="mt-3 alert alert-danger" ng-show="error">
      Invalid credentials. Please try again.
    </div>
  </form>
</div>

var app = angular.module("myApp", []);
app.controller("mainCtrl", function($scope) {
  $scope.user = {};
  $scope.login = function() {
    if ($scope.user.username === "admin" && $scope.user.password === "123") {
      alert("Login Successful");
    } else {
      $scope.error = true;
    }
  };
});

✅ Bootstrap Table + AngularJS ng-repeat

<table class="table table-striped table-bordered">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="u in users">
      <td>{{ $index + 1 }}</td>
      <td>{{ u.name }}</td>
      <td>{{ u.email }}</td>
    </tr>
  </tbody>
</table>

$scope.users = [
  { name: "Amit", email: "amit@gmail.com" },
  { name: "Sara", email: "sara@yahoo.com" }
];

✅ Alerts and Buttons with Bootstrap

<div class="alert alert-success" ng-show="success">
  ✅ Action was successful!
</div>

<button class="btn btn-success me-2" ng-click="doSomething()">Do Action</button>
<button class="btn btn-outline-danger" ng-click="cancel()">Cancel</button>

✅ Bootstrap Modal with AngularJS (Bonus)

<!-- Button -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Show Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Welcome</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        Hello, {{ user.username || 'Guest' }}!
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

यह Bootstrap 5 modal को AngularJS binding के साथ use करता है।

✅ Grid System with AngularJS

<div class="row">
  <div class="col-md-4" ng-repeat="product in products">
    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">{{ product.title }}</h5>
        <p class="card-text">{{ product.desc }}</p>
        <button class="btn btn-outline-primary">Buy</button>
      </div>
    </div>
  </div>
</div>

✅ AngularJS Form Validation + Bootstrap Feedback

<input type="email" class="form-control" ng-model="email" required />
<div class="invalid-feedback d-block" ng-show="form.email.$error.required && form.email.$touched">
  Email is required.
</div>

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

Bootstrap 5 की कौन-कौन सी components AngularJS के साथ useful हैं?
Bootstrap का modal AngularJS binding से कैसे काम करता है?
AngularJS में Bootstrap form validation UX को कैसे बेहतर करता है?

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

Bootstrap 5 को AngularJS App में कैसे जोड़े
AngularJS के साथ Bootstrap 5 Forms, Tables, Cards, Modals कैसे use करें
Responsive UI को AngularJS Data Binding से कैसे combine करें
Real-world UI बनाना जो fast और mobile-ready हो

🎯 अब आप AngularJS App को Bootstrap 5 के साथ integrate करके एक शानदार, responsive और real-world level UI बना सकते हैं।