Pengenalan Dasar AngularJs MVW-Nya Javascript Untuk Membuat Web Aplikasi
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.
Hasil json seperti berikut:
Sampai diatas ane yakin udah familiar. Lalu, bagaimana menampillkan di AngularJS?
HTML
Dan ini adalah kode 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.
PHP Code:
$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:
PHP Code:
[
{
"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
HTML Code:
<html>
<head>
<title>Albumku</title>
< script language='javascript' src='/assets/javascript/angular.js'>< /script>
< script language='javascript' src='script.js'>< /script>
</head>
<body>
<div ng-app="albumApp" ng-controller="albumController">
<div id="albumname" ng-model="currentAlbum">Nama album: {{currentAlbum.album}}</div>
<div id="albumlist" ng-repeat="album in albumModel.data">
<a href="#" ng-click="setImageList({{album}})">{{album.album}}</a>
</div>
<div id="picturelist" ng-repeat="picture in currentAlbum.pic">
<img src="/images/{{currentAlbum.album}}/{{picture}}"/>
</div>
</div>
</body>
</html>
<head>
<title>Albumku</title>
< script language='javascript' src='/assets/javascript/angular.js'>< /script>
< script language='javascript' src='script.js'>< /script>
</head>
<body>
<div ng-app="albumApp" ng-controller="albumController">
<div id="albumname" ng-model="currentAlbum">Nama album: {{currentAlbum.album}}</div>
<div id="albumlist" ng-repeat="album in albumModel.data">
<a href="#" ng-click="setImageList({{album}})">{{album.album}}</a>
</div>
<div id="picturelist" ng-repeat="picture in currentAlbum.pic">
<img src="/images/{{currentAlbum.album}}/{{picture}}"/>
</div>
</div>
</body>
</html>
Dan ini adalah kode angularJS
PHP Code:
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();
})
