ورود

View Full Version : آموزش: آموزش فریم ورک AngularJS


hamidgreedy
یک شنبه 08 دی 1392, 21:55 عصر
با سلام خدمت دوستان ...
تصمیم گرفتم آموزش های AngularJS رو بنویسم تا دوستان بهره ببرند توی این قسمت از آموزش توضیحاتی رو درباره این فریم ورک رو داریم و سپس با بخش های عملی و کد نویسی آشنا میشیم و در آخر یک پروژه برنامه نویسی رو به صورت کامل با Angular پیاده سازی می کنیم.

نکته : از این به بعد توی آموزش های به جای کلمه Angular از کلمه ang برای اشاره به فریم ورک استفاده می کنیم.
خوب اما توضیحات:
ang یک فریم ورک MVC هست که برای ساخت برنامه های وب تک صفحه ای (Single Page Application) که به اختصار SPA نامیده میشوند استفاده میشوند مکانیزم برنامه های SPA این است که در این این نوع برنامه ها :

هیچ گونه Reload صورت نمیگیرد و تمام عملیات در یک صفحه انجام می شود.
به هنگام تغییر موقعیت کاربر در برنامه ما URL تغییر میکند
اطلاعات دریافت شده از سرور در مرورگر کش میشود که کاربر حجم کمتری دریافت کند تا برنمه سریع تر کار کند.

از نمونه این برنامه ها میتوان به GMail اشاره کرد که در Gmail هیچ گونه Reload صورت نمیگیرد و URL در هنگام کلیک بوی ایمیل تغییر پیدا میکند و میتوان به طور مستقیم آن URL را وارد کرد و آن ایمیل مورد نظر رفت و همچنین صفحات و ایمیل های دیده شده در مروگر ذخیره میشوند تا مراجعات بعدی به آن ایمیل دیگر اطلاعات دریافت نشود.

خوب تا اینجا متوجه شدید با توجه به توضیحات داده شده Base اصلی Ang و برنامه های SPA و کارکرد آن ها با Ajax صورت می پذیرد و تمام کار ها در پشت زمینه با سرور انجام می شود.

Ang دارای چند ماژول برای کار با Server و دریافت اطلاعات از Server و پایگاه داده می باشد...
Ang ارتباط تنگاتنگی با HTML دارد و دارای Directive های است که با این Directive ها میتوان برنامه ها را با کد نویسی کمتر انجام داد...
Ang دارای سیستم اعتبار سنجی داده داخلی می باشد.
Ang دارای یک سیستم فیلترینگ داده میباشد.

برای اطلاعات بیشتر در مورد این فریم ورک به سایت اصلی آن www.angularJS.org (http://angularjs.org) مراجعه کنید...
hamidgreedy
جمعه 20 دی 1392, 15:02 عصر
برای شروع طبق روال همه آموزش های برنامه نویسی برنامه Hello World... رو با هم توسعه میدیم



<html ng-app>
<head>
<title></title>
</head>
<body>
<div ng-controller="mainCtrl">
<p>{{text}}</p>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
function mainCtrl ($scope) {
$scope.text = "Hello World...";
}
</script>
</body>
</html>


خوب از ابتدا توضیح میدم.

توی خط اول ما یک خصوصیت جدید به نام ng-App داریم این خصوصیت یکی از همون Directive هایی که توی آموزش قبل گفتم این Dirctive به انگولار میگه که کدوم قسمت از HTML DOM باید پردازش بشه که ما اینجا کل سند HTML در نظر گرفتیم

به چند خط پایین تر میاییم و یک DIV داریم که Directive که به اون اختصاص دادیم ng-controller هست که این Directive کنترلر که برای این بخش استفاده میشه رو معرفی میکنه.

اگر با کنترلر و مفهموم MVC آشنایی ندارید این مقاله (http://fa.wikipedia.org/wiki/%D9%85%D8%AF%D9%84-%D9%86%D9%85%D8%A7-%DA%A9%D9%86%D8%AA%D8%B1%D9%84%E2%80%8C%DA%AF%D8%B 1) رو مطالعه کنید

بعد از اون داخل DIV یک المان P داریم که داخل اون متن {{text}} نوشته شده که این {{}} آکولاد ها در انگولار یعنی Bind کردن Model و استخراج اطلاعات و نمایش در View هست که به این عمل Data Binding میگویند.که در اینجا ما Model Text اطلاعات اسخراج کردیم و در P نمایش دادیم .

حال میرسیم به بخش جاوااسکریپتی :

ابتدا فایل Angular.min.js رو از سایت انگولار دانلود کرده و طبق مثال در صفحه پیوست کنید
بعد از اون میبینید که یک Function ساختیم و اسم اون mainCtrl گذاشتیم که در اصل این Function همون Controller ماست.
بعد از اون به تابع آرگومان scope$ رو دادیم که این اسم نباید تغییر کنه.

بعد از اون توسط scope$ که قبلا به عنوان آرگومان دادیم Model به اسم text رو میسازیم و به اون مقدار Hello World میدیم.

خوب حالا برنامه رو اجرا کنید میبنید که مقدار Hello World رو توی صفحه مشاهده میکنید....


این بود Angular MVC

توی قسمت بعد با گرفتن مقدار یک Text Box آشنا میشیم و یاد میگیریم چجوری خروجی رو فیلتر کنیم تا مقادیر خاص نشون داده بشن...
amin.la
دوشنبه 19 اسفند 1392, 22:20 عصر
salam edame nemidid?
hamidgreedy
یک شنبه 03 فروردین 1393, 21:16 عصر
عذر خواهی به خاطر تاخیر خیلی خیل زیاد .
خوب بخش سوم رو شروع میکنیم همونطور که قبلا گفتیم این قسمت با گرفتن مقدار یک text box در ang کار میکنیم به قطعه کد زیر رو توی مروگر امتحان کنید.

<!doctype html><html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="text" ng-model="name">
<p>{{name}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</body>
</html>

خوب دیدید که با تغییر مقدار text box به طور خودکار متن داخل تگ P تغییر میکنه هیچ گونه کد جاوااسکرپیتی که شما بنویسید در کار نیست فقط Dirctive ها که به تگ های HTML اضافه کردید این رو میکنند.

اگر با مدل MVC آشنایی داشته باشید میدونید که M مخفف Model در این کلمات هست ما در این جا Directive به اسم ng-model دادیم که مقدار آن برابر با name هست که همین name رو اومدیم به روشی که توی قسمت قبل گفتیم به تگ P خودمون Bind یا انقیاد کردیم...

خیلی راحت.

حالا کمی پیچیده اش میکینیم کد زیر رو توی مروگر امتحان کنید ببنید چه اتفاقی میوفته.

<!doctype html><html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller="mainCtrl">
<input type="text" ng-model="name">
<p>{{name}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
function mainCtrl ($scope) {
$scope.name = 'Hamid Faraji';
}
</script>
</body>
</html>

خوب دید که حالا مدل ما یه مقدار اولیه داره که این مقدار اولیه از یک مدل واقعی که در کنترلر ما وجود داره که این مقدار رو از اون میگیره.
به تشریح کد میپردازیم.
اول اومدیم به Div خودمون یک کنترلر به نام mainCtrl متصل کردیم که دایو رو کنترل کنه.
بعد هم یک text box با مدل name که این مدل به مدل واقعی که در کنترلر والد خودش وجود داره متصل هست.
بعد هم به تگ P اون مدل رو Bind کردیم.

بعد یک کنترل با کلاس های POJO جاوااسکریپت ساختیم که یک مدل به scope اون دادیم و اسم اون رو name گذاشیتم.

خوب اینجوری کد ما مقدار text box رو کنترل میکنه مسئله جالب توی این بخش اینه که اگه شما این داده ها که به name متصل هست رو از طریق کد تغییر بدید به صورت Live مقدار text box و تگ p تغییر میکنه که این عمل به درد وقتی میخوره که داده از سرور دریافت میشه که بعدا به این مسئله میپردازیم که به این عمل Two Way Binding یا انقیاد دو طرفه میگویند.

توی قسمت بعد با ساختار های Object Model اشنا میشیم و طریقه ساخت یک لیست کارمندان رو یاد میگریم.
موفق باشید ایام به کام.
esh_computer110
سه شنبه 29 مهر 1393, 14:31 عصر
با عرض سلام خدمت هه دوستان
یک مقاله خوب و کامل برای آموزش AngularJS در وبلاگ زیر قرار دارد.
http://ably.ir/post/AngularJs-part1
elnazii
سه شنبه 13 آبان 1393, 20:26 عصر
چرا مداوم آموزش رو نمی برید جلو؟ هنوز به امکانات اصلی آنگولار وارد نشده ول کردید؟:افسرده:
esh_computer110
سه شنبه 12 اسفند 1393, 08:34 صبح
اگر جستجو کنید مثال زیاد است
DotNetTips.info
http://ably.ir/category/AngularJS/
و...
nazaninam
دوشنبه 20 اردیبهشت 1395, 16:17 عصر
مقالات کامل آموزشی به همراه ویدیئو آموزشی فارسی AngularJS در سایت بازگزاری شد :

http://delshad.ir/fa-ir/articles/F437gNtU-fI%3d/%D8%A2%D9%85%D9%88%D8%B2%D8%B4%20%DA%AF%D8%A7%D9%8 5%20%D8%A8%D9%87%20%DA%AF%D8%A7%D9%85%20AngularJS% 20%D9%82%D8%B3%D9%85%D8%AA%20%D8%A7%D9%88%D9%84%20-%20%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C%20%D8%A8%D 8%A7%20%20AngularJS%20%D9%88%20Directive%20%D9%87% D8%A7
En_MK
شنبه 29 آبان 1395, 07:22 صبح
سلام
برا من سواله اگر حداقل 10 جلسه اموزشی اماده نداریم چه اصراریه که اموزشی رو شروع کنیم
نه تنها اینجا بلکه توی 200 سایت دیگه یکی شروع کرده ویک دیتای static رو بایند کرده..خوشحالو خندون ول کرده...ایرانی بودنمونو همه جا باید نشون بدیم:لبخند::متفکر::ناراحت:
naghshzan
دوشنبه 11 اردیبهشت 1396, 21:07 عصر
من این سایت (http://neshanteam.ir)را با web form نوشتم
میونم بر اساس mvc , AngularJS بازسازیش کنم ؟
SCoder
دوشنبه 11 اردیبهشت 1396, 22:04 عصر
دوستان انگولار 4 هم اومده دیگه angularJs رو بیخایل شید و انگولار 2 یا همون angular رو یاد بگیرید(انگولار 1 رو angularJs و انگولار 2 و 4 رو angular میگن ) که دارای امکانات بیشتر و هم چنین سورس کد تمیز تری خواهید بود میتونید از سایت angular.io شروع کنید و یا به cli.angular.io مراجعه کنید و یکی از مزیت های خیلی خوب که اضافه شده tree shaking هستش که فایل bundle نهایی بسیار حجم کمتری خواهد داشت بنابریان برای کاربران با سرعت نت کمتر (کشور ما) تجربه استفاده از app بسیار بهبود میابد

موفق باشید
plague
دوشنبه 11 اردیبهشت 1396, 23:18 عصر
اینا که پدرمون رو در آوردن از بس سروصدا کردن بابت ورژن 2 که چقد تغییرات اساسی داده شده و ملت دنبال یدگیری ورژن جدید افتاده بودن
حالا تو کمتر از 1 سال باز ورژن جدید دادن بیرون !؟
pc1990
سه شنبه 12 اردیبهشت 1396, 14:16 عصر
سلام
شما در هر صفحه ای میتونید از انگولار استفاده کنید مشکلی نداره.
bormohsen
پنج شنبه 14 اردیبهشت 1396, 10:27 صبح
پیشنهاد می کنم این ویدئوی فارسی را ببینید به شکل خاص و جالبی آنگولار را آموزش می دهند:

http://codetejari.com/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-web-app-%D8%A8%D9%87-%D8%B3%D8%A7%D8%AF%DA%AF%DB%8C-winform-%D8%A8%D8%A7-angular/
partakuser
دوشنبه 17 خرداد 1400, 21:17 عصر
بهتره از انگولار در قسمت مدیریت سایت استفاده بشه یا در خروجی هم میشه این کار رو کرد، از نظر سئو مشکلی پیش نمیاد؟
من برای طراحی این سایت (https://partakteam.ir/website-design/isfahan)می خوام استفاده کنم و نمی دونم بهتره از Angular استفاده کنم یا حالت معمولی بهتره؟