معرفی دستور دهنده های (Directive های) ng-app و ng-model و ng-bind و کاربرد آنها، در AngularJS

در کلید شماره 26189 ، مفهوم کلی دستور دهنده ها (Directive ها) در چارچوب AngularJS را شرح دادیم. اکنون قصد داریم که در این کلید آموزشی، سه Directive مهم با نام های ng-app و ng-model و ng-bind را معرفی کنیم و چگونگی استفاده از آنها و کاربردشان را بیان نماییم.

ابتدا یک مثال را ذکر می کنیم که این سه Directive در آن به کار رفته اند و سپس کاربرد هر کدام را بیان خواهیم کرد.

کدهای صفحه را به صورت زیر می نویسیم :

نتیجه :

اگر در کادر خالی، عبارتی را بنویسیم، همان عبارت در قسمت دیگری از صفحه، نمایش داده می شود :

به عنوان مثال :

اکنون در ادامه، نقش هر یک از سه Directive به کار رفته در کدهای صفحه را شرح می دهیم.

کاربرد ng-app :

ng-app برای تعیین اینکه در حال ساخت یک اپلیکیشن (Application) تک صفحه ای بر اساس AngularJS می باشیم، به کار می رود :

اگر این Directive را در صفحه ننویسیم، چارچوب AngularJS هیچ تغییری در صفحه نمی دهد و عملا سایر Directive های نوشته شده در صفحه و کدهای مربوط به AngularJS ، اثری در صفحه نخواهند داشت. بنابراین نوشتن ng-app در صفحه را نباید فراموش کنید.

کاربرد ng-model :

ng-model می تواند برای تگ هایی (Tag) که در HTML برای دریافت ورودی از کاربر به کار می روند، ذکر گردد. مثل تگ های input و select و textarea .

بنابراین چنانچه ng-model را برای هر یک از این تگ ها به کار ببریم، بر اساس نامی که برای ng-model انتخاب کرده ایم، مقداری که توسط کاربر وارد می شود، به عنوان مقدار مربوط به متغیری از اپلیکیشن (Application Variable) با همان نام، در نظر گرفته می شود :

بنابراین با کد بالا تعیین کرده ایم که مقداری که توسط کاربر در کادر ایجاد شده توسط تگ input وارد می شود، در یک متغیر با نام kelidestanVariable ذخیره گردد :

با هر تغییر در ورودی کاربر، در همان لحظه، مقدار متغیر kelidestanVariable نیز تغییر می کند.

کاربرد ng-bind :

ng-bind برای ارتباط دادن (bind کردن) مقدار یک متغیر از اپلیکیشن (Application Variable) یا قسمتی از اطلاعات اپلیکیشن، به بخشی از صفحه، به کار می رود. به این صورت که مقدار متغیر (یا هر اطلاعاتی از اپلیکیشن)، در آن بخش از صفحه، نمایش داده شود :

بنابراین کد بالا تعیین کرده است که مقدار متغیر kelidestanVariable در بین زوج تگ span مورد نظر از صفحه، نمایش داده شود.

ساختار کلی صفحه :

بنابراین سه Directive با نام های ng-app و ng-model و ng-bind ، عملکرد صفحه مورد نظر را طراحی کرده اند.

ng-app تعیین کرده که در حال ساخت یک اپلیکیشن (Application) بر مبنای چارچوب AngularJS می باشیم. سپس ng-model و ng-bind ، با توجه به اینکه یک نام متغیر اپلیکیشن (Application Variable) یکسان برای هر دو آنها به کار رفته، باعث می شوند که در بخشی از صفحه، در هر لحظه که مقدار وارد شده تغییر می کند، مقدار متغیر مورد نظر تغییر نماید و بنابراین مقدار جدید آن، در بخش دیگری از صفحه، نمایش داده شود (مقدار نمایش داده شده از آن، به روزرسانی شود).