# زبان های اسکریپتی > JavaScript و Framework های مبتنی بر آن > آموزش: آموزش فریم ورک AngularJS

## hamidgreedy

با سلام خدمت دوستان ...
تصمیم گرفتم آموزش های 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 مراجعه کنید...

----------


## hamidgreedy

برای شروع طبق روال همه آموزش های برنامه نویسی برنامه 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 آشنایی ندارید این مقاله  رو مطالعه کنید

بعد از اون داخل 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

salam edame nemidid?

----------


## hamidgreedy

عذر خواهی به خاطر تاخیر خیلی خیل زیاد .
خوب بخش سوم رو شروع میکنیم همونطور که قبلا گفتیم این قسمت با گرفتن مقدار یک 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

با عرض سلام خدمت هه دوستان 
یک مقاله خوب و کامل برای آموزش AngularJS در وبلاگ زیر قرار دارد. 
http://ably.ir/post/AngularJs-part1

----------


## elnazii

چرا مداوم آموزش رو نمی برید جلو؟ هنوز به امکانات اصلی آنگولار وارد نشده ول کردید؟ :افسرده:

----------


## esh_computer110

اگر جستجو کنید مثال زیاد است
DotNetTips.info
http://ably.ir/category/AngularJS/
و...

----------


## nazaninam

مقالات کامل آموزشی به همراه ویدیئو آموزشی فارسی AngularJS در سایت بازگزاری شد :

http://delshad.ir/fa-ir/articles/F43...20%D9%87%D8%A7

----------


## En_MK

سلام
برا من سواله اگر حداقل 10 جلسه اموزشی اماده نداریم چه اصراریه که اموزشی رو شروع کنیم
نه تنها اینجا بلکه توی  200 سایت دیگه یکی شروع کرده ویک دیتای static رو بایند کرده..خوشحالو خندون ول کرده...ایرانی بودنمونو همه جا باید نشون بدیم :لبخند گشاده!:  :متفکر:  :ناراحت:

----------


## naghshzan

من این سایت را با web form نوشتم 
میونم بر اساس mvc , AngularJS بازسازیش کنم ؟

----------


## SCoder

دوستان انگولار 4 هم اومده دیگه angularJs رو بیخایل شید و انگولار 2 یا همون angular رو یاد بگیرید(انگولار 1 رو angularJs و انگولار 2 و 4 رو  angular میگن )  که دارای امکانات بیشتر و هم چنین سورس کد تمیز تری خواهید بود میتونید از سایت angular.io شروع کنید و یا به cli.angular.io مراجعه کنید و یکی از مزیت های خیلی خوب که اضافه شده tree shaking هستش که فایل bundle نهایی بسیار حجم کمتری خواهد داشت بنابریان برای کاربران با سرعت نت کمتر (کشور ما) تجربه استفاده از app بسیار بهبود میابد 

موفق باشید

----------


## plague

اینا که پدرمون رو در آوردن از بس سروصدا کردن بابت ورژن 2 که چقد تغییرات اساسی داده شده و ملت دنبال یدگیری ورژن جدید افتاده بودن 
حالا تو کمتر از 1 سال باز ورژن جدید دادن بیرون !؟

----------


## pc1990

سلام 
شما در هر صفحه ای میتونید از انگولار استفاده کنید مشکلی نداره.

----------


## bormohsen

پیشنهاد می کنم این ویدئوی فارسی را ببینید به شکل خاص و جالبی آنگولار را آموزش می دهند:

http://codetejari.com/%D8%B7%D8%B1%D...D8%A7-angular/

----------


## partakuser

بهتره از انگولار در قسمت مدیریت سایت استفاده بشه یا در خروجی هم میشه این کار رو کرد، از نظر سئو مشکلی پیش نمیاد؟
 من برای طراحی این سایت می خوام استفاده کنم و نمی دونم بهتره از Angular استفاده کنم یا حالت معمولی بهتره؟

----------

