یادگیری AngularJS با مثال - ساخت نوار منو

این احتمالا وجود دارد که درباره فریم ورک AngularJS در اطراف شنیده باشید – فریم ورک جذابی که توسط گوگل توسعه داده می شود که می تواند ایده های شما را در رابطه با ساخت برنامه های مدرن وب تغییر دهد. چندین پست درباره این فریم ورک در بلاگ نوشته شده است ولی هنوز چیزی که یک توسعه دهنده برای آشنایی سریع با این فریم ورک را داشته باشد، نوشته نشده است. اما از امروز می خواهیم با مثال های کوتاه و سریع به نکاتی که به آنها در ساخت برنامه های ساده با آنگولار نیاز داریم آشنا شویم.

برای استفاده از AngularJS، نیاز است ابتدا کتابخانه آن را در فایل HTML خود اضافه کنیم، برای این کار از CDN می شود استفاده کرد. آن را به انتهای تگ body خود اضافه کنید.

AngularJS به شما این امکان را می دهد تا با استفاده از تعداد زیادی directives، عناصر HTML خود را به model متصل کنید. اینها ویژگی هایی هستند که با ng- شروع می شوند و در هر عناصر HTML قرار می گیرند. یکی از مهمترین ویژگی که باید در هر صفحه ای اضافه کنید (اگر مایل باشید آنگولار را در برنامه خود داشته باشید)، استفاده از ng-app است:

<body ng-app>

1	<body ng-app>

ng-app در عناصری مثل html، body، div اضافه می شود تا بقیه عناصر موجود در خود را به عنوان محدوده برنامه آنگولار شناسایی کند. وقتی صفحه بارگذاری می شود، آنگولار تمام عناصر فرزند در directive ها را ارزیابی می کند.

معرفی AngularJS

بطور کلی AngularJS فریم ورکی است که HTML (views) را با آبجکت های جاوا اسکریپت (models) متصل می کند. این بدان معناست که وقتی مدل های شما تغییر داده شوند، این بروزرسانی نیز در صفحه (views) بطور خودکار انجام می شود. در مقابل نیز وقتی یک مدل، با ورودی یک فیلد متن در ارتباط (bind) باشد، مقدار مدل نیز با تغییر فیلد ورودی بروزرسانی می شود. Angular تمام این کارها را مثل یک چسب انجام می دهد، بنابراین شما دیگر لازم نیست بطور دستی HTML خود را بروزرسانی کنید یا با jQuery به رویدادهایی (event) که اجرا می شوند گوش فرا دهید. در حقیقت ما در این مثال ها از هیچ jQuery استفاده نخواهیم کرد.

سریعترین روش برای وارد کردن Angular به پروژه خود، اضافه کردن CDN زیر در انتهای تگ <body> است. (قبل از اینگه تگ body بسته شود).

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

خوب به اندازه کافی با تئوری آنگولار آشنا شدیم، اجازه دهید با کدهای آن کار کنیم.

مثال: ساخت نوار منو

به عنوان اولین مثال، ما نوار منویی را خواهیم ساخت که منو انتخاب شده را نشان می دهد. در این مثال تنها از directive های آنگولار استفاده شده است، که ساده ترین نوع ساخت برنامه با این فریم ورک است.

[fa type=”globe”] دمو

در این مثال و مثل هایی که در پست های آینده خواهیم دید، فرض شده است که کاربر آشنایی کافی با HTML و CSS دارد – هر کجا که لازم شده توضیح داده می شود. تمرکز ما بر روی Angular خواهد بود. برای راحتی، از Bootstrap برای چارچوب و ظاهر سایت استفاده خواهیم کرد.

اگر با npm آشنا هستید می توانید سورس Angular یا Bootstrap را با دستورات زیر در پروژه مثال خود ذخیره کنیم.

$ npm install angular bootstrap
C:\Users\Patrick\Desktop\angular-example1
├── angular@1.4.7
└── bootstrap@3.3.5

$ npm install angular bootstrap

C:\Users\Patrick\Desktop\angular-example1

├── angular@1.4.7

└── bootstrap@3.3.5

نگران نباشد اگر با npm آشنا نیستید می توانید CDN ها استفاده کنید. برای این کار می بایست از CDN زیر برای وارد کردن آنگولار به فایل HTML خود استفاده کنیم. لینک زیر قبل از اینکه تگ <body> بسته شود قرار دهید:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

index.html

برای شروع ابتدا یک فایل index.html در پروژه خود ایجاد کرده و HTML های ساده زیر را به آن اضافه کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Learn AngularJS With Example</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body ng-app>
    <div class="container">
      <nav ng-class="active" ng-click="$event.preventDefault()">
        <ul class="nav nav-justified">
          <li><a href="#" class="home" ng-click="active='home'">Home</a></li>
          <li><a href="#" class="projects" ng-click="active='projects'">Projects</a></li>
          <li><a href="#" class="services" ng-click="active='services'">Services</a></li>
          <li><a href="#" class="about" ng-click="active='about'">About</a></li>
          <li><a href="#" class="contact" ng-click="active='contact'">Contact</a></li>
        </ul>
      </nav>
      <p class="text-center current-item" ng-init="active='home'">Current Item <b>{{active | uppercase }}</b></p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Learn AngularJS With Example</title>

</head>

<li><a href="#" class="projects" ng-click="active='projects'">Projects</a></li>

<li><a href="#" class="services" ng-click="active='services'">Services</a></li>

<li><a href="#" class="about" ng-click="active='about'">About</a></li>

<li><a href="#" class="contact" ng-click="active='contact'">Contact</a></li>

</ul>

</nav>

<p class="text-center current-item" ng-init="active='home'">Current Item <b>{{active | uppercase }}</b></p>

</div>

</body>

</html>

همانطور که می دانیم برای راحتی در کار از سی اس اس های آماده Bootstrap استفاده کرده ایم، پس توجه داشته باشید که فایل css بوت استراپ را در داخل تگ <head> قرار داده ایم. و به دنبال آن یک فایل style.css ایجاد کرده ایم تا سی اس اس های سفارشی خود را درون آن بنویسیم. و همچنین AngularJS را در انتهای تگ <body> قرار داده ایم.

توجه داشته باشید که چطور از دایرکتیو ng-app در تگ body استفاده کرده ایم، این کار باعث می شود حوزه عملیات آنگولار تنها در تگ body باشد، اگر بخواهید از آنگلولار در کل سند استفاده کنید باید ng-app را در تگ html قرار دهید.

 <nav ng-class="active" ng-click="$event.preventDefault()">
        <ul class="nav nav-justified">
          <li><a href="#" class="home" ng-click="active='home'">Home</a></li>
          <li><a href="#" class="projects" ng-click="active='projects'">Projects</a></li>
          <li><a href="#" class="services" ng-click="active='services'">Services</a></li>
          <li><a href="#" class="about" ng-click="active='about'">About</a></li>
          <li><a href="#" class="contact" ng-click="active='contact'">Contact</a></li>
        </ul>
      </nav>

<li><a href="#" class="projects" ng-click="active='projects'">Projects</a></li>

<li><a href="#" class="services" ng-click="active='services'">Services</a></li>

<li><a href="#" class="about" ng-click="active='about'">About</a></li>

<li><a href="#" class="contact" ng-click="active='contact'">Contact</a></li>

</ul>

</nav>

در تگ nav از ng-class که با متغیر active تعریف شده است استفاده کرده ایم، مقدار متغیر active با هر با کلیک بر روی منو ها تغییر می یابد. همانطور که مشاهده می کنید در هر منو از ng-click استفاده شده است، این دستور درست مثل رویداد onclick() در جاوا اسکریپت می باشد. کاربر با کلیک بر روی هر یک از منو ها، مقدار متغیر active را مناسب با نام منو تغییر می دهد، به عنوان مثال اگر بر روی منو projects کلیک شود، مقدار active نیز به مقدار projects تغییر داده می شود و همچنین منوی انتخاب شده برجسته می شود. از $event.preventDefault() برای این استفاده شده است تا با هر بار کلیک بر روی منو، از refresh شدن صفحه جلوگیری شود.

<p class="text-center current-item" ng-init="active='home'">Current Item <b>{{active | uppercase }}</b></p>

