دوره آموزشی AngularJS به زبان فارسی - بخش سوم

نویسنده اسماعیل شیدایی

سه شنبه 22 مهر 1393 - 22:15

دوره آموزشی AngularJS به زبان فارسی - بخش سوم

بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش سوم

AngularJS Directives

همان طور که گفتیم تمامی رهنمودهای AngularJS با پیشوند ng- شروع می شوند.

ng-app

یک رهنمود (یا directive) است که یک برنامه AngularJS را تعریف می کند. در واقع محدوده فعالیت یک برنامه AngularJS را مشخص می کند.

<html ng-app>
….
</html>

AngularJS بر روی کل صفحه ما مدیریت خواهد داشت چون ng-app در بالاترین عنصر صفحه نوشته شده است.

ng-init

یک رهنمود برای مقدار دهی اولیه به داده های برنامه می باشد.

بسم الله الرحمن الرحیم

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش سوم

AngularJS Directives

همان طور که گفتیم تمامی رهنمودهای AngularJS با پیشوند ng- شروع می شوند.

ng-app

یک رهنمود (یا directive) است که یک برنامه AngularJS را تعریف می کند. در واقع محدوده فعالیت یک برنامه AngularJS را مشخص می کند.

<html ng-app>
….
</html>

AngularJS بر روی کل صفحه ما مدیریت خواهد داشت چون ng-app در بالاترین عنصر صفحه نوشته شده است.

ng-init

یک رهنمود برای مقدار دهی اولیه به داده های برنامه می باشد.

ng-model

یک رهنمود برای مقید کردن مقادیر کنترل های HTML مانند (input, select, textarea) به داده های و متغییر های تعریف شده در برنامه است.

مثال

 <div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

Data Binding

در مثال بالا عبارت {{ firstName }} یک عبارت AngularJS است که مقید (Bind) شده است. مقید سازی داده ها در AngularJS باعث همزمانی (synchronize) عبارت های AngularJS با داده های AngularJS می شود. اگر بخواهیم این خط را به صورت ساده تر توضیح دهم به این صورت می شود آن را بیان نمود که مقید سازی داده (Bind) باعث می شود اگر در صفحه HTML شما تغییری در داده ها ایجاد کنید مقدار تغییر داده شده در بخش منطق برنامه نیز اعمال شود و برعکس آن ساده است.
در این جا {{ firstName }} به وسیله ng-model="firstName" همگام سازی شده است.
در مثال زیر دو فیلد مشخص شده با دو رهنمود ng-model همگام سازی شده است.

 <div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number"    ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

تعریف مقید سازی داده

در تمامی صفحات وب، اگر بتوانیم کاری کنیم که قسمتی از صفحات وب با اشیاء متناظر جاوا اسکریپت نگاشت شوند و بتوانند با هم هماهنگ شوند و تغییرات هر کدام در دیگری اعمال شود به این کار مقید سازی داده گفته می شود.
مثال:

<html ng-app>
<head>
 <title>Hello World!</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
 <script src="/~/Scripts/Controller.js"></script>
 </head>
 <body>
 <div ng-controller="NameController">
 <span>{{name}}</span>
 <input ng-model="name" />
 </div>
 </body>
</html>

توضیح مثال
وقتی یک صفحه لود می شود AngularJS به صورت خودکار شروع به کار می کند.
رهنمود ng-app به AngularJS می گوید که برنامه ما در واقع از <div> شروع می شود (محدوده فعالیت ما را مشخص می کند).
یک صفحه HTML می تواند شامل چندین برنامه Angular باشد که بر روی عنصرهای متفاوت (Element) کار می کند.

رهنمود ng-model مقادیر کنترلهای HTML را به متغییرهای هم نام در برنامه مقید (بایند (Bind)( می کند. در این جا ما یک کنترل input داریم که به دلیل استفاده کردن از ng-model="name" به متغییری به نام name در بخش منطق ما مقید می شود.
رهنمود ng-bind تگ <p> به دلیل استفاده از ng-bind="name" به متغییر name که در بخش منطق وجود دارد (جلوتر خواهید دید) مقید می شود.
در حال حاضر بخش منطق و جایی که ما متغییر name را تعریف کردیم بررسی نمی کنیم، تا وارد جزئیات نشویم. اما به آن قسمت هم انشالله خواهیم پرداخت.

<html ng-app>
<head>
<title>Hello World!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="/~/Scripts/Controller.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<span>{{greeting}}</span>
<input ng-model="name" />
</div>
</body>
</html>

ng-bind

یک رهنمود (یا directive) است که داده های برنامه را به کنترل های HTML مقید می کند.

در واقع شما با ng-model اطلاعات را از روی صفحه نمایش اطلاعات (HTML) به منطق برنامه ارسال می کنید و با ng-bind
اطلاعات را از بخش منطق برنامه به صفحه نمایش اطلاعات انتقال می دهید.
مثال

<span ng-bind="greeting" ></span>

Repeating HTML Elements

رهنمود ng-repeat می تواند عنصرهای HTML را تکرار کند.

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
<div>

استفاده از ng-repeat در یک آرایه از اشیا

 <div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

AngularJS برای کار با دیتابیس ها و انجام عملیات های CRUD بسیار جذاب و مفید خواهد بود. تصور کنید مثال بالا رکورد هایی از یک جدول باشد.

رهنمود ng-app

رهنمود ng-app عنصر اصلی و ریشه یک برنامه AngularJS را مشخص می کند.
رهنود ng-app به صورت خودکار auto-bootstrap (automatically initialize) خواهد شد وقتی که صفحه شما لود شود.
در مقاله های بعدی با نحوه مقدار دهی ng-app آشنا خواهید شد و فراخواهید گرفت چطور برنامه خود به ماژول های متفاوت متصل کنید ng-app="myModule")).

