AngularJs Tutorial : Membuat Rekursif Menu – Multi Dimensi Array di AngularJs – Ng`Blog Biar Gak GobloG

Hai.. hai.. saya kembali lagi di blog anak SMK yang sungguh gak keren ini. Di kesempatan kali ini saya akan menulis sedikit hasil belajar saya selama hampir 1 bulan ini. Saya banyak belajar hal baru, salah satunya saya belajar AngularJs. Ahhhh, apalagi itu AngularJs? Itu yang pertama terlintas di benak saya. Setelah main-main ke web resminya, ternyata AngularJs adalah Framework javascript open source buatan Google. Iseng-iseng saya main ke forum javascript, ternyata AngularJs ini sedang naik daun. Bersaing dengan Backbone.js dan Ember.js (kedua JS framework ini juga saya kurang tau -_-). Sempat bingung juga mau nyobain yang mana dari ketiga JS framework tersebut. Banyak yang lebih memilih AngularJs, yaw akhirnya saya ikutan juga nyicipin AngularJs. Sejauh ini yaw keren lah, kebetulan project di kantor juga menggunakan AngularJs.

Kemarin saya menemui kasus, gimana sih menampilkan rekursif menu di AngularJs?. Datanya diambil dari array yang sudah kita definisikan sebelumnya. Saya baca di web resminya, dan itu bisa dipecahkan dengan menggunakan fungsi ng-repeat untuk melakukan looping data serta fungsi ng-template untuk membuat sebuah tampilan/template untuk menempatkan data hasil looping. Dan tidak lupa menggunakan fungsi ng-include untuk memasukkan tampilan/template ke aplikasi utama. Hahaha, bingung? Saya juga bingung mau jelasin gimana :)). Yuk dah, kita lanjut aja ke kode-nya.

1. Saya membuat sebuah file html, yang isinya seperti berikut :

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>

  <script type="text/ng-template"  id="menu_tpl.html">
    <span class="glyphicon {{ menu.icon }}"></span> <a href="{{menu.url}}">{{menu.name}}</a>
    <ul>
        <li ng-repeat="menu in menu.sub" ng-include="'menu_tpl.html'"></li>
    </ul>
  </script>

  <ul ng-controller="MenuCtrl">
      <li ng-repeat="menu in links" ng-include="'menu_tpl.html'"></li>
  </ul>

  </body>
</html>

2. Maksud dari template yang saya sebutkan di atas, ialah pada blok kode <script></script>. Nantinya kode yang ada di dalam blok kode <script></script> akan dimasukkan/inject ke aplikasi utama. Karena bersifat rekursif, di dalam template akan memanggil dirinya sendiri.

  <script type="text/ng-template"  id="menu_tpl.html">
    <span class="glyphicon {{ menu.icon }}"></span> <a href="{{menu.url}}">{{menu.name}}</a>
    <ul>
        <li ng-repeat="menu in menu.sub" ng-include="'menu_tpl.html'"></li>
    </ul>
  </script>

3. Aplikasi utama maksud saya, seperti di bawah ini. Dimana controller dari AngularJs yang kita buat didefinisikan.

  <ul ng-controller="MenuCtrl">
      <li ng-repeat="menu in links" ng-include="'menu_tpl.html'"></li>
  </ul>

4. Sekarang kita buat controller dimana berisikan array dari menu yang akan kita tampilkan. Sebelumnya kita define terlebih dahulu nama module-nya.

script.js

var app = angular.module("App", []);
app.controller("MenuCtrl", ['$scope', function($scope) {
    $scope.links = [
         { url: "/dashboard", name: "Dashboard", icon: "glyphicon-home"},
         { url: "/inbox", name: "Inbox", icon: "glyphicon-inbox", sub:
             [
                { url: "", name: "All Messages", icon: "glyphicon-envelope"},
                { url: "", name: "Received Inquires", icon: "glyphicon-asterisk"},
                { url: "", name: "Sent Inquires", icon: "glyphicon-cog", sub:
                  [
                    { url: "", name: "All Messages", icon: "glyphicon-envelope"},
                    { url: "", name: "Received Inquires", icon: "glyphicon-asterisk"},
                    { url: "", name: "Sent Inquires", icon: "glyphicon-cog"},
                    { url: "", name: "Stared", icon: "glyphicon-star"},
                    { url: "", name: "Unread", icon: "glyphicon-envelope"},
                    { url: "", name: "Unanswered", icon: "glyphicon-minus-sign"},
                    { url: "", name: "Delete", icon: "glyphicon-trash"},
                  ]
                },
                { url: "", name: "Stared", icon: "glyphicon-star"},
                { url: "", name: "Unread", icon: "glyphicon-envelope"},
                { url: "", name: "Unanswered", icon: "glyphicon-minus-sign"},
                { url: "", name: "Delete", icon: "glyphicon-trash"},
             ]
         },
         { url: "", name: "My Trips", icon: "glyphicon-plane"},
         { url: "", name: "My Properties", icon: "glyphicon-folder-open"},
         { url: "", name: "Promotion Tools", icon: "glyphicon-flag", sub:
             [
                { url: "", name: "Property Ranking", icon: "glyphicon-th-list"},
             ]
         },
         { url: "", name: "Account", icon: "glyphicon-user", sub:
             [
                { url: "", name: "Profile Settings", icon: "glyphicon-wrench"},
                { url: "", name: "Payment Methods", icon: "glyphicon-credit-card"},
                { url: "", name: "Booking History", icon: "glyphicon-hdd"},
                { url: "", name: "Notifications", icon: "glyphicon-tasks"},
             ]
         },
         { url: "", name: "Log Out", icon: "glyphicon-remove-circle"},
    ];
}]);

5. Jalankan di browser dan kalo gak ada yang salah :p, kira-kira jadinya seperti DEMO ini.

Perlahan namun pasti, saya mulai jatuh hati sama AngularJs, haha. Sesuai dengan penjelasan di web resminya, AngularJs mengajarkan tag-tag html baru untuk web browser masa kini. OK deh, sekian dulu tulisan singkat saya pagi ini. Mau tidur dulu, entar kerja pagi :p

“Stay Foolish, Stay Hungry”

Happy Blogging and Keep Coding

Cheerrrss….!!!!

1 Comment