آموزش ایجاد فرم پیشرفته توسط AngularJS

آموزش ایجاد فرم پیشرفته توسط AngularJS

مشخصات مقاله

آموزش ایجاد فرم پیشرفته توسط AngularJS

راهنمای طراحی فرم‌های مدرن توسط AngularJS

 

در این مقاله ، قصد داریم ایجاد فرم های پیشرفته توسط AngularJS را بررسی کنیم .

بنابراین از فریم ورک AngularJS در کلاینت ساید استفاده خواهیم کرد و از فریم ورک Bootstrap برای طراحی و استایل Layout بهره می بریم و در نهایت از تکنولوژی بی نظیر ASP.NET MVC 5 در سرور ساید استفاده می کنیم :

Bootstrap+MVC+AngularJS

ایجاد پروژه ASP.NET Web Application:

خب برای شروع کار ، برنامه VisualStudio 2013 را باز کنید و یک پروژه ASP.NET Web Application ایجاد کنید و نام آنرا AngularForms قرار دهید (مطابق تصویر زیر) :

ایجاد پروژه ASP.NET MVC

و در پنجره ظاهر شده (مانند تصویر زیر) گزینه Empty را انتخاب میکنیم :

ASP.NET Empty Template

نصب AngularJS در پروژه :

به این منظور روی نام پروژه راست کلیک کرده و Manage NuGet Packages را انتخاب میکنیم (مانند تصویر زیر) :

سپس در پنجره بعدی ، روی منوی online میرویم و در باکس جستجو angularjs را سرچ می کنیم و روی Install کلیک میکنیم تا تمام پکیج های Angular روی پروژه ما نصب شوند (مطابق تصویر زیر) :

Install AngularJS Packages

»»» مطالعه مقاله “آموزش مقدماتی انگولار جی‌اس” توصیه می شود.

نصب Bootstrap :

برای نصب فایلهای مربوط به فریم ورک بوت استرپ ، به همان روش فوق عمل میکنیم ، فقط در هنگام جستجو ، عبارت bootstrap را سرچ میکنیم و در نهایت اولین گزینه یافت شده را نصب می کنیم (در زمان نگارش این مقاله ، آخرین ورژن بوت استرپ 3.3.6 می باشد)

ایجاد فایلهای مورد نیاز در پروژه :

پس از پایان نصب دو فریم ورک Angular و Bootstrap ، روی نام پروژه راست کلیک کرده و یک صفحه HTML به پروژه اضافه میکنیم و نام آنرا index.html قرار میدهیم .

به این صفحه باید دو رفرنس بدهیم . اولی bootstrap.min.css (واقع در فولدر Content)و دومی angular.min.js (واقع در فولدر Scripts) . بنابراین در صفحه index.html در تگ head داریم :

<head>     
 <title>Angular Forms</title>     
 <link href="Content/bootstrap.min.css" rel="stylesheet" />     
 <script src="Scripts/angular.min.js"></script> 
</head>

 

ایجاد فایلهای جاوا اسکریپتی مورد نیاز:

در مرحله بعد ، باید 4 تا فایل جاوا اسکریپتی ایجاد کنیم بنامهای : AngularFormsApp , efController , efDirective , efService .

یک فولدر بنام app در روت پروژه می سازیم و در آن یک فایل با فرمت javascript بنام AngularFormsApp.js ایجاد می کنیم .

یک فولدر داخل فولدر app میسازیم بنام EmployeeForm و در آن سه فایل با فرمت js بنام های , efController , efDirective  efService و یک فایل html بنام efTemplate میسازیم . بنابراین solution شما باید بصورت زیر شده باشد :

AngularForms Solution Files

سپس در فایل index.html به فایلهای js ای که ساختیم ، رفرنس می دهیم:

<script src="app/AngularFormsApp.js"></script>     
<script src="app/EmployeeForm/efController.js"></script>     
<script src="app/EmployeeForm/efDirective.js"></script>     
<script src="app/EmployeeForm/efService.js"></script>

 

نوشتن دستورات در فایلهای ایجاد شده :

در فایل AngularFormsApp یک متغیر Global مانند زیر تعریف می کنیم :

var angularFormsApp = angular.module('angularFormsApp', []);

دستورات فایل efController.js:

در فایل efController.js دستورات زیر را می نویسیم :

angularFormsApp.controller('efController', function ($scope, efService) { 
 $scope.employee = efService.employee; 
});

 

دستورات فایل efService.js:

و در فایل efService.js نیز دستورات زیر را تعریف می کنیم :

angularFormsApp.factory('efService', function () { 
 return { 
  employee: { 
  fullName: "Ehsan Safari", 
   notes: "Hello , I am web developer !", 
   department: "Administration", 
   perkCar: true, 
   perkStock: false, 
   perkSixWeeks: true, 
   peyrolType : none 
  } 
 } 
});

 

نکته : به ng- یک دایرکتیو می گویند .

در تگ html صفحه index ، دایرکتیو ng-app و در تگ body دایرکتیو ng-controller را بصورت زیر تعریف می کنیم :

<html ng-app="angularFormsApp">
<body ng-controller="efController">

 

فایل efDirective:

در فایل efDirective دستورات زیر را می نویسیم :

angularFormsApp.directive('employeeForm', function () { 
 return { 
  restrict: 'E', templateUrl : 'app/EmployeeForm/efTemplate.html' 
 } 
});

 

و در فایل index.html و در تگ body دستور <employee-form/> را می نویسیم .

آموزش فرم های انگولار

فایل efTemplate.html:

دستورات زیر را در فایل efTemplate.html می نویسیم :

<form class="form-horizontal" ng-submit="submitForm()" role="form">
 <fieldset>
  <legend><code data-language="css">Basic Information</code></legend>
  <div class="form-group">
   <label class="col-sm-3 control-label" for="fullName">Name</label>
   <div class="col-sm-9">
    <input class="form-control" id="fullName" name="fullName" ng-model="employee.fullName" type="text" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-3 control-label" for="notes">Notes</label>
   <div class="col-sm-9">
    <textarea class="form-control" cols="40" id="notes" name="notes" ng-model="employee.notes" rows="5"></textarea>
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-3 control-label" for="department">Department</label>
   <div class="col-sm-9">
    <select class="form-control" id="department" name="department" ng-model="employee.department" ng-options="dept for dept in departments"></select>
   </div>
  </div>
 </fieldset>
 <fieldset>
  <legend>Perks</legend>
  <div class="form-group">
   <div class="col-sm-3">
   &nbsp;
   </div>
  <div class="col-sm-9">
   <div class="checkbox">
    <label><input ng-model="employee.perkCar" type="checkbox" value="perkCar" />Company Car </label>
   </div>
   <div class="checkbox">
    <label><input ng-model="employee.perkStock" type="checkbox" value="perkStock" />Stock Options </label>
   </div>
   <div class="checkbox">
    <label><input ng-model="employee.perkSixWeeks" type="checkbox" value="perkSixWeeks" />Six Weeks Vacation </label>
   </div>
   </div>
  </div>
 </fieldset>
 <fieldset>
  <legend>Payroll Type</legend>
  <div class="form-group">
   <div class="col-sm-3">
   &nbsp;
   </div>
  <div class="col-sm-9">
   <div class="radio">
    <label><input name="payrollType" ng-model="employee.payrollType" type="radio" value="w2" /> W-2 </label>
   </div>
   <div class="radio">
    <label><input name="payrollType" ng-model="employee.payrollType" type="radio" value="ten99" /> 1099 </label>
   </div>
   <div class="radio">
    <label><input name="payrollType" ng-model="employee.payrollType" type="radio" value="none" /> None </label>
   </div>
   </div>
  </div>
 </fieldset>
 <div class="col-sm-offset-3 col-sm-9">
  <input class="btn btn-primary" ng-click="submitForm()" type="submit" value="Submit" />
 </div>
</form>

 

اکنون اگر صفحه index.html را اجرا کنیم خروجی به شکل زیر خواهد بود :

لطفا تجربیات و نظرات خود را در کار با فرم ها در انگولار جی اس (AngularJS) با ما در میان بگذارید.

0/5 (0 نظر)

اطلاعات مقاله

آموزش ایجاد فرم پیشرفته توسط AngularJS

فرم ارسال دیدگاه درباره

آموزش مقدماتی انگولار جی‌اس [AngularJS]

دیدگاه کاربران درباره

آموزش مقدماتی انگولار جی‌اس [AngularJS]

دیدگاهی وجود ندارد