آموزش ایجاد فرم پیشرفته توسط 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 را انتخاب میکنیم (مانند تصویر زیر) :

اجرای کنسول Nuget

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

Install AngularJS Packages

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

نصب Bootstrap :

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

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

پس از پایان نصب دو فریم ورک 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>

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

در مرحله بعد ، باید ۴ تا فایل جاوا اسکریپتی ایجاد کنیم بنامهای : 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 را اجرا کنیم خروجی به شکل زیر خواهد بود :

خروجی فرم


برچسب‌ها:

Angular FormsAngularJSآموزش فرم انگولارآموزش فرم های Angularانگولار جی اسانگولار یکفرم انگولار

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

19 − سیزده =