0
آموزش AngularJS قسمت سوم کار با Directive ها در AngularJs
آموزش AngularJS قسمت سوم کار با Directive ها در AngularJs
در قسمت های قبلی نحوه استفاده و نصب AngularJS و همچنین Expression ها را توضیح دادیم. در این قسمت به مبحث Directive ها در AngularJs می پردازیم.
انواع Directive ها در AngularJs
- ng-app
- ng-bind
- ng-click
- ng-controller
- ng-disabled
- ng-hide
- ng-include
- ng-init
- ng-model
- ng-repeat
- ng-show
دایرکتیو ng-app
این دایرکتیو مشخص می کند که سایت ما یا صفحه در حال نمایش یک (SPA (Single Page Application است.
در مثال زیر ما تگ دیو را برابر با ng-app قرار دادیم.
ng-app کار خاصی انجام نمی دهم فقط به دیو مورد نظر یا مرورگر مشخص می کند که ما از فریم ورک AngularJS استفاده می کنیم.
دایرکتیو ng-model
این دایرکتیو روی داده های کار می کند و یک نام دریافت می کند و ما با این نام در AngularJS می توانیم به آن دسترسی داشته باشیم.
دایرکتیو ng-bind
از این دایرکتیو برای bind کردن (متصل کردن) منبع داده استفاده می شود. و یک نام دریافت می کند.
در مثال زیر زمانی که چیزی داخل input تایپ می شود همزمان در تگ p نمایش داده می شود.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
در مثال زیر که همانند مثال قبلی است با این تفاوت به جای ng-bind از اکسپرشن {{ name }} استفاده کردیم.
نکته:
توجه کنید که اکسپرشن را بین تگ باز و بسته p نوشتیم
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p>{{ name }}</p>
</div>
</body>
</html>
دایرکتیو ng-init
با استفاده از این دایرکتیو می توان مقدار دهی اولیه کرد.
در مثال زیر برای بعد از The name is کلمه hossein را اضافه می کند
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='hossein'">
<input type="text" ng-model="firstName" />
<p>The name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>
در مثال زیر که همانند مثال قبلی است با این تفاوت که دو input را با استفاده از ng-init مقدار دهی اولیه کردیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init='firstName="hossein";lastName="fathi"'>
<input type="text" ng-model="firstName" />
<input type="text" ng-model="lastName" />
<p>The name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>
در مثال زیر از اکسپرشن های AngularJS استفاده کردیم و دو مقدار نام و فامیل را با استفاده از کاراکتر + کنار هم قرار دادیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init='firstName="hossein";lastName="fathi"'>
<input type="text" ng-model="firstName" />
<input type="text" ng-model="lastName" />
<p>The name is <span>{{firstName+" "+lastName}}</span></p>
</div>
</body>
</html>
در صورتی که بخواهیم از دایرکتیو های AngularJS در HTML5 استفاده کنیم باید پشوند -data مانند مثال زیر به تمام اتربیوت ها اضافه کنیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<div data-ng-app="" data-ng-init='firstName="hossein"'>
<input type="text" data-ng-model="firstName" />
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
</body>
</html>
دایرکتیو ng-repeat
این دایرکتیو همانند دستور foreach عمل می کند.
در مثال زیر ابتدا توسط ng-init یک آرایه تعریف کردیم و سپس این آرایه را توسط ng-repeat نمایش دادیم.
نکته:
هنگام پیماش با ng-repeat به جای li هر تگ دیگری می توانید قرار دهید
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
آرایه ای از آبجکت ها
در مثال زیر تک تک عناصر هر آبجت را نمایش دادیم به این صورت که بعد از x با قرار دادن یک نقطه نام عنصر را نوشتیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="angular.min.js"></script>
</head>
<body>
<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>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال