آموزش آنگولار جی اس برای طراحان

یک شروع خوب!

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

با این آموزش جایگذین من نشانتان خواهم داد که شما بع عنوان طراحان وب به آنگولار علاقه مند می شوید و خواهید دید که از این پس به کمک آن می توانیم وب سایت های تعاملی با دانش پایه جاوااسکریپت درست کنیم.

اگر شما کد زیر را درک می کنید وقتش هست دست به کار شوید!

foo = true

foo = !foo

foo = { 'bar': false }

bar = foo

نصب

خب بگذارید یک شروع هیجان انگیز را با آنگولار تجربه کنیم. نصب آنگولار خیلی راحت هست و فقط کافیه که با گذاشتن تگ

I can add: 1 + 2 = {{ 1+2 }}

آنگولار عبارت بین دو آکولاد باز و بسته را پردازش می کند.{{}}

I can add: 1 + 2 = 3

دمو زنده

توجه کنید که اگر ng-app را به تگ html اضافه نکنیم.فایل HTML ما کامپایل نخواهد شد و عبارت {{۱+۲}} ۳ نخواهد شد.

ng-show

اولین دارکتیوی که دوستش خواهید داشت ng-show هست.با این دایرکتیو شما به یک عنصر می گویید نمایش داده شود یا نه. اگر مقدارش true باشد عنصر را نمایش می دهد و در غیر این صورت (false) آن را پنهان می کند.

<!doctype html>
<html ng-app>
  <head><script src="angular.js"></script></head>
  <body>
  
    <p ng-show="true">This paragraph is visible.</p>
    <p ng-show="false">This paragraph is hidden.</p> 
  
  </body>
</html>

دمو زنده

ng-click

تنها ng-show بلا استفاده است.برای اضافه کردن تعامل به ng-click نیاز داریم.دایرکتیو ng-click را به عنصر (بیشتر دکمه ها) که می خواهید تعاملی شوند اضافه می کنیم.مقدار ng-click زمانی "اجرا" می شود که عنصر کلیک شده باشد.

Click Me count: {{ count }}

مقدار count هر بار با کلیک کردن افزایش می یابد.مقدار اولیه آن هم در ng-init برابر ۰ مقدار دهی شده است.

دمو زنده

ng-click + ng-show

ng-click , ng-show را با هم ترکیب کنید.با این کار چیز های تعاملی زیادی را می توانید درست کنید برای مثال:

ساخت دکمه توگل(toggle) (برای مثل دکمه فعال کردن و غیر فعال کردن کاری)

وقتی که بر روی دکمه کلیک می کنید مقدار display با مقدار true و flase تغییر می کند و متن Toggle Me! بسته به مقدار display نمایش داده یا پنهان می شود.

دمو زنده

مثال دیگر: کنترل اسلاید به صورت دستی:


<!doctype html>
<html ng-app>
  <head><script src="angular.js"></script></head>
  <body ng-init="index=0">
  <p>
     <a href="#" ng-click=" index=1 ">001</a> 
     <a href="#" ng-click=" index=2 ">002</a> 
     <a href="#" ng-click=" index=3 ">003</a> 
     <a href="#" ng-click=" index=4 ">004</a> 
   </p>
   <div ng-show=" index==1 "><img src="image1.jpg" /></div> 
   <div ng-show=" index==2 "><img src="image2.jpg" /></div> 
   <div ng-show=" index==3 "><img src="image3.jpg" /></div> 
   <div ng-show=" index==4 "><img src="image4.jpg" /></div>
  </body>
</html>

دمو زنده

ng-class

علاوه بر نمایش دادن و پنهان کردن عناصر آنگولار می تواند کلاس های CSS را در قبال تعامل کاربر با عنصر مورد نظر انجام دهد.

ng-class="{'strike': foo, 'bold': bar}"

زمانی که مقادیر foo,bar برابر true شوند کلاسهای strike و bold به عنصر مورد نظر داده می شوند برای مثال:

<!doctype html>
<html ng-app>
 <head><script src="angular.js"></script></head>
 <body>

 <p ng-class="{'strike': true, 'bold': false, 'red': 1, 'i': 0}">
    Map Syntax Example
 </p>
 
 </body>
</html>

ng-class + ng-click

می توان با این دو دایرکتیو یک دکمه بوت استرپ را هنگام فشردن کلاس active دهیم به این صورت:

Click Me

دقت کنید که استایل بوت استرپ استفاده کرده ایم.

دمو زنده

یا تب های بوت استرپ هنگام کلیک کردن روی آن فعال کنید.

<!doctype html>
<html ng-app>
  <head><script src="angular.js"></script></head>
  <body>

  <ul class="nav nav-tabs">
    <li ng-class="{active: i==1}" ng-click="i=1">
      <a href="#">Home</a>
    </li>
    <li ng-class="{active: i==2}" ng-click="i=2">
      <a href="#">Profile</a>
    </li>
    <li ng-class="{active: i==3}" ng-click="i=3">
      <a href="#">Messages</a>
    </li>
  </ul>
 
  </body>
</html>

دمو زنده

ما در این آموزش فقط با سه دایرکتیو ng-show,ng-click و ng-class کار کردیم.خب الان شما یک دید کلی از آنگولار گرفته اید! و خودتان می توانید بقیه راه ادامه بدهید با آن یک طراحی تعاملی را شروع کنید . خیلی آسونه این طور نیست؟

منابع یاد گیری بیشتر:

منابع فارسی خوب برای انگولار رو بنابه تجربه خودم پیشنهاد می کنم بخونید.

سایت بابون

سایت دات نت تیپس

اگر شما هم منبع مفیدی دارید با ما به اشتراک بگذارید.

منبع : +