دوره آموزشی 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
یک رهنمود برای مقدار دهی اولیه به داده های برنامه می باشد.
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
نظرات (۱)
