آموزش فرم های 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>

 

 

<br />

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

                         
    
Basic Information

Perks

Payroll Type




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


خروجی فرم


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



دیدگاه ها :