آموزش AngularJS قسمت سوم کار با Directive ها در AngularJs
0 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>

دانلود

نویسنده حسین فتحی
گروه مطلب AngularJS
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۱ مرداد ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم