مقدمه ای بر AngularJS

مقدمه ای بر AngularJS

AngularJS صرفا یک کتابخانه یا چارچوب کاری JavaScript است. از این رو می‌توان با استفاده از تگ script آن را به صفحات HTML افزود. AngularJS خصیصه‌های (attribute ) HTML را از طریق‌‌directive ها (دستورها) بسط داده و با بهره‌گیری از عبارت‌ها (expression) داده‌ها را به HTML مقید می‌سازد ( bind می‌کند). AngularJS یک کتابخانه یا چارچوب کاری JavaScript است!

همان طور که می‌دانید AngularJS یک چارچوب کاری (framework) است که با زبان جاوا اسکریپت نوشته شده‌است. AngularJS به صورت یک فایل جاوا اسکریپت ارائه شده و می‌توان آن

را با استفاده از تگ script به صفحه‌ی وب اضافه کرد

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

AngularJS قابلیت‌ها و امکانات زبان طراحی وب HTML را بسط می‌دهد! کتابخانه‌ی AngularJS با استفاده از دستورهای ng – directive قابلیت های HTML را بسط می‌دهد. دستور ng-app یک برنامه‌ی AngularJS را تعریف یا مشخص می‌کند. کار دستور ng-model این است که مقدار کنترل‌های HTML همچون input ، select و textarea را به داده‌های app متصل (bind) می‌کند. دستور ng-bind داده‌های برنامه را به اشیا نمایی‌/‌دیداری HTML(view) مقید می‌سازد (bind می‌کند) مثالی از AngularJs

<div ng-app=""> <p>Input something in the input box:</p> <p>Name: <input type="text" ng-model="name"> </p> <p ng-bind="name"></p> </div>

تشریح مثال:

AngularJS با بارگذاری کامل صفحه به صورت خودکار آغاز می‌شود. پس از آن به واسطه‌ی دستور ng-app به AngularJs اطلاع دادیم که تگ div مالک برنامه‌ی Angularjs است. سپس با استفاده از دستور ng-model مقدار فیلد input را به متغیر برنامه " name" مقید(bind) کردیم . در پایان دستور ng-bind کاری کردیم که متغیر برنامه‌ی name به innerHtml تگ p وصل (bind) شود.

Directive های AngularJS

همان طور که قبلا مشاهده کرده‌اید ، directive های AngularJS در واقع همان خصیصه‌های (attribute) HTML هستند که دارای پیشوند ng می‌باشند

به عنوان مثال دستور ng-init ، متغیرهای برنامه را مقداردهی اولیه (initialize) می کند:

<div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>

روشی جایگزین به همراه HTML معتبر:

<p class='leftTxt'><xmp><div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"> </span></p> </div>

چنانچه می‌خواهید کدهای HTML صفحه Valid یا معتبر باشند می‌توانید به جای پیشوند ng- از پیشوند data- -bg- استفاده نمایید.

عبارت‌ها AngularJS (expression)

عبارت‌های AngularJS داخل {{}} نوشته می شوند.

دستور ng- nit متغیرهای برنامه ی AngularJS را مقداردهی اولیه می کند:

<div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>

در کل، عبارت ها در angularJs اطلاعات را به المان های HTML مقید می‌سازند (منتقل می‌کنند) درست مشابه کاری که دستور ng-bind انجام می‌دهد.

<div ng-app=""> <p>Input something in the input box:</p> <p>Name: <input type="text" ng-model="name"></p> <p>{{name}}</p> </div>

برنامه‌های (application)AngularJS

ماژول‌های Angularjs برنامه‌های Angularjs را تعریف می‌کنند و کنترلر‌های Angularjs برنامه‌های Angularjs را مدیریت می‌کنند.

دستور ng-app اپلیکیشن مورد نظر را کنترل می‌کند و دستور ng-controller در حقیقت کنترلر را مشخص می‌کند.

<p>Try to change the names.</p> <div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"> Last Name: <input type="text" ng-model="lastName"> Full Name: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>

ماژول‌های AngularJS اپلیکیشن را تعریف می‌کنند:

Var app= = angular.module('myapp',[]);

کنترلر (controller) اپلیکیشن‌ها را مدیریت می‌کنند:

app.controller('myCtrl', function ($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; });

عبارت ها Expression / در AngularJS

AngularJS ng-bind داده‌ها رو به HTML مقید (bind) می‌کنند و در هر جایی که قرار دارند داده‌ها را جایگزین خود می‌سازند. عبارت‌های AngularJS بسیار شبیه به عبارت‌های جاوا

اسکریپت هستند بدین معنا که می‌توانند مقادیر نوشتاری (literal) ، عملگر (operator) ، متغیر دربر داشته باشند.

مثال : {{ 5 + 5 }} یا {{ firstName + " " + lastName }}.

<div ng-app> <p>My first expression: {{ 5 + 5 }}</p> </div>

حال اگر دستور ng-app را حذف کنید، HTML عبارت را بدون اینکه حل کند و همان‌گونه که هست نمایش می دهد:

<p>Without the ng-app directive, HTML will display the expression as it is, without solving it.</p> <div> <p>My first expression: {{ 5 + 5 }}</p> </div>

اعداد در AngularJS

اعداد AngularJS شبیه اعداد در زبان جاوا اسکریپت است:

<div ng-app="" ng-init="quantity=1;cost=5"> <p>Total in dollar: {{ quantity * cost }}</p> </div>

اکنون همین مثال را با استفاده از دستور ng-bind بکار می‌بریم:

<div ng-app="" ng-init="quantity=1;cost=5"> <p>Total in dollar: <span ng-bind="quantity * cost"></span></p> </div>

استفاده از دستور ng-init جهت مقداردهی اولیه‌ی متغیرها چندان رایج نیست. در مباحث بعدی به روش‌های دیگری برای مقداردهی اولیه خواهیم پرداخت.

رشته ها در AngularJS

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

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>The full name is: {{ firstName + " " + lastName }}</p> </div>

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

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>The full name is: <span ng-bind="firstName + ' ' + lastName"></span></p> </div>

اشیا در AngularJS

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

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>The name is {{ person.lastName }}</p> </div>

حال همان مثال را در زیر مشاهده می‌کنید که با دستور ng-bind نوشته شده است:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>The name is <span ng-bind="person.lastName"></span></p> </div>

آرایه‌ها در AngularJS

آرایه‌ها در جاوا اسکریپت و AngularJS یکی هستند:

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is {{ points[2] }}</p> </div>

حال همان مثال را با استفاده از دستور ng-bind می‌نویسیم:

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is <span ng-bind="points[2]"></span></p> </div>

مقایسه عبارات در Angularjs و JavaScript

درست مشابه عبارت‌ها در جاوااسکریپت، عبارت‌های Angularjs هم می‌تواند حامل مقادیر نوشتاری (literal) ، عملگرها (operator ها) و متغیرها باشد بر خلاف عبارت در جاوااسکریپت، عبارت‌ها Angularjs می‌توانند درون کدهای HTML درج گردند . عبارت Angularjs از دستورات شرطی، حلقه ها و استثنا‌ها (exceptionها) پشتیبانی نمی‌کند . بر خلاف آن عبارت در جاوااسکریپت از تمامی موارد نام برده پشتیبانی می‌کند. عبارت‌ها در جاوااسکریپت قابلیت پشتیبانی از فیلترها را ندارند در حالی که عبارت‌های Angularjs از فیلترها پشتیبانی می‌کنند .



نظرات کاربران



عبارت امنیتی : حاصل 1 × 3 می شود :
متن پیام :