مقدمه ای بر angular

Angular یک فریم ورک طراحی اپلیکیشن و یک پلتفرم جهت ساخت اپلیکیشن های تک صفحه ای (Single page) می باشد. این فریم ورک که مشتق شده از جاوا اسکریپت می باشد به راحتی امکان برقراری ارتباط با سرور را می دهد، از این رو علاوه بر طراحی اپ های تک صفحه ای، بروز رسانی بخش های مختلف یک صفحه نیز به راحتی امکان پذیر می باشد.

ساخت اولین برنامه

برای ساخت اپلیکیشن های angular از Code Editor های مختلفی می توانید استفاده نمایید که پیشنهاد ما استفاده از Visual Studio Code جهت ساخت برنامه ها می باشد. پس از دانلود و نصب این برنامه می بایست یک پوشه در محل دلخواه ایجاد نمایید.

ساخت پروژه انگولار

سپس برنامه Visual Studio Code را اجرا و از منوی File گزینه Open Folder را انتخاب نمایید.

برنامه نویسی انگولار - انتخاب پوشه

در پنجره باز شده، پوشه ایجاد شده در مرحله اول را انتخاب کرده و روی دکمه Select Folder کلیک کنید تا به عنوان پوشه پروژه آن را انتخاب نماید. برای ساخت فایل جدید، روی گزینه New File کلیک کنید.

آموزش انگولار - ساخت فایل

نام فایل ایجاد شده را index.html تعیین نموده و کلید Enter را فشار دهید تا نام تعیین شده ثبت گردد.

کدهای مورد نیاز جهت ایجاد یک صفحه وب را به آن اضافه نمایید.

<!DOCTYPE html>
<html>
    <head>
        <title>Beno Academy | Angular Tutorial</title>
    </head>
    <body>
        
    </body>
</html>

آموزش انگولار - ساخت فایل اصلی

استفاده از امکانات و قابلیت های Angular در صفحات HTML به وسیله دستورالعمل هایی انجام می شود که با پیشوند ng شروع می شوند و مهمترین آنها عبارتند از:

  • ng-app: برای تعریف یک اپلیکیشن Angular استفاده می شود و معمولاً برای تگی که دربرگیرنده سایر تگ ها در صفحه می باشد این دستور تنظیم می شود.
  • ng-init: برای مقداردهی اولیه به متغیرهای تعریف شده استفاده می شود.
  • ng-model: یک کنترل HTML مانند input, select, textarea و ... را جهت دریافت اطلاعات، به فیلدهای اطلاعاتی اپلیکیشن متصل می نماید.
  • ng-bind: برای نمایش محتوای فیلدهای اطلاعاتی اپلیکیشن در تگ های HTML مورد استفاده قرار می گیرد.
  • ng-repeat: برای پیمایش درون مجموعه ای مانند آرایه استفاده می شود و عملکرد آن مشابه حلقه for و foreach در جاوا اسکریپت می باشد.

مثال: قصد داریم برنامه ای بنوسیم که محتوای تایپ شده در یک input را درون تگ p نمایش دهد.

ابتدا باید لینک کتابخانه Angular را در قسمت head اضافه نماییم.

<!DOCTYPE html>
<html>
    <head>
        <title>Beno Academy | Angular Tutorial</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
    </head>
    <body>

    </body>
</html>

درون body یک div که در برگیرنده سایر عناصر موجود در صفحه می باشد ایجاد کرده و دستور ng-app را برای آن ست می کنیم.

<body>
    <div ng-app="">
        
    </div>
</body>

درون اپلیکیشن ایجاد شده متنی به همراه input جهت دریافت اطلاعات قرار می دهیم. از آنجا که قصد داریم توسط input اطلاعاتی را دریافت کنیم، می بایست ng-model را برای آن تنظیم نماییم.

<body>
    <div ng-app="">
        <div> 
            Enter your name : <input type="text" ng-model="name" />            
        </div>
    </div>
</body>

در این مثال مقدار ng-model برابر name تعریف شده است که محتوای وارد شده در input را درون متغیری به نام name قرار می دهد.

حال توسط ng-model می توان محتوای متغیر name را درون تگی مانند p نمایش داد.

<body>
    <div ng-app="">
        <div> 
            Enter your name : <input type="text" ng-model="name" />            
        </div>
        <div>
            <p ng-bind="name"></p>
        </div>
    </div>
</body>

پس از تکمیل کدها، صفحه را ذخیره کرده و برای اجرای آن روی نام صفحه کلیک راست کرده و گزینه Open in default browser را انتخاب نمایید.

آموزش انگولار - اجرای اولین برنامه

مشاهده می کنید که به محض ورود اطلاعات درون input، متن مورد نظر در تگ p نمایش داده می شود و هر تغییری در محتوای آن، بصورت آنی اعمال می شود.

اولین برنامه انگولار