Ini pertama kalinya ane bikin di thread programming. Langsung aja ya..
Angular JS adalah Javascript framework berbasis MVW atau Model, View Whatever. Ane sendiri masih baru kenal ini programming, tapi langsung kesengsem. Dulu sempet belajar ExtJS yang juga keren, tapi berhubung ExtJS di Indonesia jarang, dan mentor ane udah ga ada, ane cari cari alternatif, dan ketemu AngularJS.

Untuk membuat web app dengan AngularJS dibutuhkan perubahan total paradigma programming agan. Berapa kali ane pengen coba balik ke jQuery, tapi menurut para praktisi katanya seharusnya jangan balik ke jQuery dulu sebelum bener bener mentok. Dan itu ane buktikan setelah 1-2 bulan berkutat. Ane masih belum jago, in fact ane masih baru mulai. Karena itu di thread ini ane pengen sharing sekaligus sama sama belajar karena ane juga kesulitan cari user AngularJS di Indonesia.

Lalu, mengapa harus AngularJS? Ane ga akan sebut sebut google sebagai official backing company, atau struktur MVW, tapi karena ini forum programmer, ane berikan 2 buah code yang ane yakin bikin agan mendelik. Begitu ane melihat coding ini, ane juga langsung duduk tegak di kursi dan mulai membaca
Simple... kita akan melakukan rolling multiple image over multiple album, with title. Kita mulai dengan PHP dan data, yang kita semua jelas udah tahu untuk scan folder pictures.
$folder = $_SERVER['DOCUMENT_ROOT'].'/images';
$albumList = scandir($folder);
$album = array();
foreach ($albumList as $f) {
    if ($f === '.' or $f === '..') continue;
    $path = "{$folder}/{$f}/";
    if (is_dir($path)) {
        $picList = scandir($path);
        $pics = array();
        foreach ($picList as $p) {
            if (array_pop(explode('.', $p)) == 'jpg') {
                $pics[] = $p;
            }
        }
        $r['album'] = $f;
        $r['pic'] = $pics;
        $album[] = $r;
    }
}
header('Content-Type: application/json');
echo json_encode($album); 


Hasil json seperti berikut:
[
    {
        "album": "rumah",
        "pic": [
            "ruangtamu.jpg",
            "tv.jpg",
            "kamar.jpg"
        ]
    },
    {
        "album": "teman",
        "pic": [
            "gengmotor.jpg",
            "tetangga.jpg",
            "keponakan.jpg"
        ]
    }
] 


Sampai diatas ane yakin udah familiar. Lalu, bagaimana menampillkan di AngularJS?

HTML


Dan ini adalah kode angularJS
var app = angular.module('albumApp', []);

app.controller('albumController', ['$scope', 'albumModel', function($scope, albumModel) {
    $scope.currentAlbum = {};
    $scope.albumModel = albumModel;
    $scope.setImageList = function(album) {
        $scope.currentAlbum = album;
    }
}])

app.service('albumModel', function($http) {
    var self = this;
    self.data = {};
    self.loadList = function() {
        $http.get('/albumAjax.php').success(function (json) {
            self.data = json;
        })
    }
    self.loadList();
}) 


Asik ngga? Kita hanya perlu mendefinisikan data, dan Angular yang akan mengurus presentasinya setelah binding.