برخلاف jQuery که یک کتابخانه برای سهولت کار با جاواسکریپت است، انگولار یک FrameWork جهت توسعه HTML بوده که توسط Google عرضه شده است ، این فریم ورک برای ساخت سایت ها تک صفحه ای از طریق
معماری MVC و MVVM بسیار مناسب می باشد .
انگولار دارای یک سری Directive بوده که توسعه و کار HTML را آسان می کند ، همچنین شما قادر هستید Directive های کاملا شخصی سازی شده تولید نمایید و به عنوان کنترل یا کامپاننت از آن ها استفاده کنید . اغلب کامپاننت های آماده انگولاری نیز از طریق همین Directive ها تولید میشوند .
Directive های پیشفرض خود انگولار با ng- شروع شده و هریک وظیفه خاصی را برعهده دارد
برخی از Directive های معروف و پرکاربرد AngularJS عبارتند از :
برای شروع یک پروژه خیلی ساده با انگولار ایجاد می کنیم و با چند 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 مقدار دهی شده است ، به دلیل اینکه مقدار یک رشته است داخل ' ' قرار