توسعه یک برنامه هیجان انگیز با انگولار#4
سلام، دوباره با یه آموزش انگولار دیگه کنار همیم. اگر یادتون باشه تو قسمتهای قبلی از فرمهای انگولار مثال زدیم، چیزی که نگفتیم این بود که انگولار یک سری ویژگی ها برای اعتبار سنجی ورودی های فرم (form validation) در اختیار برنامه نویسا میذاره، مثل ng-valid , ng-dirty و ...مثلاً تو فرم های Html با استفاده از required می تونیم انتخاب شدن فیلد هارو اجباری کنیم. در این قسمت در مورد فرم ها و اعتبار سنجی اونها توسط انگولار صحبت میکنیم.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
بلیط هواپیما مشهد تهران
خرید بلیط هواپیما مشهد تهران
خرید بلیط هواپیما مشهد تهران
بلیط هواپیما تهران شیراز
خرید بلیط هواپیما تهران شیراز
خودتان را اینجا معرفی کنید
خرید بلیط هواپیما تهران شیراز
فرم ها در انگولار
فرم های html رو میشه با انگولار کنترل کرد، پس دکمه ها و ... همه همونهایی هستن که توی html داریم؛
- input elements
- select elements
- button elements
- textarea elements
*نکته: 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
| مشخصه ها | توضیحات |
| 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">
بیشتر وب سرور ها SSI(Server Side Includes) را پشتیبانی می کنند. با SSI شما می توانید یک صفحه را در صفحه دیگر قبل از اینکه به Browser ارسال شود، لود کنید.
<?php require("navigation.php"); ?>
روش های زیادی با استفاده از 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>
<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>
نیلوفر افشار
نیلوفر افشار کارشناسی ارشد هوش مصنوعی خونده و چند سالی می شه که توسعه دهنده FrontEnd هست و بصورت تخصصی با Sass و Bootstrap کار می کنه. اون همیشه در زمینه مباحث و تکنولوژی های جدید در حوزه وب تحقیق می کنه.
نظرات و سوالات کاربران
www.w3schools.com/angular/default.asp
خیلی کلی توضیح داده شده....
توضیحات خیلی ناکافی هست و مثالی که مربوط به انگولار و بوت استرپ بود خیلی گنگ و توضیحات نداشت
چرا اصلا راجبه کدهای جاوا اسکریپت نوشته شده در اون مثال هیچ توضیحی ندادید؟
مثلا اینکه watch چی هست؟
ممنون به خاطر پست های خوبتون
لطفا directive ها رو هم با مثال توضیح بدین ممنون میشیم .