توسعه یک برنامه هیجان انگیز با انگولار#4

سلام، دوباره با یه آموزش انگولار دیگه کنار همیم. اگر یادتون باشه تو قسمتهای قبلی از فرمهای انگولار مثال زدیم، چیزی که نگفتیم این بود که انگولار یک سری ویژگی ها برای اعتبار سنجی ورودی های فرم (form validation) در اختیار برنامه نویسا میذاره، مثل ng-valid , ng-dirty و ...مثلاً تو فرم های Html با استفاده از required می تونیم انتخاب شدن فیلد هارو اجباری کنیم. در این قسمت در مورد فرم ها و اعتبار سنجی اونها توسط انگولار صحبت میکنیم.

دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا

افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی

خرید کلاس آنلاین

افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس

خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت

دانلود آهنگ

کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی

خودتان را اینجا معرفی کنید

فرم ها در انگولار
فرم های html رو میشه با انگولار کنترل کرد، پس دکمه ها و ... همه همونهایی هستن که توی html داریم؛

input elements
select elements
button elements
textarea elements

و یک فرم کامل مجموعه ایی از فیلدهای HTML هست که کنار هم قرار گرفتن.
*نکته: attribute یا همان ویژگی novalidate جزء مواردجدیدی هست که از HTML5 اضافه شده و کارش اینه که باعث می شه اعتبار سنجی یا همون validation پیش فرض و که توسط مرورگر انجام میشه رو در تمامی مرورگرها غیرفعال کنه.
توضیح مثال: مثل همیشه دایرکتیو ng-app شروع یک برنامه AngularJS رو تعریف می کنه، دایرکتیو ng-model ورودی های بدست آمده از input رو به شیء user نسبت میده. توی کنترلر formCtrl مقدرا اولیه user مقدار دهی میشه و متد reset() رو تعریف می کنه. متد reset() محتوای user رو با master پر می کنه. دایرکتیو ng-click زمانیکه بر روی دکمه button کلیک کنیم متد reset() رو صدا میزنه در این برنامه به attribute یا همان ویژگی novalidate نیازی نداریم اما بصورت طبیعی در تمامی فرم ها یی که از اعتبارسنجی غیر از پیشفض بروزر استفاده میکنیم، باید باشه.

AngularJS Input Validation
انگولار میتونه از طریق بررسی مقادیر ورودی و مقایسه اونها با چیزی که براشون مشخص میکنیم، فرم هارو اعتبارسنجی کنه و ورودی های نامعتبر رو به کاربر اعلام کنه یا حتی از پست شدن فرم جلوگیری کنه. اما باید به این نکته توجه کرد که بحث اعتبارسنجی ورودی ها در سمت کاربر به تنهایی نمی تونه تامین کننده قطعی امنیت باشه پس لازمه سمت سرور هم این کار حتماً انجام بشه.
توضیح مثال بالا :
دایرکتیو ng-model عناصر ورودی رو به مدل می چسباند و از طریق user قابل دسترسی هست.
شیء مدل دارای دو property یا مشخصه user و email است.
تگ span با نوشته های قرمز رنگ، وقتی نشون داده میشه که user یا email ، هم $dirty و هم $invalid باشن.

مشخصه ها	توضیحات
$dirty	وقتی که کاربر روی فیلد تغییری ایجاد کرده باشه.
$valid	وقتی که مقدار ورودی کاربر معتبر باشه.
$invalid	وقتی که مقدار ورودی کاربر نامعتبر باشه.
$pristine	وقتی که کاربر روی فیلد ورودی تغییری ایجاد نکرده باشه.

AngularJS API
API همان رابط کاربری برنامه نویسی یا Application Programming Interface هست.تو AngularJS یک مجموعه از توابع سراسری تعریف شده برای انجام کارهای متداول هست، مثل موارد زیر:

Comparing objects
Iterating objects
Converting data

توابع global با استفاده از angular object قابل دسترسی هستند. در زیر لیستی از توابع API پرکاربرد آورده شده؛

مشخصه ها	توضیحات
angular.lowercase()	تبدیل رشته به حروف کوچک
angular.uppercase()	تبدیل رشته به حروف بزرگ
angular.isString()	اگر نوع مقدار string باشد مقدار true را برمیگرداند.
angular.isNumber()	اگر نوع مقدار number باشد مقدار true را برمیگرداند.

angular.lowercase()

angular.uppercase()

angular.isString()

angular.isNumber()

استفاده از بوت استرپ در انگولار
بوت استرپ یک stylesheet محبوب است که می خواهیم در اینجا نحوه اضافه کردن اون رو به AngulaJS بررسی کنیم. برای اضافه کردن bootstrap به پروژه انگولار کافی ست که لینک زیر را به صفحه مان اضافه کنیم.

<link rel=”stylesheet” href=” http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>

در قسمت زیر یک مثال HTML با استفاده از AngularJS و Bootstrap آورده شده؛

توضیح دایرکتیوهای مثال بالا

مشخصه ها	توضیحات
<body ng-app	یک اپلیکیشن یا برنامه را برای تگ body تعریف می کند
<body ng-controller	یک کنترلر را برای تگ body تعریف می کند
<tr ng-repeat	تکرار تگ tr برای هر یک از user ها در مجموعه users
<button ng-click	فراخوانی تابع editeUser() وقتی که بر روی button کلیک می کنیم
<h3 ng-show	نمایش تگ وقتی که edite=true میشه
<h3 ng-hide	مخفی کردن تگ وقتی که edite=false می شه
<input ng-model	Bindکردن عنصر input به برنامه
<button ng-disabled	غیرفعال کردن تگ button زمانیکه فرم ناقص پر شود و یا خطا داشته باشیم

اگر با کلاس های bootstrap آشنایی ندارید میتونین از اینجا ببینین.
AngularJS Includes
با استفاده از AngularJS شما می توانید یک فایل HTML را در یک فایل دیگر HTML لود کنید. متاسفانه قرار دادن بخشی از HTML در یک فایل HTML دیگر هنوز توسط HTML پشتیبانی نمی ش، HTML import یک روش جدید است که در آینده نزدیک برای نسخه های HTML مورد استفاده قرار خواهد گرفت.

<link rel="import" href="/path/navigation.html">

Server Side Includes
بیشتر وب سرور ها SSI(Server Side Includes) را پشتیبانی می کنند. با SSI شما می توانید یک صفحه را در صفحه دیگر قبل از اینکه به Browser ارسال شود، لود کنید.

<?php require("navigation.php"); ?>

Client Side Includes
روش های زیادی با استفاده از JavaScript واسه قراردادن فایلهای HTML داخل یکدیگر وجود داره. یک راه حل رایج یک درخواست http (AJAX) برای گرفتن اطلاعات از سرور هست و بعد از اون نمایش محتوا در HTML.
AngularJS Side Includes
شما می توانید با استفاده از دایرکیتو ng-include در AngularJS اطلاعات را در صفحه خود لود کنید(در مثال زیر در 4 مرحله اتفاق می افتد)
مرحله اول: ایجاد یک لیست HTML


<h3>Users</h3>
<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
        <span class="glyphicon glyphicon-pencil"></span>  Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr></tbody>
</table>

مرحله دوم: ایجاد یک فرم HTML


<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>  Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">First Name:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">Last Name:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Password:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Repeat:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
    </div>
  </div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>  Save Changes
</button>

مرحله سوم: ایجاد یک کنترلر myUser.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.editUser = function(id) {
  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;
  }
};
})

مرحله چهارم: ایجاد صفحه اصلی


<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>
<script src= "myUsers.js"></script>
</body>

خوب تا اینجای مطالب گفته شده در مورد آموزش کلی انگولار بود تا بتونیم بر روی یک پروژه واقعی کار کنیم، از جلسه آینده یک پروژه تعریف می کنیم تا جذابیت انگولار رو بهتر درک کنیم

Facebook

نیلوفر افشار

نیلوفر افشار کارشناسی ارشد هوش مصنوعی خونده و چند سالی می شه که توسعه دهنده FrontEnd هست و بصورت تخصصی با Sass و Bootstrap کار می کنه. اون همیشه در زمینه مباحث و تکنولوژی های جدید در حوزه وب تحقیق می کنه.

نظرات و سوالات کاربران

ارسال پاسخ

ناشناس

شنبه ۰۶ آبان ۱۳۹۶ ۱۵:۰۱

به صورت دقیق تر و برای مطالعه بیشتر میتو نین به این سایت رجوع کنین.
www.w3schools.com/angular/default.asp

ارسال پاسخ

zahra

یکشنبه ۱۹ اردیبهشت ۱۳۹۵ ۱۰:۵۳

خوب بقیش چی شد....
خیلی کلی توضیح داده شده....

ارسال پاسخ

سوران

جمعه ۰۳ مهر ۱۳۹۴ ۰۲:۰۰

توضیحات خیلی ناکافی هست و مثالی که مربوط به انگولار و بوت استرپ بود خیلی گنگ و توضیحات نداشت

چرا اصلا راجبه کدهای جاوا اسکریپت نوشته شده در اون مثال هیچ توضیحی ندادید؟

مثلا اینکه watch چی هست؟

ارسال پاسخ

MohsenKasiri

پنج شنبه ۰۲ مهر ۱۳۹۴ ۲۳:۱۷

ممنون به خاطر پست های خوبتون
لطفا directive ها رو هم با مثال توضیح بدین ممنون میشیم .