Cara Membuat Tab Sederhana dengan AngularJS

Share:

Hello World's! Tab... Apa sih tab itu??

Gimana ya? Saya ga bisa mendefinisikannya. Gampangnya gini, tab itu bagian-bagian yang ditampilkan secara bergantian. Jadi yang muncul itu cuma satu, yang lain disembunyikan. Kalau mau munculin yang lain ngeklik tombol, bagian yang diinginkan muncul dan bagian yang tadi ada sekarang jadi hilang. Sama kayak 'tab' di browser lah maksudnya.

Kali ini kita akan belajar gimana cara bikin tab. Berbeda dengan biasanya yang native, sekarang kita akan build pakai angular. Bagi yang belum tau basic mengenai angular, bisa baca-baca dulu dokumentasi-nya. Tersebar banyak kok. Di W3School juga ada. To the point aja, yuk kita bikin tab dengan angular js.

Pertama, buat file HTML-nya dulu dengan script di bawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Membuat Tab di Angular JS</title>
     <script src="http://belajarnge.web.id/alat/angular.min.js"></script>
</head>
<body>

</body>
</html>

Masukkan elemen berikut ini di body-nya

<div ng-app="bniApp" ng-controller="bniCtrl">
     <div class="menu">
          <li ng-class="{ active: isSet(1) }">
               <a href ng-click="setTab(1)">About</a>
          </li>
          <li ng-class="{ active: isSet(2) }">
               <a href ng-click="setTab(2)">Portfolio</a>
          </li>
          <li ng-class="{ active: isSet(3) }">
               <a href ng-click="setTab(3)">Contact</a>
          </li>
     </div>
     <div ng-show="isSet(1)">
          <h1>About</h1>
          <p>BNI adalah media untuk belajar ngeweb berbahasa ID</p>
     </div>
     <div ng-show="isSet(2)">
          <h1>Portfolio</h1>
          <p>Ini akan menampilkan portfolio-mu</p>
     </div>
     <div ng-show="isSet(3)">
          <h1>Contact</h1>
          <p>Find us on <a href="https://fb.me/BelajarNgewebID">Facebook</a> or <a href="https://www.instagram.com/belajarngewebid">Instagram</a></p>
     </div>
</div>

Setelah itu, kita buat script untuk controller-nya. Buat file baru, beri nama bni.js aja lah, biar gampang. Letakkan jadi satu lokasi sama file html diatas, dan masukkan script ini.

var app = angular.module('bniApp', []);
app.controller("bniCtrl", function($scope) {
     $scope.tab = 1;
     $scope.setTab = function(newTab) {
          $scope.tab = newTab;
     };
     $scope.isSet = function(tabNum) {
          return $scope.tab === tabNum;
     };
});

Simpan. Terserah mau dimana aja yang penting bisa di-load. Dan sekarang, coba kita run script-nya di browser. Dan.... tara! Gak bisa diklik. Kenapa? Soalnya controller-nya belum dipanggil di html-nya. Panggil dengan cara biasanya, kayak gini;

<script src="bni.js"></script>

Nahh. Kalau sekarang di-run, pasti bisa diklik tab-tab-nya. Salam Koding!

No comments