Perbedaan Vue.js dengan Angular

Postingan sebelumnya itu pengenalan mengenai framework berbasis javascript (Vue.js).

Untuk sementara simple aja, karena gw belum banyak tau perbedaannya.

Kalo vue.js syntax lebih mudah dipahami dibandingan angular.

Kenapa demikian, karena kalau kita pernah belajar bahasa pemrograman dasar seperti C/C++, atau pernah belajar bahasa PHP untuk web program, syntax vue.js lebih familiar, sedangkan angular seperti halnya kita harus memahami syntax baru meskipun fungsi dari syntax nya itu sama dan biasa dipakai pada program lain. Gw ngomong ape sih, intinya pengunaan vue.js lebih familiar dibanding angular dalam hal syntax nya.

Contoh Vue.js untuk looping (pake v-for)

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js</title>
    <!-- dibawah ini library nya agar feature-feature vue bisa dipake -->
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
</head>
<body>
    <table id="rak_buku">
        <tr>
            <th>No.</th><th>Judul</th><th>Harga</th>
        </tr>
        <tr v-for="(buku, index) in rakBuku">
            <td>{{ index+1 }}</td><td>{{ buku.judul }}</td><td>{{ buku.harga }}</td>
        </tr>
    </table>

    <script type="text/javascript">
    /* ini model nya */
    var modelBuku = {
        rakBuku:[
            /* ini data yang bakal ditampilkan */
            {judul:'A Little Piece of Heaven',harga:'50000'},
            {judul:'The Sound of Silent',harga:'100000'},
            {judul:'Havana',harga:'150000'}
        ]
    }

    /* ini view nya */
    var viewBuku = new Vue({
        el: '#rak_buku',
        /* maksud dari el: '#rak_buku'
         * Jadi si data hanya bisa dipanggil(untuk ditampilkan) 
         * pada Element yang memiliki id="rak_buku"
         */

        /* lalu kita ambil data nya dari variabel modelBuku diatas */
        data: modelBuku
    });
    </script>
</body>
</html>

Kalo Angular untuk looping (pake ng-repeat)

<!DOCTYPE html>
<html>
<head>
    <title>Angular</title>
    <!-- dibawah ini library nya agar feature-feature angular bisa dipake -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
    <table ng-app="myApp" ng-controller="myCtrl">
        <tr>
            <th>No.</th><th>Judul</th><th>Harga</th>
        </tr>
        <tr ng-repeat="buku in rakBuku">
            <td>{{ $index+1 }}</td><td>{{ buku.judul }}</td><td>{{ buku.harga }}</td>
        </tr>
    </table>

    <script type="text/javascript">
    /* Gua ga terlalu paham, tapi ini deklarasi app nya,
     * jadi app ini digunain di element yang memliki atrribute ng-app="myapp"
     */
    var app = angular.module('myApp', []);
    /* Kemudian [] itu array, si array, ga tau maksudnya apa, 
     * mungkin buat nampung controller kali ya
     */

    /* Nah ini controllernya, 
     * jadi si app tadi pake controller yg ini, 
     * misal kita punya beberapa element dengan ng-app="myapp"
     * Lalu kita bisa buat dengan beberapa controller yg berbeda dengan 
     * kegunaan dan hasil yang beda juga, mungkin sih(belom jajal gw)
     */
    app.controller('myCtrl', function($scope) {
        $scope.rakBuku = [
            /* ini datanya */
            {judul:'A Little Piece of Heaven',harga:'50000'},
            {judul:'The Sound of Silent',harga:'100000'},
            {judul:'Havana',harga:'150000'}
        ];
    });
    </script>
</body>
</html>

Untuk contoh, hasil outputnya mah sama, gw cuma mau bandingin pengunaanya doang