تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

آموزش انگولار-مقدمه

انگولار یک فریم ورک جاوااسکریپت است. این فریم ورک می تواند به وسیله ی یک تگ <script> به یک صفحه ی html اضافه شود. 

انگولار خصوصیت های HTML را به وسیله ی دستورات(directives) توسعه می دهد و به وسیله ی عبارات(Expressions)، داده ها را به HTML تحویل می دهد. 


انگولار یک فریم ورک جاوا اسکریپت است

انگولار یک فریم ورک جاوااسکریپت است. درواقع انگولار یک کتابخانه است که به وسیله ی جاوااسکریپت نوشته شده است. 

انگولار در یک فایل جاوا اسکریپت ارائه شده است و می تواند با استفاده از یک تگ script به یک صفحه ی وب اضافه شود:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

انگولار HTML را توسعه می دهد

انگولار HTML را با استفاده از دستورات -ng توسعه می دهد. 

دستور ng-app یک اپلیکیشن انگولار را مشخص می کند. 

دستور ng-model ، مقدار کنترل های HTML از قبیل(input و select و textarea)  را به داده های اپلیکیشن منتقل می کند. 

دستور ng-bind داده های اپلیکیشن را به اشیاء بصری HTML پیوند می دهد. به عبارت دیگر باعث می شود داده ها به نمایش درآیند. 

مثالی از انگولار

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

توضیح مثال :

انگولار به هنگام لود شدن صفحه، به طور اتوماتیک شروع به کار می کند. 

دستور ng-app به انگولار می گوید که، عنصر <div>  مورد نظر، دارنده ی اپلیکیشن(application) انگولار است. 

دستور ng-model مقدار فیلد input را به متغیر اپلیکیشن name نسبت می دهد. 

دستور ng-bind مقدار innerHTML عنصر <p> را به متغیر اپلیکیشن name انتساب می دهد.(به عبارتی مقدار درون پاراگراف را برابر با متغیر name قرار می دهد).


دستورات انگولار

همان طور که قبلا مشاهده نمودید، دستورات انگولار درواقع همان خصوصیات HTML هستند به همراه پسوند ng .

دستور ng-init متغیر های اپلیکیشن انگولار را مقدار دهی اولیه می کند. 

مثال های انگولار

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>
خودتان امتحان کنید »

روشی دیگر به همراه HTML معتبر:

مثالی از انگولار

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
خودتان امتحان کنید »
Note

در صورتی که می خواهید صفحه ی HTML خود را معتبر سازید، می توانید به جای -ng از -data-ng استفاده نمایید.

در ادامه ی این آموزش ها، مطالب بیشتری را در مورد دستورات انگولار فرا خواهید گرفت. 


عبارات انگولار

یک عبارت انگولار، درون یک دابل آکولاد(جفت آکولاد) قرار می گیرد مانند: {{عبارت انگولار}}

هنگامی که عبارت مورد نظر نوشته شود، انگولار دقیقا داده ها را در خروجی نشان خواهد داد: 

مثالی از انگولار

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

عبارات انگولار مانند دستور ng-bind داده های انگولار را به HTML پیوند می دهند.(به عبارت دیگر، داده ها را به عناصر HTML اضافه می کنند).

مثالی از انگولار

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

در این آموزش ها، شما بعدا مطالب بیشتری را درباره ی عبارات انگولار فرا خواهید گرفت. 


اپلیکیشن های انگولار

ماژول های(modules) انگولار، درواقع اپلیکیشن های انگولار را تعریف می کنند. 

کنترلرهای(controllers) انگولار، اپلیکیشن های انگولار را کنترل می کنند. 

دستور ng-app اپلیکیشن مورد نظر را تعریف می کند و دستور ng-controller  در واقع کنترلر را مشخص می کند.

AngularJS Example

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

ماژول های(modules) انگولار در واقع اپلیکیشن ها را تعریف می کنند:

ماژول انگولار

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

کنترلرهای(controllers) انگولار، اپلیکیشن ها را کنترل می کنند:

کنترلر انگولار

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

در ادامه ی این آموزش ها، بیشتر با ماژول ها و کنترلرها آشنا خواهید شد. 

دیدگاه‌ها  

0 # انگولار در 30 روز 1396-10-23 20:22
سلام . ممنون از آموزش خوبتون . با توجه به اینکه از سایت w3schools ترجمه کردید ولی بازم دمتون گرم
واسه کسایی که زبانشون خوب نیست کمک خیلی بزرگی هست
امیدوارم تموم فصل های آموزشیشو اینجا اورده باشید که تو سایت خودتون همشو مطالعه کنیم .
بالاخره ترجمه متون آموزشی هم خودش خدمت بزرگی واسه پیشرفت هست
. نه فقط تو زمینه کامپیوتر بلکه تو سایر علوم هم این اتفاق میفته . خدا قوت
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # ازاده 1396-08-10 13:47
با سلام را در برخی از اموزش های انگولار از اموزش پذیرمیخواهند که node .j sویا n pmرا نصب کند ولی در این اموزش به ان اشاره ای نشده.ممکنه راهنمایی کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1396-08-10 17:23
سلام.
به نظر بنده، روش به کار برده شده در این مقاله بسیار ساده تر است. و فقط کافیه لینک انگولار به صفحه ی html اضافه شود. این آموزش طبق سایت w3schools است و روش استفاده از npm در سایت مذکور آورده نشده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # سحر19 1395-08-26 11:32
من یعه مشکلی دارم لطفا راهنماییم کنید!!!
توی ویژوال استودیو کد های خودتان امتحان کنید رو که میزنم فقط یکی از اونا ران میشه .
بعد اونی که ران میشه رو که پاک میکنم دوباره به همین موال فقط یکی دیگه از کد ها ران میشه
مشکل کجاست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1395-08-26 15:05
فکر کنم باید هر بار که کد جدیدی وارد می کنید دکمه ی Ctrl+shift+b رو بزنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Guest 1395-08-26 10:36
سلام و خسته نباشید بابت سایت پرمحتوا و عالیتون!
من هرچقدر سعی کردم دستور ng-bind رو ویژوال استودیو نمیشناسه و هیچ عکس العملی نمیده یعنی من حتا وقتی خودم نوشتم باز هم چیزی نمایش داده نشد مشکل چیست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-08-26 15:08
سلام. شاید انگولار رو به درستی لینک نکرده اید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # laleh 1394-11-27 10:13
با سلام

در صورتی که می خواهید صفحه ی HTML خود را معتبر سازید، می توانید به جای -ng از -data-ng استفاده نمایید.
منظور از معتبرسازی چی هست؟

ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-11-27 10:59
سلام .
هیچ تفاوتی بین نوشتن خصوصیات به صورت -ng و -data-ng نیست. به جز 1 مورد:
بعنوان مثال اگر خصوصیات را به صورت -ng بنویسید و کد خود را در یک اعتبار سنج اچ تی ام ال، قرار دهید. خواهید دید که به شما خطای اعتبار سنجی را نشان می دهد. اما با اضافه کردن پیشوند data این مشکل حل می شود.
منبع پاسخ: stackoverflow.com/questions/16589853/ng-app-vs-data-ng-app-what-is-the-difference
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی