تیشرت Laravel
خرید
اطلاعات بیشتر

مقدمه کار با 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 را حالا یاد بگیرید!

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

در کل عبارات در 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 آشنا شدید . در مباحث آینده بیشتر در مورد ماژول و کنترلر صحبت خواهیم کرد

در همین رابطه :   چگونه : داده را از php به javascript پاس دهیم؟

منبع

دسته بندی : JavaScript

پاسخ دهید

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

More in CSS
الحاق فونت دلخواه به صفحه با استفاده از css

سلام احتمالا در حال وبگردي سايت هايي را ديده ايد كه از فونت هاي عجيب و غريب استفاده مي كنند...

Close