اضافه کردن Bootstrap CSS به فرم ها در فریم ورک AngularJS

اضافه کردن Bootstrap CSS به فرم ها در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با اضافه کردن Bootstrap CSS به فرم ها در فریم ورک AngularJS  صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در این قسمت از آموزش از وب سایت پرووید قصد داریم با استفاده از Bootstrap CSS به فرم ساخته شده در قسمت قبلی از این آموزش CSS Class هایی را اضافه کنیم، تا بتوانیم فرم مربوطه را به صورت Responsive داشته باشیم. برخی از CSS Class  هایی که به فرم اضافه خواهند شد را در قسمت زیر مشاهده می کنید.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

  • container
  • form-horizontal
  • form-group
  • control-label
  • form-control
  • radio
  • checkbox
  • btn, btn-primary

کدی که در قسمت زیر نشان داده شده است، مربوط به همان فرم ساخته شده در آموزش قبلی است که این بار از Style های Bootstrap به منظور Responsive  کردن آن استفاده کرده ایم.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <link href="~/Content/bootstrap.CSS" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-controller="studentController" class="container" > <br />
    <form class="form-horizontal" ng-submit="submitStudnetForm()" role="form">
        <div class="form-group">
            <label for="firstName" class="col-sm-3 control-label">First Name</label>
            <div class="col-sm-6">
                <input type="text" id="firstName" class="form-control" ng-model="student.firstName" />
            </div>
            <div class="col-sm-3"></div>

        </div>
        <div class="form-group">
            <label for="lastName" class="col-sm-3 control-label">Last Name</label>
            <div class="col-sm-6">
                <input type="text" id="lastName" class="form-control" ng-model="student.lastName" />
            </div>
            <div class="col-sm-3"></div>
        </div>
        
        <div class="form-group">
            <label for="dob" class="col-sm-3 control-label">DoB</label>
            <div class="col-sm-2">
                <input type="date" id="dob" class="form-control" ng-model="student.DoB" />
            </div>
            <div class="col-sm-7"></div>
        </div>
        
        <div class="form-group">
            <label for="gender" class="col-sm-3 control-label">Gender</label>
            <div class="col-sm-2">
                <select id="gender" class="form-control" ng-model="student.gender">
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
            </div>
            <div class="col-sm-7"></div>
        </div>
        
        <div class="form-group">
            <div class="col-sm-3"></div>
            <div class="col-sm-2">
                <span><b>Training Location</b></span>
                <div class="radio">
                    <label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label>
                </div>
                <div class="radio">
                    <label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label>
                </div>
            </div>
            <div class="col-sm-7">
                <span><b>Main Subjects</b></span>
                <div class="checkbox">
                    <label><input type="checkbox" ng-model="student.maths" />Maths</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" ng-model="student.physics" />Physics</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox"  ng-model="student.chemistry" />Chemistry</label>
                </div>
            </div>
        </div>

        <input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" />
        <input type="reset" value="Reset" ng-click="resetForm()" 
    </form>
    <script>
     //1. create app module 
        var studentApp = angular.module('studentApp', []);

        //2. create controller
        studentApp.controller("studentController", function ($scope, $http) {
  
            //3. attach originalStudent model object
            $scope.originalStudent = {
                firstName: 'James',
                lastName: 'Bond',
                DoB: new Date('01/31/1980'),
                gender: 'male',
                trainingType: 'online',
                maths: false,
                physics: true,
                chemistry: true
            };

            //4. copy originalStudent to student. student will be bind to a form 
            $scope.student = angular.copy($scope.originalStudent);

            //5. create submitStudentForm() function. This will be called when user submits the form
            $scope.submitStudnetForm = function () {

                var onSuccess = function (data, status, headers, config) {
                    alert('Student saved successfully.');
                };

                var onError = function (data, status, headers, config) {
                    alert('Error occured.');
                }

                $http.post('/student/submitData', { student:$scope.student })
                    .success(onSuccess)
                    .error(onError);

            };

            //6. create resetForm() function. This will be called on Reset button click.  
            $scope.resetForm = function () {
                $scope.student = angular.copy($scope.OriginalStudent);
            };
    });
    </script>   
</body>
</html>

دقت کنید که اگر این فایل بیش از حد به هم ریخته است می توانیم از فایل های جاوااسکریپت (JS) مجزایی برای سازمان دهی Application Module و Controller های آن ها استفاده کنیم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

در قسمت بعدی از این آموزش در رابطه با Client Side Validation و یا اعتبارسنجی داده ها در سمت Client صحبت خواهیم کرد. این کار یک موضوع بسیار مهم در فرم های AngularJS است.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک Angular استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل برنامه نویسی تحت وب با Angular مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت