آموزش گام به گام AngularJS قسمت اول : آشنایی با AngularJS و Directive ها

بازدید کنندگان : 3450 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS
 
AngularJS چیست ؟ 
 
برخلاف jQuery که یک کتابخانه برای سهولت کار با جاواسکریپت است، انگولار یک FrameWork جهت توسعه HTML بوده که توسط Google عرضه شده است ، این فریم ورک برای ساخت سایت ها تک صفحه ای از طریق 
معماری MVC و MVVM بسیار مناسب می باشد . 
 
انگولار دارای یک سری Directive بوده که توسعه و کار HTML را آسان می کند ، همچنین شما قادر هستید Directive های کاملا شخصی سازی شده تولید نمایید و به عنوان کنترل یا کامپاننت از آن ها استفاده کنید . اغلب کامپاننت های آماده انگولاری نیز از طریق همین Directive ها تولید میشوند .
 
Directive های پیشفرض خود انگولار با ng- شروع شده و هریک وظیفه خاصی را برعهده دارد 
 
برخی از Directive های معروف و پرکاربرد AngularJS عبارتند از : 
 
 
ng-app 
ng-init 
ng-model 
ng-bind 
 
ng-repeat 
ng-list 
ng-inclue 
 
ng-if 
ng-show 
ng-hide 
 
ng-click 
ng-mouseover 
 
ng-blur
ng-change 
 
 
برای شروع یک پروژه خیلی ساده با انگولار ایجاد می کنیم و با چند ng در این مثال آشنا میشویم : 
یک صفحه HTML خیلی ساده که دارای یک input از نوع text به همراه یک span که قرار است اطلاعات داخل input را نمایش دهد را فرض نمایید : 
<html>

<body>

<p>Name:  <input type="text"></p>

<span></span>

</body>

</html>
در قدم اول کتابخانه جاوا اسکریپت مربوط به AngularJS را به تگ head اضافه می کنیم :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

بنده نسخه 1.4.8 را کتابخانه گوگل به پروژه اضافه کردم شما میتوانید آخرین نسخه را از سایت رسمی Angularjs.Org دانلود کرده و به پروژه اضافه نمایید

 

برای فعال کردن Angular در این صفحه ng-app را به یکی از المان های صفحه اضافه میکنیم ، دقت نمایید که انگولار فقط درون المانی که ng-app وجود دارد فعال خواهد بود به عنوان مثال اگر به تگ body یا html  صفحه اضافه کنید در کل صفحه و اگر در یک div خاص اضافه کنید فقط درون آن فعال خواهد شد

سپس از طریق ng-model المان input را به یک مدل تبدیل می کنیم و المان span را از طریق ng-bind به این مدل بایند میکنیم ، منظور از این جمله این است که هر اطلاعاتی داخل input نوشته شود عینا داخل span نمایش داده می شود :

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head> 
<body ng-app=""> 
  <p>Name:  <input type="text" ng-model="name"></p> 
  <span ng-bind="name"></span> 
</body> 
</html>

همانطور که ملاحظه می کنید input به span بایند شده است

اگر بخواهیم یک مقدار اولیه در هنگام RunTime نیز به آن اضافه کنیم از ng-init استفاده می کنیم :

<body ng-app="" ng-init="name='Please enter your name...'">
همانطور که ملاحظه می کنید name در ng-init مقدار دهی شده است ، به دلیل اینکه مقدار یک رشته است داخل ' ' قرار 
گرفته است . 
 
اکنون میخواهیم هنگامی که روی input کلیک شد مقدار حذف شود ، کافیست در ng-click مقدار name را خالی کنیم : 
ng-click="name=''"

نتیجه نهایی را ملاحظه کنید :



در مقاله بعد با Controller ها و Binding توسط ng-repeat آشنا خواهیم شد

منابع
:

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