نحوه ثبت داده با استفاده از AngularJS

AngularJS، تکنولوژی گسترش یافته ی HTML با ویژگی های جدید است. این نرم افزار برای صفحات وب تک صفحه ای مناسب است. در این مقاله قصد داریم با استفاده از AngularJS داده ها را ثبت کنیم.

نحوه ثبت داده با استفاده از AngularJS

نحوه ی Bind داده با AngularJS

AngularJS ، تکنولوژی گسترده شده ی HTML با ویژگی های جدید است. این نرم افزار برای صفحات وب تک صفحه ای مناسب است.

آنچه که شما در حال حاضر باید قبل از یادگیری AngularJS  بدانید:


     HTML
     CSS
     جاوا اسکریپت

AngularJS ،به عنوان فایل جاوا اسکریپت گسترش یافته شده است  ،  تگ اسکریپت را مانند زیر اضافه کنید:

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  

AngularJS گسترش یافته HTML با NG-directives.

     دستورات ng-app یک برنامه کاربردی AngularJS تعریف میکند.
    دستورات ng-model  یک مدل AngularJS تعریف میکند  و  مقدار کنترل HTML را ثبت میکند.
     دستورات NG-bind داده های برنامه  را برای مشاهده HTML ثبت میکند.

در حال حاضر یک مثال برای ثبت داده ها با HTML با استفاده از AngularJS نشان میدهیم.

 یک صفحه به نام ANGULARJS Test.html  مانند زیر ایجاد میکنیم.

    <!DOCTYPE html>  
    <html>  
      
    <head></head>  
      
    <body>  
      
        <div>  
        </div>  
      
    </body>  
      
    </html> 

صفحه HTML بالا خالی است ودر اینجا کدهای HTML را اضافه میکنیم،

    <form id="form1">  
      
    <div>  
    نام:<input type="text">  
    <br>  
    <br/>  
    ایمیل:<input type="text">  
    <br>  
    <br>  
    آدرس:<input type="text">  
    <br>  
    <br>  
      
    </div>  
      
    </form>  

حالا اسکریپتی برای دسترسی به AngularJS اضافه میکنیم.

    <!DOCTYPE html>  
      
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <title>Angular JS Test</title>  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
    </head>  
    <body>  
    <form id="form1">  
    <div>  
    نام:<input type="text">  
    <br>  
    <br/>  
    ایمیل:<input type="text">  
    <br>  
    <br>  
    آدرس:<input type="text">  
    <br>  
      
    </div>  
    </form>  
    </body>  
    </html>  

 

 منبع اسکریپت AngularJS را برای دسترسی به کتابخانه و  مدل  داده ها را مینویسیم

 <!DOCTYPE html>  
      
    <html xmlns="http://www.w3.org/1999/xhtml">  
      
        <head>  
            <title>Angular JS Test</title>  
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
            <script>  
                var app = angular.module('myApp', []);  
                app.controller('personCtrl', function($scope)  
                  {  
                    $scope.Name = "ابراهیمی";  
                    $scope.Email = "dev.pro@****.com";  
                    $scope.Address = "تهران, ایران";  
                    $scope.EMP_Info = function()   
                    {  
                        return $scope.Name + " , " + $scope.Email + " , " + $scope.Address;  
                    }  
                });  
            </script>  
        </head>  
          <form id="form1">  
      
    <div>  
    نام:<input type="text">  
    <br>  
    <br/>  
    ایمیل:<input type="text">  
    <br>  
    <br>  
    آدرس:<input type="text">  
    <br>  
    <br>  
      
    </div>  
      
    </form>  
      
        </html>  

 

در بالا یک متغیر با نام 'app' تعریف کرده و ماژولی با نام   مینویسیم MyApp، سپس کنترل با نام "PersonCtrl ایجاد میکنیم  و یک تابع برای ثبت مقادیر جعبه متنی ایجاد میکنیم  و تمام مقادیر بازگشتی را  در صفحه HTML نشان میدهیم.

افزودن تعریف دستورات به کنترل های HTML،

 <!DOCTYPE html>  
      
    <html xmlns="http://www.w3.org/1999/xhtml">  
      
        <head>  
            <title>Angular JS Test</title>  
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
            <script>  
                var app = angular.module('myApp', []);  
                app.controller('personCtrl', function($scope)  
                  {  
                    $scope.Name = "ابراهیمی";  
                    $scope.Email = "dev.pro@****.com";  
                    $scope.Address = "تهران, ایران";  
                    $scope.EMP_Info = function()   
                    {  
                        return $scope.Name + " , " + $scope.Email + " , " + $scope.Address;  
                    }  
                });  
            </script>  
        </head>  
      
        <body dir="rtl">  
            <form id="form1" runat="server">  
                <div ng-app="myApp" ng-controller="personCtrl">  
                    نام:  
                    <input type="text" ng-model="Name">  
                        <br>  
                        <br/> ایمیل:  
                        <input type="text" ng-model="Email">  
                            <br>  
                            <br> آدرس:  
                            <input type="text" ng-model="Address">  
                                <br>  
                                <br>  
                                <b>اطلاعات کارمند :</b> {{EMP_Info()}}  
                                </div>  
                                </form>  
        </body>  
      
        </html>  

 

در HTML بالا، مدل angular با کنترلر  را داریم، و در حال حاضر در مرورگر وب آن را بررسی کنید.در تصویر زیر میبینید ،

در حال حاضر  تغییری  در مقادیر  ساخته شده میدهیم ، تا ببینید  چه اتفاقی می افتد،

دانلود فایل های ضمیمه مخصوص اعضای سایت می باشد !
کاربر مهمان! جهت دانلود و استفاده از امکانات سایت لطفا وارد سایت شوید و یا ثبت نام کنید
دانلود نسخه ی PDF این مطلب