نقل قول: آموزش فریم ورک 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 آشنا میشیم و یاد میگیریم چجوری خروجی رو فیلتر کنیم تا مقادیر خاص نشون داده بشن...
نقل قول: آموزش فریم ورک AngularJS
نقل قول: آموزش فریم ورک 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 اشنا میشیم و طریقه ساخت یک لیست کارمندان رو یاد میگریم.
موفق باشید ایام به کام.
نقل قول: آموزش فریم ورک AngularJS
با عرض سلام خدمت هه دوستان
یک مقاله خوب و کامل برای آموزش AngularJS در وبلاگ زیر قرار دارد.
http://ably.ir/post/AngularJs-part1
نقل قول: آموزش فریم ورک AngularJS
چرا مداوم آموزش رو نمی برید جلو؟ هنوز به امکانات اصلی آنگولار وارد نشده ول کردید؟:افسرده:
نقل قول: آموزش فریم ورک AngularJS
اگر جستجو کنید مثال زیاد است
DotNetTips.info
http://ably.ir/category/AngularJS/
و...
نقل قول: آموزش فریم ورک AngularJS
مقالات کامل آموزشی به همراه ویدیئو آموزشی فارسی AngularJS در سایت بازگزاری شد :
http://delshad.ir/fa-ir/articles/F43...20%D9%87%D8%A7
نقل قول: آموزش فریم ورک AngularJS
سلام
برا من سواله اگر حداقل 10 جلسه اموزشی اماده نداریم چه اصراریه که اموزشی رو شروع کنیم
نه تنها اینجا بلکه توی 200 سایت دیگه یکی شروع کرده ویک دیتای static رو بایند کرده..خوشحالو خندون ول کرده...ایرانی بودنمونو همه جا باید نشون بدیم:لبخند::متفکر::ناراحت:
نقل قول: آموزش فریم ورک AngularJS
من این سایت را با web form نوشتم
میونم بر اساس mvc , AngularJS بازسازیش کنم ؟
نقل قول: آموزش فریم ورک AngularJS
دوستان انگولار 4 هم اومده دیگه angularJs رو بیخایل شید و انگولار 2 یا همون angular رو یاد بگیرید(انگولار 1 رو angularJs و انگولار 2 و 4 رو angular میگن ) که دارای امکانات بیشتر و هم چنین سورس کد تمیز تری خواهید بود میتونید از سایت angular.io شروع کنید و یا به cli.angular.io مراجعه کنید و یکی از مزیت های خیلی خوب که اضافه شده tree shaking هستش که فایل bundle نهایی بسیار حجم کمتری خواهد داشت بنابریان برای کاربران با سرعت نت کمتر (کشور ما) تجربه استفاده از app بسیار بهبود میابد
موفق باشید
نقل قول: آموزش فریم ورک AngularJS
اینا که پدرمون رو در آوردن از بس سروصدا کردن بابت ورژن 2 که چقد تغییرات اساسی داده شده و ملت دنبال یدگیری ورژن جدید افتاده بودن
حالا تو کمتر از 1 سال باز ورژن جدید دادن بیرون !؟
نقل قول: آموزش فریم ورک AngularJS
سلام
شما در هر صفحه ای میتونید از انگولار استفاده کنید مشکلی نداره.
نقل قول: آموزش فریم ورک AngularJS
پیشنهاد می کنم این ویدئوی فارسی را ببینید به شکل خاص و جالبی آنگولار را آموزش می دهند:
http://codetejari.com/%D8%B7%D8%B1%D...D8%A7-angular/
نقل قول: آموزش فریم ورک AngularJS
بهتره از انگولار در قسمت مدیریت سایت استفاده بشه یا در خروجی هم میشه این کار رو کرد، از نظر سئو مشکلی پیش نمیاد؟
من برای طراحی این سایت می خوام استفاده کنم و نمی دونم بهتره از Angular استفاده کنم یا حالت معمولی بهتره؟
