دوره آموزشی 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
دوره آموزش 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
حسین
سپاس
ساده و قشنگ نوشتی
اسماعیلشیدایی
با عرض سلام
ممنون، انشالله که مطالب بتواند به شما کمک کند
موفق باشید
nahal
خیلی خوب بود. اولین وبلاگ فارسی زبان بدردبخور .مچکرم .
اسماعیلشیدایی
با عرض سلام
بنده هم از لطف شما متشکرم
انشالله که همیشه موفق باشید
کوروش
داداش دمتون گرم!خیلی کارتون درسته!
امیدوارم پر ارژی و پر قدرت به کارتون ادامه بدید.
شیرین
با تشکر از آموزش مفید شما.
اسماعیلشیدایی
با عرض سلام
خواهش می کنم، من نیز از لطف شما متشکرم
افسانه
باسلام و احترام
خیلی عالیه دست شما درد نکنه
اسماعیلشیدایی
با عرض سلام
ممنون از لطف شما
یاعلی
فرشید علی اکبری
سلام
اسماعیلشیدایی
با عرض سلام و تشکر
انشالله سعی می کنم در حد توانم تا پایان این آموزش را ادامه دهم اگر مطلب و یا بخش خاصی را مد نظر دارید که نیاز به آموزش دارد اطلاع دهید خوشحال خواهم شد در این جا موضوع مورد نظر را بررسی کنیم. تنها هدف ما در این جا رشد و ارائه مطالب علمی است لذا برای رسیدن به این هدف نیاز است شما نیز به سهم خود بنده را راهنمایی کنید.
یاعلی
صفایی
سلام لطفا در مورد پیاده سازی masterpage در angularjs نیز توضیح دهید . تشکر