AngularJS

AngularJS — W3.CSS (W3.CSS)

آخرین بروزرسانی: 1404/08/23
قبلی: API (API) بعدی: درون گذاری فایل ها (Includes)

W3.CSS (W3.CSS)

اینجا یاد می گیری چطور «W3.CSS در AngularJS» را وصل کنی. «فریم ورک (Framework)» یعنی جعبه ابزار آماده. «دایرکتیو (Directive)» یعنی دستورِ خاصِ انگولار برای تگ ها. با چند گام ساده پیش می رویم و سریع نتیجه می گیریم.

افزودن W3.CSS به پروژه

فقط یک لینک CSS در <head> بگذار. سپس اسکریپت AngularJS را اضافه کن. بعد، ماژول و کنترلر را روی <body> فعال کن.

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <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)">✎ 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')">✎ Create New User</button>
      <br>
      <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">✔ Save Changes</button>
      </form>
    </div>
    <script src="myUsers.js"></script>
  </body>
</html>

مشاهده در ادیتور

برای مرور سریع W3.CSS در AngularJS را هم ببین. سپس ادامه بده و کد را تست کن.

اسکریپت کنترل کننده کاربر

کنترل کننده داده ها را نگه می دارد. «اسکوپ (Scope)» ظرف متغیرهاست. با «واچ ($watch)» تغییرات را رصد کن.

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;
    }
  };
});

مشاهده در ادیتور

دایرکتیوها در این نمونه

این ها از منبع آورده شده اند و کوتاه خلاصه شده اند.

  • <body ng-app>: شروع برنامه روی تگ body.
  • <body ng-controller>: وصل کردن کنترل کننده به body.
  • <tr ng-repeat>: تکرار ردیف برای هر کاربر.
  • <button ng-click>: اجرای تابع هنگام کلیک.
  • <h3 ng-show>: نمایش تیتر وقتی edit درست است.
  • <h3 ng-hide> و ng-hide فرم: پنهان سازی شرطی.
  • <input ng-model>: بایند دوطرفه ورودی ها.
  • <button ng-disabled>: غیرفعال وقتی خطا یا نقص هست.

کلاس های W3.CSS که استفاده شد

  • w3-container: جعبه مرتب برای محتوا.
  • w3-table: جدول ساده و تمیز.
  • w3-bordered: جدول با خط کشی دور.
  • w3-striped: جدول با ردیف های راه راه.
  • w3-btn: دکمه آماده زیبا.
  • w3-green: رنگ سبز برای دکمه.
  • w3-ripple: افکت موجی روی کلیک.
  • w3-input و w3-border: ورودی با کادر مرتب.

نکته: همیشه یک کلاس پایه مثل w3-btn بده. سپس رنگ یا افکت را اضافه کن.

هشدار: داده واقعی را در کد هاردکد نکن. از API بخوان.

گام های عملی سریع

  1. لینک W3.CSS را به <head> اضافه کن.
  2. اسکریپت AngularJS را قبل از <\/body> بگذار.
  3. ng-app و ng-controller را روی <body> تنظیم کن.
  4. کلاس های w3- را روی جدول و دکمه ها بذار.
  5. کد کنترل کننده را در myUsers.js ذخیره کن.

جمع بندی سریع

  • W3.CSS ظاهر را سریع مرتب می کند.
  • دایرکتیوها رفتار را کنترل می کنند.
  • واچ ها فرم را اعتبارسنجی می کنند.
  • دکمه ذخیره شرطی فعال می شود.
  • همیشه ابتدا لینک CSS را لود کن.
قبلی: API (API) بعدی: درون گذاری فایل ها (Includes)