اکثر شما با لغت AngularJS آشنایی دارید. AngularJS یکی از مشهور ترین و بهترین فریم ورک های جاواسکریپت است. این مقاله برای افراد مبتدی است که تا به حال از این تکنولوژی استفاده نکرده اند.

AngularJS چیست؟

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

دستورات

بیایید از AngularJS استفاده کنیم. اولین قدم لازم برای اجرا چه خواهد بود؟ ابتدا لازم است به AngularJS رفرنس داده شود.

<script src="~/Script/angular.min.js"></script>

فایل angular.min.js را می توانید از اینجا بردارید.

همچنین می توانید این چنین به AngularJS رفرنس دهید.

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

در این مدل هر بار سایت شما باز می شود کامپیوتر کاربر به صورت اتوماتیک این فایل را از این آدرس گرفته و سایت باز می شود.

پس از نوشتن این کد شما مجاز به استفاده از AngularJS می باشید.

دستورات مقدماتی

دستورات پایه ای در AngularJS وجود دارد که شما باید با آنها آشنا شوید. مانند :

ng-app

ng-init

ng-model

ng-repeat

ابتدا با یک مثال ساده شروع می کنیم.

در ابتدا گفتیم که AngularJS از html استفاده می کند. بنابراین یک html با کمترین تگ می سازیم :

<div ng-app>  
    <p>نام من هست : {{"Please make me upper case letter".toUpperCase()}}</p>  
</div>

در این مثال ما تگ ng-app را به صفحه اضافه کردیم.

تگ ng-app چیست؟

تگ ng-app ریشه اصلی برنامه AngularJS می باشد. این به طور معمول به عنوان صاحب برنامه عمل می کند. ما تنها پس از معرفی این تگ به صفحه می توانیم از AngularJS استفاده نماییم. نکته مهم این است که ما قبل از این تگ نمی توانیم از AngularJS استفاده نماییم. با یک مثال این موضوع را نمایش خواهیم داد.

مثال 1 :

    <div ng-app>
    <p>نام من هست : {{"Please make me upper case letter".toUpperCase()}}</p>
    <p>حاصل جمع 2 عدد : {{ 2+2 }}</p>
    </div>

خروجی برای زمانی که قبل از تگ ng-app جمع دو عدد صورت گرفته است :

بنابراین چه کنیم که برنامه درست کار کند؟ برای این کار کافی است که کد خود را بعد از تعریف تگ ng-app قرار دهیم :

    <div ng-app>  
        <p>My name is : {{"Please make me upper case letter".toUpperCase()}}</p>  
    <p>Add me please: 2+2: {{ 2+2 }}</p>  

خروجی این چنین می شود:

حالا نوبت تگ بعدی است.

تگ ng-init

همانطور که از نامش پیداست برای مقداردهی اولیه (initialize) داده های AngularJS مورد استفاده قرار می گیرد. حالا مثال زیر را ببینید :

    <div ng-init="myFavoriteWebsites=['http://www.c-sharpcorner.com/','http://www.codeproject.com/','http://sibeeshpassion.com/']">
        وبسایت اول : {{myFavoriteWebsites[0]}}
        <br />
        وبسایت دوم : {{myFavoriteWebsites[1]}}
        <br />
        وبسایت سوم : {{myFavoriteWebsites[2]}}
    </div>

لازم به ذکر است که کدهای بالا حتما باید درون تگ ng-app باشند.

خروجی چنین خواهد شد :

امیدواریم که با این تگ کاملا آشنا شده باشید. حالا ng-model را خواهیم دید.

ng-model

اساسا دستور ng-model روی کنترل های html مقداردهی انجام می دهد. برای مثال :

    هر دلار : <input type="number" ng-model="curinr" />
    <br />
    تومان : {{curinr*3320}}  

در این مثال ما از ng-model استفاده کرده و به آن در داده های برنامه دسترسی داریم. در این مثال زمانی که در این number box عددی وارد کنید در کسری از ثانیه مقدار محاسبه شده را خواهید دید. این قدرت AngularJS است.

ng-repeat

این دستور برای ایجاد حلقه روی مجموعه ها و آرایه ها است و همانند حلقه Foreach در #C عمل می کند.

برای نحوه کار با این دستور، مثال قبلی را با استفاده از ng-repeat بررسی می نماییم :

        <ul>
            وبسایتهای من :
            <li ng-repeat="n in myFavoriteWebsites">
                {{n}}
            </li>
        </ul>

حال به خروجی نگاه کنید. با نوشتن تعداد کدهای کمتر همان پردازش مثال قبل انجام شد.

خروجی :

وقتی شما کدی می نویسید این کد باید سبک، ساده و کارآمد باشد.

اگر کدهای شما ساده نباشند هر کس به کدهای شما نگاه کند چنین می شود :

کنترلرها

کنترلرهای AngularJS شیء جاوااسکریپت هستند. از قالبلیت های اصلی این شیء کنترل کردن داده برنامه آنگولار ما می باشد.

دستوری که در اینجا استفاده می شود ng-controller می باشد.

در زیر نمونه مثالی است که ما با ng-model انجام دادیم :

    هر دلار : <input type="number" ng-model="curinr" />
    <br />
    تومان : {{curinr*3320}}

حال ما آن را مانند زیر تغییر می دهیم.

    <b>ng-Controller</b><br />

    <div>

        دلار:

        <input type="number" ng-model="inrvalue" />

        <br />

        تومان: {{inrToDollar()}}

    </div>  

در تکه کد بالا شما می توانید یک دستور جدید با نام ng-controller پیدا کنید و من آن را در اینجا DollarToToman نامگذاری کردم. گام بعدی ساخت این کنترلر می باشد.

این گونه می توانید کنترلر بسازید:

var my = angular.module('angularJSBasic', []);  

در ان جا angularJSBasic نام برنامه ما می باشد. کد کامل برای ساخت کنترلر این مثال مانند زیر می باشد:

<script>

    var my = angular.module('angularBasic', []);

    my.controller('DollarToToman', function($scope) {

        $scope.DollarToToman = function () {

            return $scope.inrvalue * 3220;

        }

    });

</script>

scope$ در اسکریپت بالا چیست؟

scope$ قسمتی از کنترلر می باشد. هر کنترلری باید شیء scope$ خودش را داشته باشد. در تکه کد بالا ما از یک تابع که مقدار دلار را در عدد 3320 (قیمت روز دلار) ضرب کرده و مقدار آن را (تومان) بر می گرداند.

خروجی ما چنین است :

برای انجام این تمرین اگر می خواستیم تنها از جاوا اسکریپت و جی کوئری استفاده کنیم باید از کدهای به مراتب بیشتری استفاده نماییم.

آموزش angular