آموزش فرم های Angular

به نام خدا

آموزش فرم های Angular

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

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

Bootstrap+MVC+AngularJS

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

angularFormsApp.controller('efController',

    function ($scope, efService) {

        $scope.employee = efService.employee;

});

و در فایل 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 دستورات زیر را می نویسیم :

angularFormsApp.directive('employeeForm',

    function () {

        return {

            restrict: 'E',

            templateUrl : 'app/EmployeeForm/efTemplate.html'

        }

 });

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

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

<form class="form-horizontal" role="form" ng-submit="submitForm()">

    <fieldset>

        <legend>Basic Information</legend>

        <div class="form-group">

            <label for="fullName" class="col-sm-3 control-label">Name</label>

            <div class="col-sm-9">

                <input type="text" id="fullName" name="fullName" class="form-control"

                       ng-model="employee.fullName" />

            </div>

        </div>

        <div class="form-group">

            <label for="notes" class="col-sm-3 control-label">Notes</label>

            <div class="col-sm-9">

                <textarea name="notes" id="notes" class="form-control" rows="5" cols="40"

                          ng-model="employee.notes"></textarea>

            </div>

        </div>

 

        <div class="form-group">

            <label for="department" class="col-sm-3 control-label">Department</label>

            <div class="col-sm-9">

                <select name="department" id="department" class="form-control"

                        ng-model="employee.department"

                        ng-options="dept for dept in departments"></select>

            </div>

        </div>

    </fieldset>

    <br />

    <fieldset>

        <legend>Perks</legend>

        <div class="form-group">

            <div class="col-sm-3">

            </div>

            <div class="col-sm-9">

                <div class="checkbox">

                    <label>

                        <input type="checkbox" value="perkCar"

                               ng-model="employee.perkCar" />Company Car

                    </label>

                </div>

                <div class="checkbox">

                    <label>

                        <input type="checkbox" value="perkStock"

                               ng-model="employee.perkStock" />Stock Options

                    </label>

                </div>

                <div class="checkbox">

                    <label>

                        <input type="checkbox" value="perkSixWeeks"

                               ng-model="employee.perkSixWeeks" />Six Weeks Vacation

                    </label>

                </div>

            </div>

        </div>

    </fieldset>

    <br />

    <fieldset>

        <legend>Payroll Type</legend>

        <div class="form-group">

            <div class="col-sm-3">

            </div>

            <div class="col-sm-9">

                <div class="radio">

                    <label>

                        <input type="radio" name="payrollType" value="w2"

                               ng-model="employee.payrollType" /> W-2

                    </label><br />

                </div>

                <div class="radio">

                    <label>

                        <input type="radio" name="payrollType" value="ten99"

                               ng-model="employee.payrollType" /> 1099

                    </label><br />

                </div>

                <div class="radio">

                    <label>

                        <input type="radio" name="payrollType" value="none"

                               ng-model="employee.payrollType" /> None

                    </label><br />

                </div>

                <br />

            </div>

        </div>

    </fieldset>

    <div class="col-sm-offset-3 col-sm-9">

        <input type="submit" class="btn btn-primary" value="Submit"

               ng-click="submitForm()" />

    </div>

</form>

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


خروجی فرم


تاریخ انتشار : ۱۷ دی ۱۳۹۴



دیدگاه ها :