ably ably برای هدایت شدن به سایت جدید اینجا کلیک کنید

آموزش برنامه نویسی

آموزش برنامه نویسی وب، اندروید، ویندوز , اسکیوال و...
Tell: 0912 097 5516
| Email: Hello@EduOnline.ir

دوره آموزشی AngularJS به زبان فارسی - بخش اول

بسم الله الرحمن الرحیم

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

  

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

 

  در بخش اول تنها موارد را به صورت مختصر معرفی می کنیم و سپس در بخش های بعدی هر یک را توضیح خواهیم داد.

در این دوره قصد داریم با AngularJS آشنا شویم. مثل تمامی دوره های دیگر مطالب را سعی خواهیم کرد بر پایه ی مثال و به صورت ساده و سریع بیان کنیم. انشالله که مفید واقع شود.

AngularJS یک  framework جاوا اسکریپت است، یک کتابخانه است که با JavaScript نوشته شده است. AngularJS مانند یک فایل توزیع شده است و شما می توانید با اضافه کردن یک تگ script در صفحه html خود از آن استفاده کنید.

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


نکته:

معمولا اکثر افراد فایل های Script خود را در بخش Head صفحه قرار می دهند که این کار خود باعث می شود لود شدن صفحه تا زمان لود تمامی script  ها به طول بیانجامد و با توجه به کند بودن سرویس های https در کشور ما، اگر script بخواهد از سرویس HTTPS استفاده کند کاربر عملا از باز شدن صفحه دلسرد خواهد شد. 


بهتر است تمامی فایل هایی که امکان دارند را در پایین تگ <body> قرار دهید، البته این کار را برای تمامی فایل های Script نمی توان انجام داد اما با انجام این کار سرعت لود صفحات بسیار افزایش خواهد یافت.

AngularJS Extends HTML

AngularJS تگ های HTML  را با ng-directives توسعه می دهد. تمامی رهنمود ها یا  directives های AngularJS با کلمه ng شروع می شوند.


ng-app

یک رهنمود (یا directive) است که یک برنامه AngularJS را تعریف می کند. در واقع محدوده فعالیت یک برنامه AngularJS را مشخص می کند.

<html ng-app>

</html>


AngularJS بر روی کل صفحه ما مدیریت خواهد داشت چون ng-app در بالاترین عنصر صفحه نوشته شده است.


ng-model

 یک رهنمود (یا directive) است که مقادیر کنترلهای HTML چون (input, select, textarea) را به داده های برنامه مقید (bind) می کند.


تعریف مقید سازی داده:

در تمامی صفحات وب، اگر بتوانیم کاری کنیم که قسمتی از صفحات وب با اشیاء متناظر جاوا اسکریپت نگاشت شوند و بتوانند با هم هماهنگ شوند و تغییرات هر کدام در دیگری اعمال شود به این کار مقید سازی داده  گفته می شود.


ng-bind

یک رهنمود (یا directive) است که داده های برنامه را به کنترل های HTML مقید می کند.

در واقع شما با ng-model اطلاعات را از روی صفحه نمایش اطلاعات (HTML) به منطق برنامه ارسال می کنید و با ng-bind اطلاعات را از بخش منطق برنامه به صفحه نمایش اطلاعات انتقال می دهید.


مثال

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

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

</body>
</html>


توضیح مثال
وقتی یک صفحه لود می شود AngularJS به صورت خودکار شروع به کار می کند.
رهنمود ng-app به AngularJS می گوید که برنامه ما در واقع از <div> شروع می شود (محدوده فعالیت ما را مشخص می کند).
رهنمود ng-model مقادیر کنترلهای HTML را به متغییرهای هم نام در برنامه مقید (بایند (Bind)( می کند. در این جا ما یک کنترل input داریم که به دلیل استفاده کردن از ng-model="name" به متغییری به نام name در بخش منطق ما مقید می شود.
رهنمود ng-bind تگ <p> به دلیل استفاده از ng-bind="name" به متغییر name که در بخش منطق وجود دارد (جلوتر خواهید دید) مقید می شود.
در حال حاضر بخش منطق و جایی که ما متغییر name را تعریف کردیم بررسی نمی کنیم، تا وارد جزئیات نشویم. اما به آن قسمت هم انشالله خواهیم پرداخت.

AngularJS Directives

همان طور که گفتیم تمامی رهنمودهای AngularJS با پیشوند ng- شروع می شوند.
ng-init
رهنمود ng-init برای مقدار دهی اولیه به کار می رود.
مثال

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

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

</div>

نکته:
یادتان باشد اگر می خواهید یک صفحه HTML5 معتبر (Valid) ایجاد کنید می توانید به جای استفاده از ng- از data-ng استفاده کنید.
مثال

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

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

</div>

AngularJS Expressions

عبارت های AngularJS درون یک جفت براکت نوشته می شوند {{ expression }}.
عبارت های AngularJS داده ها را به HTML مانند رهنمود ng-bind  مقید می کنند. در همان جایی که عبارت های AngularJS را می نویسید در همان جا نیز خروجی شما نمایش داده می شود.
مثال:

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

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

</body>
</html>

عبارت ها (expression) را در این دوره آموزشی به طور کامل بررسی خواهیم کرد.

AngularJS Controllers

AngularJS از معماری MVC استفاده می کند و AngularJS  برای کنترل برنامه از controller ها استفاده می کند.
رهنمود ng-controller برای تعریف controller ها درAngularJS  به کار می رود.
کدهای درون controller ها پس از لود شدن کامل صفحه اجرا می شوند.

مثال

 <div ng-app="" ng-controller="personController">

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>
function personController($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}
</script>

 یک مثال

<html ng-app>
<head>
<title>Hello World!</title>
<script src="/~/Scripts/angular.min.js"></script>
<script src="/~/Scripts/Controller.js"></script>
<head/>
<body>
<div ng-controller="GreetingController"> 
<span >{{greeting}}</span>
</div>
</body>
</html>

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

function GreetingController($scope){
    $scope.greeting = "Hello World!";
}

حال برنامه ر ا اجرا کنید

خود AngularJS ارتباط بین {{greeting}} و کد شما را به وجود می آورد.

در منطق برنامه و در GreetingController از پارامتری به نام scope$ استفاده کرده ایم. اما نگران نباشید به هیچ وجه نیازی نیست که شما بدانید این پارامتر از کجا آمده، چه موقع ایجاد شده و چه کسی آنرا ایجاد کرده است. AngularJS موقع فراخوانی GreetingController این شی را ایجاد کرده و به GreetingController پاس می دهد.

مشاهده تمامی آموزش های دوره AngularJS

نظرات (۶)

  • فرشید علی اکبری
  • سلام
    بسیار عالی می باشد و امیدوارم همانند برخی از آموزش ها که در برخی از سایتها مشاهده میشود، نصفه نیمه رها نشود.
    با تشکر از شما

    پاسخ:
    با عرض سلام و تشکر

    انشالله سعی می کنم در حد توانم تا پایان این آموزش را ادامه دهم اگر مطلب و یا بخش خاصی را مد نظر دارید که نیاز به آموزش دارد اطلاع دهید خوشحال خواهم شد در این جا موضوع مورد نظر را بررسی کنیم. تنها هدف ما در این جا رشد و ارائه مطالب علمی است لذا برای رسیدن به این هدف نیاز است شما نیز به سهم خود بنده را راهنمایی کنید.
    یاعلی
    باسلام و احترام
    خیلی عالیه دست شما درد نکنه
    پاسخ:
    با عرض سلام
    ممنون از لطف شما
    یاعلی
    با تشکر از آموزش مفید شما.
    در پناه حق
    پاسخ:
    با عرض سلام
    خواهش می کنم، من نیز از لطف شما متشکرم

    داداش دمتون گرم!خیلی کارتون درسته!

    امیدوارم پر ارژی و پر قدرت به کارتون ادامه بدید.
    خیلی خوب بود. اولین وبلاگ فارسی زبان بدردبخور  .مچکرم .
    پاسخ:
    با عرض سلام
    بنده هم از لطف شما متشکرم
    انشالله که همیشه موفق باشید
    سپاس
    ساده و قشنگ نوشتی
    پاسخ:
    با عرض سلام
    ممنون، انشالله که مطالب بتواند به شما کمک کند
    موفق باشید
    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    شما میتوانید از این تگهای html استفاده کنید:
    <b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
    تجدید کد امنیتی
    up
    ما را در گوگل محبوب کنید