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

دوشنبه 3 خرداد 1395

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 با کنترلر  را داریم، و در حال حاضر در مرورگر وب آن را بررسی کنید.در تصویر زیر میبینید ،

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

آموزش angular

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

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

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید