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

AngularJS، تکنولوژی گسترش یافته ی HTML با ویژگی های جدید است. این نرم افزار برای صفحات وب تک صفحه ای مناسب است. در این مقاله قصد داریم با استفاده از 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

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

5027_WebApplication6.rar

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

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

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

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

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

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

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