نمایش نتایج 1 تا 15 از 15

نام تاپیک: آموزش فریم ورک AngularJS

  1. #1

    Arrow آموزش فریم ورک AngularJS

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

  2. #2

    Angry نقل قول: آموزش فریم ورک AngularJS

    برای شروع طبق روال همه آموزش های برنامه نویسی برنامه Hello World... رو با هم توسعه میدیم

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

  3. #3

    نقل قول: آموزش فریم ورک AngularJS

    salam edame nemidid?

  4. #4

    Lightbulb نقل قول: آموزش فریم ورک AngularJS

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

  5. #5
    کاربر تازه وارد
    تاریخ عضویت
    خرداد 1388
    محل زندگی
    شیراز
    پست
    40

    نقل قول: آموزش فریم ورک AngularJS

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

  6. #6

    Angry نقل قول: آموزش فریم ورک AngularJS

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

  7. #7
    کاربر تازه وارد
    تاریخ عضویت
    خرداد 1388
    محل زندگی
    شیراز
    پست
    40

    نقل قول: آموزش فریم ورک AngularJS

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

  8. #8

    نقل قول: آموزش فریم ورک AngularJS

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

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

  9. #9
    کاربر دائمی آواتار En_MK
    تاریخ عضویت
    آبان 1388
    محل زندگی
    تهران
    پست
    288

    نقل قول: آموزش فریم ورک AngularJS

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

  10. #10

    نقل قول: آموزش فریم ورک AngularJS

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

  11. #11

    نقل قول: آموزش فریم ورک AngularJS

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

    موفق باشید

  12. #12
    کاربر دائمی آواتار plague
    تاریخ عضویت
    آبان 1388
    محل زندگی
    اهواز
    پست
    2,343

    نقل قول: آموزش فریم ورک AngularJS

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

  13. #13
    کاربر تازه وارد
    تاریخ عضویت
    مهر 1388
    محل زندگی
    تهران
    پست
    35

    نقل قول: آموزش فریم ورک AngularJS

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

  14. #14

    نقل قول: آموزش فریم ورک AngularJS

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

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

  15. #15

    نقل قول: آموزش فریم ورک AngularJS

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




تاپیک های مشابه

  1. درخواست آموزش فریم ورک laravel
    نوشته شده توسط Tarragon در بخش PHP
    پاسخ: 16
    آخرین پست: چهارشنبه 02 بهمن 1392, 00:17 صبح
  2. آموزش: آموزش فریم ورک LESS برای CSS
    نوشته شده توسط Mr.Moghadam در بخش طراحی وب (Web Design)
    پاسخ: 3
    آخرین پست: سه شنبه 01 مرداد 1392, 15:28 عصر
  3. آموزش فریم ورک agavi
    نوشته شده توسط مهرداد معصومی در بخش PHP
    پاسخ: 4
    آخرین پست: پنج شنبه 19 اردیبهشت 1392, 23:36 عصر
  4. سوال: یک فریم ورک mvc خوب بهم معرفی کنید+آموزش
    نوشته شده توسط mahtab14 در بخش PHP
    پاسخ: 4
    آخرین پست: پنج شنبه 06 مهر 1391, 11:18 صبح
  5. آموزش: آموزش ساخت فریم ورک MVC
    نوشته شده توسط Mr.Moghadam در بخش PHP
    پاسخ: 7
    آخرین پست: سه شنبه 24 اسفند 1389, 13:31 عصر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •