آموزش ایجاد فرم پیشرفته توسط AngularJS
آموزش ایجاد فرم پیشرفته توسط AngularJS » در این مقاله توسط سه تکنولوژی قدرتمند Bootstrap و MVC و AngularJS ، فرم های مدرن html را تولید خواهیم کرد.

به نام خدا

راهنمای طراحی فرم‌های مدرن توسط 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انگولار جی اسانگولار یکفرم انگولار

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

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

2 × چهار =