مقدمه کار با AngularJs

تبلیغات
کانال تلگرام فتولیا

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>
خودتان امتحان کنید

در کد بالا همانطور که می بینید فایل اصلی 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>
خودتان امتحان کنید

یا اگر valid بودن کدهای HTML برایتان اهمیت دارد می توانید از کد زیر به جای کد فوق استفاده کنید :

<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 بیشتر آشنا خواهید شد.

عبارت های Angularjs

عبارت ها (Expressions) در AngularJs داخل دابل آکولاد نوشته می شوند : {{ expression }}

در همین رابطه :   آموزش عبارات (Expression) در AngularJs

این بخش شبیه 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>
خودتان امتحان کنید

در کل عبارات در 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>
خودتان امتحان کنید

در ادامه سری آموزش ها با عبارات 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>
خودتان امتحان کنید

در کد بالا برنامه را بوسیله Module تعریف کردیم و در یک متغیر قرار دادیم

var app = angular.module('myApp', []);

سپس بوسیله Controller کارکرد آن را کنترل کردیم

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

تا اینجا با مقدمات AngularJs آشنا شدید . در مباحث آینده بیشتر در مورد ماژول و کنترلر صحبت خواهیم کرد

منبع

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in HTML 5
دانلود رایگان ۱۰ قالب واکنش گرای Bootstrap

خوشبختانه خیلی از توسعه دهندگان و طراحان قالب هستند که قالب های وب سایت زیبا و رایگانی را طراحی و...

Close