1	<p class="text-center current-item" ng-init="active='home'">Current Item <b>{{active \| uppercase }}</b></p>

همانطور که حدس زده اید از تگ <p> برای نشان دادن نام منوی انتخاب شده استفاده شده است. دایرکتیو ng-init باعث می شود متغیر active را که تعریف کرده ایم را با مقدار home مقدار دهی اولیه کنیم. این بدان معناست که وقتی صفحه را بارگذاری می کنید، منوی Home بصورت پیشفرض انتخاب شده باشد:

{{ active | uppercase }} نیز باعث می شود که نام منو انتخاب شده را چاپ کند.

اگر قبلا با یکی template engine script کار کرده باشید حتما با این نوع از سینتکس {{ var }} آشنایی دارید. وقتی فریم ورک با چنین نوشته ای روبرو می شود، آن را با مقدار متغیر جایگزین می کند. این عمل در هر بار که متغیر تغییر پیدا می کند تکرار می شود.

uppercase باعث می شود کلمات با حروف بزرگ چاپ شود.

style.css

برای اینکه ظاهر نوار منو خود را داشته باشیم css ساده زیر را به فایل style.css اضافه کنید:

* { transition: all 0.2s ease; }

body {
  padding-top: 20px;
}

.nav-justified {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
  font-weight: bold;
  color: #777;
  text-align: center;
  background-color: #e5e5e5; /* Old browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:         linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
  border-bottom: 1px solid #d5d5d5;
}

.nav-justified > li:first-child > a {
  border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

/* important */
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.about .about,
nav.contact .contact {
  background-color: #ddd;
  background-image: none;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}

p.current-item {
  padding-top: 1em;
  font-size:22px;
  font-weight:bold;
  color:#777;
}

.current-item b {
  color:#ffffff;
  display:inline-block;
  padding:5px 10px;
  background-color:#e35885;
  border-radius:2px;
  text-transform:uppercase;
  font-size:18px;
}

@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
  .nav-justified {
    max-height: 52px;
  }
  .nav-justified > li > a {
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
    border-right: 0;
    border-radius: 0 5px 5px 0;
  }
}

* { transition: all 0.2s ease; }

body {

padding-top: 20px;

}

.nav-justified {

background-color: #eee;

border: 1px solid #ccc;

border-radius: 5px;

}

.nav-justified > li > a {

padding-top: 15px;

padding-bottom: 15px;

margin-bottom: 0;

font-weight: bold;

color: #777;

text-align: center;

background-color: #e5e5e5; /* Old browsers */

background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));

border-bottom: 1px solid #d5d5d5;

}

.nav-justified > li:first-child > a {

border-radius: 5px 5px 0 0;

}

.nav-justified > li:last-child > a {

border-bottom: 0;

border-radius: 0 0 5px 5px;

}

/* important */

nav.home .home,

nav.projects .projects,

nav.services .services,

nav.about .about,

nav.contact .contact {

background-color: #ddd;

box-shadow: inset 0 3px 7px rgba(0,0,0,.15);

}

p.current-item {

padding-top: 1em;

font-size:22px;

font-weight:bold;

color:#777;

}

.current-item b {

color:#ffffff;

display:inline-block;

padding:5px 10px;

background-color:#e35885;

border-radius:2px;

text-transform:uppercase;

font-size:18px;

}

@media (min-width: 768px) {

.container {

max-width: 730px;

}

.nav-justified {

max-height: 52px;

}

.nav-justified > li > a {

border-right: 1px solid #d5d5d5;

border-left: 1px solid #fff;

}

.nav-justified > li:first-child > a {

border-left: 0;

border-radius: 5px 0 0 5px;

}

.nav-justified > li:last-child > a {

border-right: 0;

border-radius: 0 5px 5px 0;

}

توجه داشته باشید که بخش مهمی از css فوق که باعث می شود رنگ منو انتخاب شده تغییر پیدا کند، تکه سی اس اس زیر است:

nav.home .home,
nav.projects .projects,
nav.services .services,
nav.about .about,
nav.contact .contact {
  background-color: #ddd;
  background-image: none;
  box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}