نوار پیشرفت یا Progress Bar در AngularJS

در این مقاله قصد داریم یک نوار پیشرفت یا Progress bar را با استفاده از AngularJS ایجاد کنیم. نوار پیشرفت نشان دهنده پیشرفت عملیات در حال انجام است .

برای هر عملیات در Windows یا وب با استفاده از این نوار پیشرفت می توان میزان پیشرفت کار را متوجه شد یا به عبارت دیگر این نوار برای نمایش گذاشتن مقدار انجام شدن یا نشدن عملیات مربوطه استفاده می شود. با استفاده از آن می توان به مخاطب اطلاع رسانی کرد که عملیات در چه مرحله ای قرار دارد و چه میزان از زمان باید برای انجام عملیات مربوطه انتظار بکشد.

در اینجا نحوه پیاده سازی چنین نواری را با استفاده از Angular بررسی خواهیم کرد. این نوار را می توان به سادگی به صورت پویا در AngularJS ایجاد کرد.

یک پروژه ایجاد کرده و و یک فایل Html با نام index به آن اضافه میکنیم. وکدهای زیر را در آن قرار می دهیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Progress Bar</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="/Scripts/angular.min.js"></script>
    <script src="IndexController.js"></script>
</head>

<body data-ng-app="TestApp" data-ng-controller="IndexController as model" dir="rtl">
<form style="margin:40px">
    <h3><a href="http://barnamenevisan.org">مرجع تخصصی برنامه نویسان</a></h3>
    <div class="row animated fadeInRight">
        <div class="col-lg-12">
            <div class="rowDiv">
                <h3>{{model.message}}</h3>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="rowDiv">
                <input type="button" value="شروع" class="btn-success" data-ng-click="model.fnStart();"/>
                <input type="button" value="از سر گیری" class="btn-danger" data-ng-click="model.fnRestart();"/>
            </div>
        </div>
      
        <div class="col-lg-12" style="margin-top:5px">
            <div class="rowDiv">
                <div style="background-color: gold;" ng-style="{'width':model.width}">{{model.progress}}%</div>
            </div>
        </div>
    </div>
</form>
</body>

</html>

توجه داشته باشید که از Nuget ، پکیج های مورد نیاز نصب شده باشند. دو پکیج موردنیاز Bootstrap و AngularJS هستند. که در head صفحه ، منابع آنها قرار گرفته اند.

همانطور که میبینید اسکریپت دیگری نیز در کد بالا وجود دارد. این اسکریپت به کنترلر جاوااسکریپت اشاره دارد. پس آن را نیز باید ایجاد کنیم. برای این کار بر روی نام پروژه راست کلیک کرده و و از قسمت add ، گزینه javascript file را انتخاب میکنیم. نام کنترلر را indexController.js قرار دادیم. اکنون کدهای زیر را به آن اضافه میکنیم.

'use strict';
var testApp = angular.module('TestApp', []);
testApp.controller('IndexController', ['$http', '$timeout', '$interval', function ($http, $timeout, $interval) {
    var self = this;
    self.message = 'نوار پیشرفت';
    self.progress = 0;
    self.start = 0;
    self.width = '0%';
    self.fnStart = function () {
        $interval(progressStatus, 100);
    }
    self.fnRestart = function () {
        self.progress = 0;
        self.start = 0;
        $interval(progressStatus, 100);
    }

    function progressStatus() {
        self.progress = Math.min(100, parseInt(100.0 * self.start / 100));
        self.start += 1;
        self.width = self.progress + '%';
    }
}]);

برنامه خود را اجرا کرده و نتیجه زیر را مشاهده میکینم.

آموزش angular

فایل های ضمیمه

4845_WebApplication12.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

نوار پیشرفت یا Progress Bar در AngularJS

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید