با AngularJs یک فریم ورک جاوااسکریپت است و به صورت یک فایل .js ارائه می شود و به وسیله تگ <script> می توان آن را به صفحه الحاق کرد.
اضافه کردن AngularJs به صفحه
برای اضافه کردن فایل اصلی AngularJs کافیست کد زیر را در بخش <head> سایت قرار دهید :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
توسعه قابلیت های HTML
کار اصلی فریم ورک AngularJs توسعه و بست دادن قابلیت های ذاتی HTML است . این کار به وسیله ng-دستور مورد نظر انجام می گیرد.
- دستور
ng-appیک اپلیکیشن وب را تعریف می کند - دستور
ng-modelمقادیر ورودی های HTML مثل (Input,Textarea,Select) را به برنامه می رساند - دستور
ng-bindداده های اپلیکیشن را به عناصر HTML می رساند (Bind)
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]
در کد بالا همانطور که می بینید فایل اصلی AngularJs در بالای صفحه اضافه شده است و شروع به کار کرده است.
سپس توسط دستور ng-app به AngularJs گفتیم که تگ <div> صاحب اپلیکیشن Angularjs است.
بعد از آن با دستور ng-model مقدار فیلد input را به متغیر اپلیکیشن “name” وصل کردیم.
در انتها با دستور ng-bind کاری کردیم که متغیر برنامه name به innerHtml تگ <p> متصل شود .
دستورات AngularJS
همانطور که در مثال بالا دیدید ، دستورات AngularJs در واقع خصیصه (Attribute) های HTML با پیشوند ng هستند.
برای مثال دستور ng-init ، متغیرهای برنامه را ایجاد می کند :
<div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_directives” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]
یا اگر valid بودن کدهای HTML برایتان اهمیت دارد می توانید از کد زیر به جای کد فوق استفاده کنید :
<div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"></span></p> </div>
[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_directives_html” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]
[stag_alert style=”yellow”]اگر می خواهید کدهای HTML صفحه Valid باشند می توانید به جای پیشوند ng- از پیشوند data-bg- استفاده کنید.[/stag_alert]
در ادامه سری آموزش ها با دستورات AngularJs بیشتر آشنا خواهید شد.
عبارت های Angularjs
عبارت ها (Expressions) در AngularJs داخل دابل آکولاد نوشته می شوند : {{ expression }}
این بخش شبیه Template Engine هایی است که در فریم ورک های PHP مورد استفاده قرار می گیرند تا نحو برنامه را از بخش نمایش آن جدا کنند . AngularJS داده ها را دقیقا جایی نمایش می دهد که عبارت نوشته شده باشد .
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_expression” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]
در کل عبارات در angularJs داده ها را به عناصر HTML منتقل می کنند مثل کاری که دستور ng-bind انجام می دهد.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_bind” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]
در ادامه سری آموزش ها با عبارات AngularJS بیشتر آشنا خواهید شد.
اپلیکیشن های AngularJs
ماژول های Angularjs برنامه های Angularjs را تعریف می کنند و کنترلر های Angularjs برنامه های Angularjs را کنترل می کنند.
همانطور که در بالا نیز اشاره شد دستور ng-app نیز یک برنامه را تعریف می کند و دستور ng-controller کنترلر آن را مشخص می کند. به مثال زیر دقت کنید :
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>[stag_button url=”http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_controller” style=”blue” size=”medium” type=”normal” target=”_blank” icon=”angle-double-left” icon_order=”after”]خودتان امتحان کنید[/stag_button]
در کد بالا برنامه را بوسیله Module تعریف کردیم و در یک متغیر قرار دادیم
var app = angular.module('myApp', []);سپس بوسیله Controller کارکرد آن را کنترل کردیم
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});تا اینجا با مقدمات AngularJs آشنا شدید . در مباحث آینده بیشتر در مورد ماژول و کنترلر صحبت خواهیم کرد