رهنمود ng-init

رهنمود ng-init برای مقدار دهی اولیه به کار می رود.
معمولا توسعه دهندگان خیلی از رهنمود ng-init استفاده نمی کنند، بهتر است مقدار دهی اولیه درون Controller ها که در بخش های بعدی به آن خواهیم پرداخت، انجام شود.

رهنمود ng-model

رهنمود ng-model مقادیر کنترلهای HTML را به داده های برنامه مقید می کند.
رهنمود ng-model همچنین می تواند
نوع اعتبارسنجی را برای داده های برنامه (ایمیل، اعداد، اجباری بودن) فراهم کند.
وضعیت داده های برنامه را مشخص کند (invalid, dirty, touched, error)
کلاس های CSS را برای عناصر HTML فراهم کند.
عناصر HTML را به فرم های HTML مقید کند.

رهنمود ng-repeat

رهنمود ng-repeat عناصر HTML مورد نیاز را برای هر یک از عناصر موجود در بخش داده ها (رکوردها یا آرایه ها) ایجاد می کند.

مثال

<html ng-app>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

 <title>Product AngularJS</title>
 <style type="text/css">
 span:nth-child(2n+1){
 margin-left:20px;
 }
 </style>
</head>
<body>
 <div ng-controller="ProductController">
 <div ng-repeat="product in ProductList">
 <span>Title:</span><span ng-bind="product.Title"></span>
 <span>Code:</span><span ng-bind="product.Code"></span>
 <span>Description:</span><span ng-bind="product.Description"></span>
 </div>
 </div>
<script>

function ProductController($scope) {
 $scope.ProductList = [
 {Title:"AngularJs",Code:"1",Description:"The best framework for sync project, teach by Esmaeil Sheidaei"},
 {Title:"SignalR",Code:"2",Description:"A framework for sync project with repository, teach by Esmaeil Sheidaei"},
 {Title:"Knouckout",Code:"3",Description:"The knouckout is a framework for binding elements, teach by Esmaeil Sheidaei"}
 ]
}

</script>
</body>
</html>

توضیح مثال

یک ارایه از مصحولات ایجاد کردیم که این ارایه سه عنصر دارد و هر عنصر سه پراپرتی عنوان، کد و توضیحات دارد، آرایه خود را درون scope$ قرار دادیم و سپس در بخش HTML خود این آرایه را با استفاده از دستور ng-repeat که مشابه foreach سی شارپ عمل می کند خوانده ایم.

مشاهده تمامی آموزش های دوره AngularJS

AngularJS Controllers ها در AngularJS Directives ها در AngularJS آموزش angular آموزش angularjs آموزش AngularJS به زبان فارسی آموزش رایگان AngularJS به زبان فارسی دوره آموزشی AngularJS به زبان فارسی دوره رایگان آموزشی AngularJS به زبان فارسی معرفی AngularJS

نظرات

صدرا

دو شنبه 11 دی 1278 - 0:00

سلام
آموزشاتون عالیه
یه پیشنهاد جسارتا
بنظرمن اگر اصطلاحات اصلی باشند (انگلیسی) کیفیت یادگیری رو بالا میبره
برای مثال مقید کردن حرفه ای نیست
بنظرم باید طوری باشه که بعد از خواندن این آموزشها براحتی بشه رفرنس رو مطالعه کرد
در هر صورت من استفاده کردم و مفید بود
موفق باشید

دوره آموزشی AngularJS به زبان فارسی - بخش سوم

صفحه اصلی / ABLY مقالات و مطالب مجموعه / دوره آموزشی AngularJS به زبان فارسی - بخش سوم

دوره آموزشی AngularJS به زبان فارسی - بخش سوم

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

AngularJS Directives

ng-app

ng-init

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

AngularJS Directives

ng-app

ng-init

ng-model

Data Binding

تعریف مقید سازی داده

ng-bind

Repeating HTML Elements

رهنمود ng-app

رهنمود ng-init

رهنمود ng-model

رهنمود ng-repeat

مشاهده تمامی آموزش های دوره AngularJS

نظرات

صدرا

نظرات یا سوالات خودرا با ما درمیان بگذارید cancel reply

دسترسی سریع

تماس با ما

تماس با ما

0912 097 5516 :شماره تماس

0713 625 1757 :شماره تماس