0
1
2
3
4
5
6
TableofContentsIntroduction
Bab1Dasar-Dasar
Bab2Directive
Bab3Service
Bab4Route
Bab5$watch,$digestdan$apply
Bab6ContohAplikasiCRUDMenggunakanWebAPI
AngularJsUntukPemula
2
BukuyangditujukanuntukpemulainimembahasAngularJs,frameworkJavaScriptbesutanGoogleyangdigunakanuntukfrontenddevelopmentkhususnyaSinglePageApplication(SPA).`
MateriyangdisajikanbersifatpraktikdandiharapkanpembacabisalangsungcodinguntuklangsungmerasakandanmulaimengenalAngularJs.Diharapkantidakcopy-pastekarenabelajarngodingmemangharusbeneranngoding.
AngularJsdalambukuinimerupakanversi1,untukversi2harapmenunggupenulismempelajarinyaterlebihdahulu:D
Ebookinigratisdanbolehdisebarkandengansyaratharuslinkdaridomainini,tidakbolehdihostpadadomainlain.
Sourcecodecontoh-contohprogramakansegeraditaruhGithub,untuksaatinimohonmaafmasihbelum:)
BukuiniditulisolehAgungSetiawan.Jikaadapertanyaan,kritik,[email protected].
AngularJsUntukPemula
3Introduction
Bab1Dasar-DasarMateriyangdipelajaripadababini:
MemasangAngularJsHelloWorldWorkflowFilterBasicDirective
1.1MemasangAngularJsProsesinstalasiataupemasanganAngularJskedalamaplikasiyangakankitabangunsangatlahmudah.Kitahanyaperlumeng-includefileAngularJsdidalamfileHTMLmenggunakantag<script>sepertilayaknyafileJavaScriptbiasa.
<html>
<head>
</head>
<body>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
</body>
<html>
Ataujikapembacalebihmemilihuntukmengunduhfilenyaterlebihdahuluuntukdireferensikanmelaluifolderlokalmakamenjadisepertidibawahini.
<html>
<head>
</head>
<body>
<scriptsrc="js/angular.min.js"></script>
</body>
<html>
1.2HelloWorld
AngularJsUntukPemula
5Bab1Dasar-Dasar
SupayabelajarnyajadisemangatmakaakansayatunjukkansedikitkesaktiandariAngularJs.IdenyasangatsederhananamunakanmembuatkitapahambagaimanaflowdariAngularJs.
1. Buatsebuahfiledengannamaindex.htmldanpasangAngularJssepertipadacontohdiatas.
2. Buatsebuahfolderbarubernamajssejajardenganfileindex.html.3. Buatfiledengannamaapp.jsdidalamfolderjstadidanisikankodeberikut.
varapp=angular.module('FirstApp',[]);
4. Includefileapp.jsdidalamfileindex.htmlmenggunakantag<script>,letakkanpadabagianatassebelumtag</body>.
5. Buatfolderbarudengannamacontrollersdidalamfolderjsdanbuatfile.MainController.jsdidalamfolderbaruini.
6. IsikankodeberikutdidalamfileMainController.js.
app.controller('MainController',['$scope',function($scope){
$scope.title='BelajarAngularJs';
}]);
7. IncludefileMainController.jsdidalamfileindex.htmlmenggunakantag<script>,letakkanpadabagianatassebelumtag</body>.
8. Editfileindex.htmlmenjadisepertitampakpadakodeberikut.
<!DOCTYPEhtml>
<html>
<head>
<title>BelajarAngularJs</title>
</head>
<bodyng-app="FirstApp">
<divng-controller="MainController">
</div>
<scriptsrc="js/angular.min.js"></script>
<scriptsrc="js/app.js"></script>
<scriptsrc="js/controllers/MainController.js"></script>
</body>
</html>
9. Jalankanindex.htmlpadabrowser.
AngularJsUntukPemula
6Bab1Dasar-Dasar
AplikasiAngularJsyangpalingsederhana(sepertidiatas)terdiridari1moduldan1controller.Apayangadapadafileapp.jsadalahmodulsedangkanapayangadapadafileMainController.jsadalahcontroller.
SupayaHTMLtahumodulapadancontrollerapayangdigunakankitaperlumemberitahunyadenganmenggunakandirectiveng-appuntukmoduldanng-controlleruntukcontroller.
Kalaupembacasudahbenarmelakukanlangkah-langkahdiatasmakahasilyangmunculpadabrowserseharusnyaadalahsepertigambarberikut.
Sekarangcobaubahvariabeltitleyangadapadacontrollerdengankalimatsesukapembacadankemudianrefreshbrowserdanlihatperubahanyangterjadi.
Hallainyangpatutdicobaadalahmenambahkanvariabelbarudankemudiancobadimunculkanpadaview.
Peubahanpadacontroller
AngularJsUntukPemula
7Bab1Dasar-Dasar
app.controller('MainController',['$scope',function($scope){
$scope.title='BelajarAngularJs';
$scope.book={
title:'BelajarAngularJsBersamaAgungSetiawan',
author:'AgungSetiawan',
price:80000
};
}]);
Perubahanpadaview
<divng-controller="MainController">
{{title}}</br>
{{book.title}}</br>
{{book.author}}</br>
{{book.price}}
</div>
SampaisinikitasudahbelajarhalpalingdasaruntukmemahamiAngularJs.
1.3Workflow
AngularJsUntukPemula
8Bab1Dasar-Dasar
Biasanyasetiapdevelopermemilikiworkflow/urutankerjayangberbedadengandeveloperyanglaindalammengerjakanaplikasi.Akantetapi,seringnyaadasuatuworkflowyangbersifatumumyangdiikutiolehsemuadeveloper.
Darilangkah-langkahyangkitakerjakanpadasubbab1.2dapatdisimpulkanbahwaworkflowuntukmembuatsebuahaplikasiAngularJsadalah:
1. Membuatmodule,includefilemoduldiHTMLkemudianmemberitahuHTMLmodulapayangdigunakanmenggunakanng-app.
2. Membuatcontroller,includefilemoduldiHTMLkemudianmemberitahuHTMLcontrollerapayangdigunakanmenggunakanng-controller.
3. Menambahkandatapadacontrollermenggunakan$scope.4. Menampilkandatadiviewmenggunakanekspresi``.
1.4FilterTerdapatfiturpadaAngularJsyangbernamafilter,digunakanuntukmemformattampilansebuahvariabeldiview.Jadialih-alihkitamelakukanformattingdicontroller,kitamelakukannyadiviewdenganbantuanfilter.
Padacontohkodesebelumnyaterlihatkalauhargayangkitaketikkanberupaangkabiasadanketikaditampilkandiviewmakahasilnyamasihapaadanya,tanpaformatmatauang.
KitabisamenggunakanfiltercurrencyyangdisediakanAngularJsuntukmemformathargasehinggaenakdilihat.
<divng-controller="MainController">
{{title}}</br>
{{book.title}}</br>
{{book.author}}</br>
{{book.price|currency}}
</div>
Penggunaanfiltersangatmenyenangkansepertibisadilihatpadalistingkodediatas.Kitamenambahkansebuahtandapipeline(|)dibelakangvariabelyanginginkitafilterkemudiandiikutidenganfilteryangkitagunakan.Setelahlakukanperubahandenganmenambahkanfiltercobajalankanpadabrowser.
AngularJsUntukPemula
9Bab1Dasar-Dasar
Adajugafilterlainyangbisadigunakanmisalnyadateuntukmengaturformattanggal.Sebelumnyatambahkanterlebihdahuluvariabelbarudicontroller.
app.controller('MainController',['$scope',function($scope){
$scope.title='BelajarAngularJs';
$scope.book={
title:'BelajarAngularJsBersamaAgungSetiawan',
author:'AgungSetiawan',
price:80000,
pubdate:newDate('2015','09',01'')
};
}]);
Tampilkanvariabelbarutersebutkedalamview.
<divng-controller="MainController">
{{title}}</br>
{{book.title}}</br>
{{book.author}}</br>
{{book.price|currency}}</br>
{{book.pubdate|date}}
</div>
AngularJsUntukPemula
10Bab1Dasar-Dasar
Ngomong-ngomongnihadayangmemperhatikantidakkenapabulan09kokjadinyaOktoberyangseharusnyaSeptember?.Bertanya-tanyaya?InikarenabulandiJavaScriptdihitungnyamulaidari0bukandari1.
UntukmengetahuifilterapasayayangtelahdisediakanolehAngularJs,pembacabisamerujukkedokumentasiyangadadihttps://docs.angularjs.org/api/ng/filter.
SudahpastitidaksemuafilteryangtersediamampumengakomodasikebutuhankitasepertimisalnyaformatmatauangdalamRupiah.AngularJsmemungkinkanbagikitauntukmembuatfiltersendiriataucustomfilter.
MisalkankitainginmembuatfilteruntukmemformatangkamenjadimatauangRupiah.Lakukanperubahanpadafileapp.js.
AngularJsUntukPemula
11Bab1Dasar-Dasar
varapp=angular.module('FirstApp',[]);
app.filter('rupiah',function(){
returnfunctiontoRp(angka){
varrev=parseInt(angka,10).toString().split('').reverse().join('');
varrev2='';
for(vari=0;i<rev.length;i++){
rev2+=rev[i];
if((i+1)%3===0&&i!==(rev.length-1)){
rev2+='.';
}
}
return'Rp.'+rev2.split('').reverse().join('')+',00';
}
});
Janganpusingdenganlogikayangdigunakanuntukmemformatangkamenjadidalambentukmatauangrupiah,perhatikansajabagaimanacaramembuatfilteryangsesuaidengankebutuhankita.Itupunlogikayangdigunakansayadapatdarigoogling.Setelahitupakaifilteruntukmemformatangkahargadihalamanview.
<divng-controller="MainController">
…
{{book.price|currency}}/{{book.price|rupiah}}</br>
…
</div>
Lihatperubahanpadabrowserdansilahkanberteriak"Wwoooowww!".
AngularJsUntukPemula
12Bab1Dasar-Dasar
1.5BasicDirectiveDirectiveadalahtagkhususyangdigunakanolehAngularJs.Sampaisaatinikitabarumengenal2buahdirectiveyaitung-appdanng-controller.Subbabiniakanmembahasbeberapadirectivedasaryangwajibdimengerti.
1.5.1ng-repeat
Tidakbisatidak,perulanganforeachdibutuhkanuntukmendapatkanisidarivariabelyangterdapatadasuatukoleksi/array.BagipembacayangsudahfamiliardenganbahasapemrogramansepertiC#,JavamaupunPHPpastisudahmengetahuikegunaannyadansangatseringdigunakan.
AngularJsmenyediakandirectiveyangbergunauntukmelakukanperulangantersebut.Kitagunakanng-repeatuntukmelakukannya.Supayalebihmudahdipahamimakasayatunjukkanlangsungcontohkodenya.MasihmenggunakancontohyangsamamakapadafileMainController.jshapusvariabelbookdantitle.Sebagaigantinyabuatvariabelbooksyangberisiarrayobject.
AngularJsUntukPemula
13Bab1Dasar-Dasar
app.controller('MainController',['$scope',function($scope){
$scope.books=[
{
title:'BelajarAngularJsBersamaAgungSetiawan',
author:'AgungSetiawan',
price:80000,
pubdate:newDate('2015','09','09')
},
{
title:'BelajarRuby',
author:'PenulisSatu',
price:65000,
pubdate:newDate('2015','10','09')
},
{
title:'BelajarRubyonRails',
author:'PenulisDua',
price:90000,
pubdate:newDate('2015','11','09')
}];
}]);
Ingatworkflow-nya,setelahmenambahkandatadicontrollermakaberikutnyaadalahmenampilkandatadiview.Kaliiniuntukmenampilkandatabukuyangadapadavariabelbooksdigunakanng-repeat.
<divng-controller="MainController">
<divng-repeat="bookinbooks">
{{book.title}}</br>
{{book.author}}</br>
{{book.price|rupiah}}</br>
{{book.pubdate|date}}
<hr/>
</div>
</div>
Jalankandibrowserdansekalilagibolehlahberteriak"Wwoooowww!".
AngularJsUntukPemula
14Bab1Dasar-Dasar
Beberapavariabelbawaanyangperludiketahuiberkaitandenganng-repeat.
1. $index–Indekselemenyangsedangdiakses2. $first-Booleanyangmenandakanelemenpertamaataubukan3. $middle-Booleanyangmenandakanelemenbukanpertamadanbukanterakhir4. $last-Booleanyangmenandakanelementerakhirataubukan5. $even-Booleanyangmenandakanelemenberindeksgenap6. $odd-Booleanyangmenandakanelemenberindeksganjil
1.5.2ng-click
Directiveberikutnyayangperludimengertiadalahng-click.Sudahbisadidugadarinamanyayadirectiveinipastidigunakanuntukmenjalankansesuatuketikadiklik.
Kembalisayakasihcontohpenggunaannya.
AngularJsUntukPemula
15Bab1Dasar-Dasar
app.controller('MainController',['$scope',function($scope){
$scope.books=[
…
…
];
$scope.logToConsole=function(index){
varbook=$scope.books[index];
console.log(book);
};
}]);
DidalamfileMainController.jskitatambahkansebuahmethodbarudengannamalogToConsoleyangmemilikisebuahparameterbernamaindeks.Apayangdilakukanmethodiniadalahmengambilsatudatabukuberdasaranindeksarray-nyadarivariabelbookskemudiandimuncukanmelaluijendelaconsole.
MethodlogToConsoleiniyangakankitagunakandiviewbersamadenganng-click.Berikutadalahkodenya.
<divng-controller="MainController">
<divng-repeat="bookinbooks">
{{book.title}}</br>
{{book.author}}</br>
{{book.price|rupiah}}</br>
{{book.pubdate|date}}</br>
<buttonng-click="logToConsole($index)">Log</button>
<hr/>
</div>
</div>
Jadiyangmenjadiisidaridirectiveng-clickadalahnamamethodyangterdapatdicontroller,dalamhaliniadalahlogToConsole.
Kodediatassekaligusjugamenunjukkancarapenggunavariabel$indexyangsudahsayajelaskanpadasubbabsebeumnyayaitutentangvariabel-variabelyangadading-repeat.
KetikadijalankanpadabrowsercobalahuntukmengeklikbuttonLogdanlihathasilyangkeluardiconsole.
AngularJsUntukPemula
16Bab1Dasar-Dasar
Sayainginpembacabenar-benarmemahamimateriini.Olehkarenaitu,marikitabuatsebuahcontohlagiyangmenggunakanng-click.
Sekarang,padatiaparrayobjectpadavariabelbookstambahkansebuahvariabelbarudengannamalikesdannilainyaadalah0.
$scope.books=[
{
title:'BelajarAngularJsBersamaAgungSetiawan',
author:'AgungSetiawan',
price:80000,
pubdate:newDate('2015','09','09'),
likes:0
},
{
title:'BelajarRuby',
author:'PenulisSatu',
price:65000,
pubdate:newDate('2015','10','09'),
likes:0
},
{
…………….
}
];
AngularJsUntukPemula
17Bab1Dasar-Dasar
Kitaakanmenampilkanjumlahlikepadaviewkemudianmembuatsebuahtombolyangketikadiklikakanmenambahjumlahlikessebanyak1.Untukkeperluanitukitabutuhuntukmenambahmethodbaru.
BukafileMainController.jsdanbuatmethodbarusepertiberikut
app.controller('MainController',['$scope',function($scope){
$scope.books=[
{
title:'BelajarAngularJsBersamaAgungSetiawan',
author:'AgungSetiawan',
price:80000,
pubdate:newDate('2015','09','09'),
likes:0
},
{
….
….
}
];
$scope.logToConsole=function(index){
varbook=$scope.books[index];
console.log(book);
};
$scope.likes=function(index){
$scope.books[index].likes+=1;
};
}]);
Sampaisinidapatkanlogikanyabagaimanamenambahnilailikesuntukmasing-masingbuku?.Sepertibiasa,untukmengetesnyaperlukitaeksekusidibrowserdantekantombollikes.Sebelumnyatentubuatterlebihdahulubagianview-nya.
<divng-controller="MainController">
<divng-repeat="bookinbooks">
{{book.title}}</br>
{{book.author}}</br>
{{book.price|rupiah}}</br>
{{book.pubdate|date}}</br>
{{book.likes}}<buttonng-click="likes($index)">Like</button></br>
<buttonng-click="logToConsole($index)">Log</button>
<hr/>
</div>
</div>
AngularJsUntukPemula
18Bab1Dasar-Dasar
Jikakodinganpembacabelumberjalansebagaimanamestinyacobauntukmenelitikodeyangpembacatulisdanbacalagidariawalinstruksiyangsayaberikandariawalsecaralebihteliti.
1.5.2ng-model
DiAngularJsterdapatsebuahjargontwowaydatabinding.Maksudnyaadalahkitabisamelakukandatabindingdarikeduaarah,yaitudaricontrollerkeviewyangselamainisudahlakukandanyangsatunyalagiyaituarahkebalikan,dariviewkecontroller.
Untukmengirimnilaidariviewkecontrollerkitamenggunakandirectiveng-modelyangberisinamavariabelyangterdapatpadacontroller.
Padacontrollersiapkansebuahvariabeldengannamatitlesertasebuahmethoduntukmenge-lognilaidarivariabeltersebut.
AngularJsUntukPemula
19Bab1Dasar-Dasar
app.controller('MainController',['$scope',function($scope){
$scope.title=10;
$scope.log=function(){
console.log($scope.title);
};
}]);
Buatview-nyayangberisisebuahinputdansebuahekspresiuntukmenampikantitle.Padainputgunakanng-model.
<divng-controller="MainController">
Title:<inputtype="text"ng-model="title"/></br>
{{title}}</br>
<buttonng-click="log()">Log</button>
</div>
Padasaatpertamakalidijalankanmakaakanmunculnilai10baikpadaekspresimaupunpadabagianinput.Halinidikarenakannilaibawaandarititleadalah10sepertiyangtertulisdicontroller.CobatekantombolLogdanhasilpadaconsolejuga10.
Cobaubahnilaiyangadapadainputmakanilaipadaekspresipunakanikutberubahseketikaitujuga.JanganlupauntukmenekantombolLogmakanilaiyangdimunculkandiconsolejugasesuaidenganapayangadakinipadainput.
AngularJsUntukPemula
20Bab1Dasar-Dasar
Bab2DirectiveMateriyangdipelajaripadababini:
Membuatcustomdirectivescopelinkfunction
2.1MembuatCustomDirectiveSetelahmempelajaribeberapadirectivedasaryangwajibdiketahuiuntukmenunjangpekerjaanpembuatanaplikasimenggunakanAngularJs,sekarangsaatnyabelajarmembuatdirectivesendiriyangsesuaidengankebutuhan.
Secarapenggunaantag,directivediAngularJsterbagimenjadi4,yaitu:
1. ElementDirective(<my-directive></my-directive>)2. AttributeDirective(<divmy-directive></div>)3. ClassDirective(<divclass="my-directive"></div>)4. CommentDirective(<!--directive:my-directive-->)
Tujuandaripenulisanbukuiniadalahsayainginmengenalkandasar-dasardariAngularJS.Berkaitandengantujuantersebut,karenamateridirectiveinisangatdalamdanrumitmakasayahanyamenulishaldasaryangsekiranyapenting.
SekarangmarikitalihatstrukturpalingdasardaricustomdirectivediAngularJs.Secarakodingancarame-registercustomdirectivehampirsamadenganme-registercontroller,bedadimethodyangdigunakandannilaikembalian.Saatmembuatdirectivekitadiharuskanuntukmengembalikanobjekdirectiveyangmemilikibeberapaproperty.
app.directive('myDirective',function(){
return{
restrict:'EA',
template:'<h2>Hello{{dunia}}</h2>'
};
});
TuliskodediataspadafileMyDirective.jsyangadapadafolderjs/directives.JanganlupauntukmembuatAngularJsmodulterlebihdahuludanpasangdiviewsepertiworkflowyangbiasa.Buatjugacontroller-nyasebagaiberikut.
AngularJsUntukPemula
22Bab2Directive
app.controller('MainController',['$scope',function($scope){
$scope.dunia="DuniaIndonesia";
}]);
Untukviewbisakitatampilkandirectiveyangkitabuattadi.
<html>
<head>
</head>
<bodyng-app="MyApp">
<divng-controller="MainController">
<my-directive></my-directive>
<hr/>
<divmy-directive></div>
</div>
<scriptsrc="js/angular.min.js"></script>
<scriptsrc="js/app.js"></script>
<scriptsrc="js/controllers/MainController.js"></script>
<scriptsrc="js/directives/MyDirective.js"></script>
</body>
<html>
KarenakitamengaturnilaipropertyrestrictedsebagaiEAyangartinyaElementdanAttributemakakitabisamenggunakandirectivebaiksebagaielementmaupunattribute.Untukclassdancomment,stringyangdigunakanberurutanadalahCdanM.
<my-directive></my-directive>
<divmy-directive></div>
Ngomong-ngomongkenapadirectivekitamenggunakanmy-directivepadahalkitadikodinganmenuliskannyadenganmyDirective?.ItuadalahconventiondariAngularJs.
Sekarangbukafileviewpadabrowserdanlihathasilyangmuncul.
AngularJsUntukPemula
23Bab2Directive
Bisadipahami?.KalimatDuniaIndonesiamunculberasaldarivariabelduniayangadapadacontrollerkemudiandimunculkanmelaluiekpresi{{dunia}}yangadadidalamdirective.Darisinibisadiketahuibahwasemuavariabelyangadadiscopecontrollerjugabisadiaksesdaridirectiveyangberadadibawahcontrollertersebut.
SelanjutnyaketikadilihatmelaluijendelainspectelementterlihatbahwakalimatHelloDuniaIndonesiayangmenggunakantagh2terletakdidalamtagdirectiveyangkitabuat.
<my-directive>
<h2class="ng-binding">HelloDuniaIndonesia</h2>
</my-directive>
Jikainginposisidaritemplateyangkitagunakantidakberadadidalamtagdirectivekitabisamengaturnyadenganmenggunakanpropertireplaceyangbernilaitrue.Ketikareplacebernilaitruemakadirectiveakandigantikan/di-replacedenganapayangadapadapropertitemplate.
app.directive('myDirective',function(){
return{
restrict:'EA',
template:'<h2>Hello{{dunia}}</h2>',
replace:true
};
});
AngularJsUntukPemula
24Bab2Directive
SampaisinisayamintapembacauntukmemahamidulubagaimanatulisanHelloDuniaIndonesiabisamuncul.Amatibaik-baiktiaplangkahdanpenjelasayangsayaberikan,dansebisamungkinuntukmencobanyasendiridenganmengetikkankode,bukancopy–pastehehe.
Meskipundirectiveyangkitabuatmasihsederhananamunadahal-halpentingyangbisakitapelajari.Kitasudahmenggunakantigabuahpropertidaridirective.Maribahassatupersatu.
1. restricted–propertyiniuntukmengaturbagaimanadirectivekitaakandigunakan.Ingatada4jenispenggunaandirective.Ada4stringuntukmasing-masingyaituE,A,C,M.PenggunaanyabisadigabungmissalEA,
2. template–propertiinisebagaitemplateyangakanditampilkanketikadirectivedi-render.Jikainginyangdi-renderadalahsebuahhalamanHTMLdarifilelainmakayangdigunakanadalahpropertytemplateUrldengannilailokasipathfilehtmlyangbersangkutan.
3. replace–untukmengaturapakahtemplateyangditampilkanme-replacetagdirectiveatautidak.
2.2ScopePadasubbabsebelumnyasayasudahsempatmenyinggungmasalahscopeyangadadidalamdirectiveyangsebenarnyaadalahscopeyangberadadiparent-nya.Lihatkembalikodeterakhirdimanaekspresimengambilvariabelduniayangadadicontroller.
Bisajadiadakasusdimanakitamembuatsebuahdirectiveyangmenggunakanscopeyangbukanberasaldariparent-nya.Ada2carauntukmelakukannyayaitu:
1. ChildScope2. IsolatedScope
Sebelumkitalarikeduajenisscopetersebutakanlebihbaiksayamenjelaskanterlebihdahulukenapakitainginmenggunakanbaikchildscopemaupunisolatedscope.
Scopeyangadadidirectiveitusecaradefaultberasaldariscopeyangdimilikiolehparent-nyasepertiyangsudahsayakatakansebelumnya.Pahamibenar-benarkalimatsayayangitu.Karenascopetersebutmerujukkescopeyangsamamakaketikascopeyangadapadadirectiveberubah,secaraautomatisscopeyangadadiparentjugaberubah,makesensekan?
Berikutinicontohdaripenjelasandiatas.Kitamasihmenggunakancontrolleryangsamadengancontohsebelumnya.
AngularJsUntukPemula
25Bab2Directive
app.controller('MainController',['$scope',function($scope){
$scope.dunia="DuniaIndonesia";
}]);
Untukdirectivedanviewadasedikitperubahan.Berikutdirectiveyangdigunakan,adatambahanpropertilinkdidalamnya(materilinkakansayajelaskanpadasubbabberikutnya).
app.directive('myDirective',function(){
return{
restrict:'EA',
template:'<h2>Hello{{dunia}}</h2>',
replace:true,
link:function(scope,elem,attrs){
elem.bind('click',function(){
scope.dunia='Sayadiklik';
scope.$digest();
});
}
};
});
MaksuddarilinkdiatasadalahketikadirectivediklikmakavariabelduniayangadapadascopeakandigantinilainyamenjadiSayadiklik.
Viewjugamengalamisedikitperubahan.Bagianatasdigunakanuntukmenampilkanvariabelduniayangadadicontroller(parent)sedangkanyangbawahuntukvariabelyangadadidirective.
<divng-controller="MainController">
<b>dunia</b>dariparentscope</br>
<h2>Hello{{dunia}}</h2>
<hr/>
<b>dunia</b>daridirectivescope</br>
<my-directive></my-directive>
</div>
Ketikadijalankanmakayangmunculadalahsepertipadagambardibawah.
AngularJsUntukPemula
26Bab2Directive
SekarangkitacobakliktulisanHelloDuniaIndonesiayangberadapadabagianbawahyaitupadabagiandirectiveyangsudahkitatambahaifungsiuntukmengubahnilaivariabelduniaketikadiklik.Makayangterjadiadalahbukanhanyatulisanyangbawahyangberubahtetapijugatulisanbagianatas.Halinisesuaipenjelasansayadiatas,karenavariabelyangdiacuadalahvariabelyangsamamakaketikaberubahsemuanyaikutberubah.
Hal–halsepertiinilahyangingindihindarikarenabisamenyebabkankekacauanjikavariabelyangadapadadirectivemengacukevariabelyangsamapadaparent-nya.Sebenarnyakitainginmengubahyangadapadadirectivesaja,ehnamunyangadapadaparentikutberubahjuga.
AngularJsUntukPemula
27Bab2Directive
Gambardiatasmenunjukkanperubahanyangterjadiketikadirectivediklik.Tampakjelasbagianparentjugaikutberubah.
2.2.1ChildScope
Childscopeadalahscopeyangmerupakanprototypedariparentscope.Artinyabentuknyasamadenganpunyaparentcumadiaitutiruannya,aliassemacamnge-copydariparent.Karenange-copyberartidiamerupakanscopeyangberbedadenganyangdimilikiolehparent.Halinimenyebabkanperubahanscopedidirectivetidakakanberpengaruhdiparent.
Untukmenggunakanchildscopekitamenggunakanpropertiscopedengannilaitruepadaobjekdirective.
AngularJsUntukPemula
28Bab2Directive
app.directive('myDirective',function(){
return{
scope:true,
restrict:'EA',
template:'<h2>Hello{{dunia}}</h2>',
replace:true,
link:function(scope,elem,attrs){
elem.bind('click',function(){
scope.dunia='Sayadiklik';
scope.$digest();
});
}
};
});
Sekarangcobajalankankembalidankliksekalilagipadadirective.Kaliiniperubahanhanyaterjadipadabagiandirective(bagiansebelahbawah).
2.2.2IsolatedScope
AngularJsUntukPemula
29Bab2Directive
Sesuaidengannamanya,isolatedscopeberartiscopeyangsifatnyaterisolasi,berlakuhanyadiareadirective,tidakmerembetsampaiparent.Kalauchildscopetaditidakmempengaruhiparentjugatetapidiabentuknyamerupakankopiandariparent,isolatedscopeharuskitadefinisikantersendiriuntukbisadigunakan.
Marikitaubahkodedirectivesebelumnyadenganmengubahscopeyangsemulachildscopemenjadiisolatedscope.Untukmendefiniskanisolatedscopekitamenggunakanpropertiscopeyangberupaobjek.
app.directive('myDirective',function(){
return{
scope:{
},
restrict:'EA',
template:'<h2>Hello{{dunia}}</h2>',
replace:true,
link:function(scope,elem,attrs){
elem.bind('click',function(){
scope.dunia='Sayadiklik';
scope.$digest();
});
}
};
});
Diataskitamembuatisolatedscopeyangbernilaikosong,nantiakankitaisidanbagaimanacontohpenggunaanya.
Sekarangcobajalankanlagicontohaplikasikita.Kaliinibagiandirectivetidakbisamembacavariabelduniayangadapadascope.Kejadianinidisebabkankarenakitamenggunakanisolatedscope,jadidirectivetidakmengenaliscopeselainyangadadiisolatedscope.
AngularJsUntukPemula
30Bab2Directive
Sekarangpertanyaannyabagaimanadirectivebisamenggunakanisolatedscope?.Mungkinpembacaakanmengira-ngiradengansepertiinidefinisikanvariabeldidalamobjekscopedankasihnilainya,sepertiberikut.
app.directive('myDirective',function(){
return{
scope:{
dunia:'HaloSayaIsolatedScope'
},
…
…
…
};
});
Namunsetelahkodediatasditulisdandieksekusimakatidakberjalansepertiyangkitainginkanhaha.Yakarenamemangbukansepertiitucaramenggunakanisolatedscope.Punmisalcaradiatasbisamakadatavariabelakanmenjadihardcode.
Subbabselanjutnyasayatulisuntukmembahasmasalahcaramelakukanbindingantaraisolatedscopedenganparentscopesehinggakitabisamenaruhsebuahnilaipadaisolatedscope.
AngularJsUntukPemula
31Bab2Directive
2.2.3BindingAntaraParentScopedenganIsolatedScope
Sepertisudahsayasinggungpadasubbabberikutnya,kitatidakbisamendefiniskanisolatedscopedenganserta-mertalangsungdiisinilanya.Akantetapi,kitabisamengisinilaiyangadapadavariabeldiisolatedscopedengannilaiyangberasaldarivariabeldiluarnya(parentscope).
Ada2carauntukmemberinilaipadaisolatedscopeyaitumenggunakan:
1. @untukonewaytextbinding2. =untuktwowaybinding
Marikitabahassatudemisatu2caradiatas.
@untukonewaytextbinding
Diberinamasepertiitukarenadengancaraininilaiyangdikirimkeisolatedscopeberasaldariparentscopetetapitidakbisaberlakukebalikan(nilaidi-isolatedscopetidakakanmempengaruhiparentscope).
Perhatikancontohdirectivedibawahini
app.directive('oneWay',function(){
return{
restrict:'E',
scope:{
title:'@'
},
template:'<h2>TitleInside:{{title}}</h2>',
link:function(scope,elem,attrs){
elem.bind('click',function(){
scope.$apply(function(){
scope.title="JavaScript";
});
});
}
};
});
NantinyakodediataskanmenampilkanpesanberupaTitleInside:{{inside}}dengannilaivariabelinsideberasaldariluar/parentscope.
KodehtmldanAngularJsdibawahinimenunjukkanbagaimanacaramengisinilaivariabeltitleyangadapadaisolatedscopeyangberasaldariparentscope.
AngularJsUntukPemula
32Bab2Directive
<divng-controller="MainController">
<inputtype="text"ng-model="title"/></br></br>
<one-waytitle="static"></one-way>
<one-waytitle="{{title}}"></one-way>
</div>
Tampilanawalketikadijalankansudahbisapembacatebak?,cobacocokkanperkiraanpembacadenganscreenshotberikutini.
DirectivepertamaakanmenghasilkanteksTitleInside:statickarenapadadirectiveinikitamem-passingnilaikevariabelinsidedengannilaistatic.
<one-waytitle="static"></one-way>
Sedangkandirectivekeduaakankosongkarenanilaiyangkitapassingadalahberupateksyangdidapatdarivariabeltitleyangpadasaatawaltidakbernilai.
Sekarangcobaisiinputteksyangadadengankataapapun,makadirectiveakanikutberubah.
AngularJsUntukPemula
33Bab2Directive
Ngomong-ngomong,jikamenggunakan@untukmem-passingvariabelmakayangbisadi-passinghanyalahstring,itumengapakitamenggunakanekspresi{{title}}saatmem-passingvariabeltitle.
<one-waytitle="{{title}}"></one-way>
Terusmasalahoneway-nyasudahsayajelaskanpadabagianparentscopedanisolatedscopedya.UntukmencobanyasilahkanklikpadakeduadirectivemakatitleakanberubahmenjadiJavaScipttetapivariabelpadatitleyangadapadainputantekstidakberubah.
AngularJsUntukPemula
34Bab2Directive
=untuktwowaybinding
Perbedaandenganmenggunakan@adalah
1. Yangdi-passingberupaobjectbukanstring2. Perubahanscopediparentberpengaruhkechilddanberlakusebaliknya
Denganmenggunakancontohkodingyangmasihsamakitahanyaperlumenggantitandadari@menjadi=
AngularJsUntukPemula
35Bab2Directive
app.directive('oneWay',function(){
return{
restrict:'E',
scope:{
title:'='
},
template:'<h2>TitleInside:{{title}}</h2>',
link:function(scope,elem,attrs){
elem.bind('click',function(){
scope.$apply(function(){
scope.title="JavaScript";
});
});
}
};
});
Selainitukitatidaklagimenggunakanekspresi({{var}})saatmem-passingsebuahnilai.PerhatikancontohdibawahinipadaHTML-nya.
<divng-controller="MainController">
<inputtype="text"ng-model="title"/></br></br>
<one-waytitle="title"></one-way>
</div>
Ketikadiklikparentakanikutberubah
AngularJsUntukPemula
36Bab2Directive
2.3linkfunctionPembacapastisudahberkali-kalimelihatdaribeberapacontohdiatasterdapatpropertilinkpadadirectiveyangberupafungsi.Sayajugayakinpembacasudahmengertiapakegunaannya.
linkdigunakanuntukmelakukanutilisasiterhadapscope.Bahasagampangnya,kalaumaungapa-ngapainscopemisalmengubahnilainyayagunakanlink.
linkmemiliki3buahparameteryaitu:
1. scope–scopeyangadapadadirective2. elem–elemendaridirective,digunakanuntukmanipulasiDOM3. attrs–attributedaridirective
Jikamaumengubahnilaivariabelpadascopemakagunakanparameterscopeuntukmengubahnya,misaladavariabeldengannamatitleyangingindiubahmakakodeberikutdiperlukan.
scope.title="Nilaibaru";
AngularJsUntukPemula
37Bab2Directive
Nilaiscopetidakakanberubahkalautidakadaapa-apa.Masaiyatiba-tibanilaibisaberubah?Pastitidakkan?.Palingsering,suatunilaiberubahpadasaatadaeventklik.Untukmengakomodasihalsepertiitudigunakanlahparameterelem.
Misalkitainginmemberinilaibarupadatitleketikaadaklikpadadirective,makagunakanelemsupayabereaksiketikadiklik.elemadalahjQLite(subsetdarijQuery)jadicarapenggunaanyasamasajadenganjQueryuntukmelakukanmanipulasiDOM.
link:function(scope,elem,attrs){
elem.bind('click',function(){
scope.$apply(function(){
scope.title="Nilaibaru";
});
});
}
Clickadalahhanyasebagiandarieventyangbisadigunakandisini,untukeventapasajayangadasilahkanmerujukkedokumentasiresmidarijQueryataugoogling.
Diperhatikansecaraseksamamakapembacaakanmenemukankodeyangsedikitanehyaituadanyascope.$apply,apakegunaannya?Sabarduluyanantipadababmendatangakansayabahasjuga.Pokoknyauntuksekarangcukuptahukegunaandarilinkdancaramenggunakanparameter-parameteryangdimilikinya:)
2.4DemoDirectiveSetelahmelewatiperjalananyangcukupmenyitaenergiuntukbelajardirectivemelaluisubbab–subbabsebelumnya,yoksekarangmarikitacobauntukmengimplementasikanapayangtelahkitapelajaridenganmembuatsebuahdirectiveyangpantasdigunakandirealworldproject.
Tujuanutamadaridirectiveyangakankitabuatadalahuntukmenampilkandatatertentudalambentuktabelyangbisadigunakanberulangkali.DiASP.NEThalsepertiinidisebutpartialview.DiRubyonRailsdisebutpartialrender.
LangkahpertamasepertibiasabuatmoduledanpasangdiHTML-nyadankemudianbuatcontrollerdanjugapasangdiHTML.Janganlupauntukmenyertakanfile.js.
varapp=angular.module('MyApp',[]);
AngularJsUntukPemula
38Bab2Directive
<!DOCTYPEhtml>
<html>
<head>
<title>DemoLatihanDirective</title>
</head>
<bodyng-app="MyApp">
<divng-controller="MainController">
{{judul}}
<hr/>
</div>
<scriptsrc="js/angular.min.js"></script>
<scriptsrc="js/app.js"></script>
<scriptsrc="js/controllers/MainController.js"></script>
<scriptsrc="js/directives/AgsTable.js"></script>
</body>
</html>
Berikutadalahkodeawalyangadadicontroller.
app.controller('MainController',['$scope',function($scope){
$scope.judul='DemoPenggunaanAngularJsDirective';
}]);
JalankanpadabrowserdanpastikantulisanDemoPenggunaanAngularJsDirectivemuncul.
LangkahselanjutnyaadalahmembuatdirectiveyangmenggunakantemplateberupafileHTML.
PERHATIAN,untukbisamenggunakantemplateyangberupahalamanHTML,kitaharusmenjalankanaplikasiAngularJsmelaluiwebserver,semisalApache.
Kodedibawahinimerupakandirectivekita.
app.directive('agsTable',function(){
return{
restrict:'E',
scope:{
books:'='
},
templateUrl:'js/directives/AgsTable.html'
};
});
AdapaunfileHTMLyangkitajadikansebagaitemplateyangbisadigunakanberulangkalibisadilihatdibawahini.
AngularJsUntukPemula
39Bab2Directive
<head>
<styletype="text/css">
.table{
border-collapse:collapse;
}
tr,td,th{
border:1pxsolid#000;
padding:5px;
}
td{
width:300px;
}
.number{
text-align:right;
}
</style>
</head>
<tableclass="table">
<tr>
<th>Judul</th>
<th>Penulis</th>
<th>Rating</th>
</tr>
<trng-repeat="binbooks">
<td>{{b.judul}}</td>
<td>{{b.penulis}}</td>
<tdclass="number">{{b.rating}}</td>
</tr>
</table>
Kembalilagikecontroller.Tambahkansebuahvariabelbernamabooksyangmenampungdatabeberapabuku,usahakanminimal3ya.
AngularJsUntukPemula
40Bab2Directive
app.controller('MainController',['$scope',function($scope){
$scope.judul='DemoPenggunaanAngularJsDirective';
$scope.books=[
{
'judul':'Ayah',
'penulis':'AndreaHirata',
'rating':4
},
{
'judul':'Eragon',
'penulis':'ChristoperPaolini',
'rating':3
},
{
'judul':'Blink',
'penulis':'MalcolmGladwell',
'rating':3
},
];
}]);
Sipkalaubisamengikutisampaisini.Langkahterakhiradalahmemasukkandatabooksyangadadicontrollerkedalamdirective.Pastibisadong?,kalaubelumbisacobapahamilagipadasubbabsebelumnya.Kalausudahyakinbisacobacocokkandengankodeberikutini.
<divng-controller="MainController">
{{judul}}
<hr/>
<ags-tablebooks="books"></ags-table>
</div>
Jikapembacabingungmengikutibagaimanastrukturfoldernya,dibawahinisayasertakanstrukturfolderdaripekerjaandiatas.
AngularJsUntukPemula
41Bab2Directive
Selesaisudahutak-atikkitauntukmembuatdirective.Bukafileindex.htmldibrowsermakaseharusnyayangpembacalihatadalahsepertipadagambardibawah.
AngularJsUntukPemula
42Bab2Directive
Manfaatdaripenggunaandirectiveiniadalahjikapadabagianlaindariaplikasikitainginmenampilkandatabukuyangmemilikiformatyangsamadenganisiyangberbedamakakitatinggalmenggantiscopebooksdengandatayanglain.Misalnyagini,dihalamandepandimunculkanbuku-bukuyangbaruterbit,sedangkandihalamanlaindimunculkanbuku-bukuyangmendudukirangking1–10.
AngularJsUntukPemula
43Bab2Directive
SampaisinimakaberakhirsudahpelajarankitamengenaidirectivepadaAngularJs.Sayayakinpastimasihbanyakhalyangharusdipelajarilebihlanjutdidirective.Marisama-samaterusbelajar:)
AngularJsUntukPemula
44Bab2Directive
Bab3ServiceMateriyangdipelajaripadababini:
ValueFactoryServiceProviderConstant
Ketikaaplikasiyangkitakembangkanmerupakanaplikasiyangbesar,makaakanlebihbaikjikakitamemecah-mecahnyamenjadibagianyangterpisahyangmemilikifungsimasing-masing.Tujuanpemecahaninisupayakodemenjadirapi,tidaktumplekblekmenjadisatudicontrolleryangsangatmembingungkan.UntukkeperluaniniAngularJsmenyediakan2buahsenjata:dependencyinjectiondanservice.
3.1ValueValuediAngularJsdigunakansebagaisemacamdictionaryyangberisikey/kuncidanvalue/nilai.Nilaiyangdigunakanbisaberupatipedataapasaja,string,angkamaupunobject.Valueininantinyadi-injectbaikkecontroller,factory,maupunservicetergantungkebutuhan.
SebuahValuemerupakanbagiandarimodule,jadiuntukmembuatnyakitamenggunakanmethodvaluepadamodule.
varapp=angular.module('MyApp',[]);
app.value('string','BelajarAngularJsService');
app.value('number',100);
app.value('object',{'title':'AngularJsService','desc':'Belajar'})
Padakodediatas,parameterpertamaadalahnamadarivaluedanparameterkeduaadalahisinya.Setelahmendefiniskanvalue,kitabisameng-inject-nyadicontroller.
app.controller('MainController',['$scope','string',function($scope,string){
console.log(string);
}]);
Cekhasilnyapadaconsoledibrowser.
AngularJsUntukPemula
45Bab3Service
Variabelstringyangdi-injectpadakodediatasadalahberasaldarivalueyangjugabernamastringyangberisiBelajarAngularJsService.Namakeduanyaharuspersissamaketikadigunakan.
3.2FactoryJikaValueterlihatkokgitudoangya?makapembacapastiakanmerasasenangjikasudahberkenalandenganfactory.
Berbedadenganvalueyangnilainyadi-hardcodesehinggatidakbersifatdinamismakafactorybisamemberikannilaiyangdinamis.Yangperludiingatdarifactoryadalah,saatdi-injectnanti,yangdi-injectbukanlahfactoryitusendiritetapinilaiyangdikembalikanolehnya.
Factoryjugadibuatdimodule,kaliinimenggunakanmethodyangbernamafactory.
varapp=angular.module('MyApp',[]);
app.factory('myFactory',function(){
return'BerasaldaridalamFactory';
});
Carameng-inject-nyasamapersisdenganvalue,perhatikankodedibawahinisebagaireferensi.
app.controller('MainController',['$scope','myFactory',function($scope,myFactory){
console.log(myFactory);
}]);
SamadenganValue,namayangdi-injectjugasamadengannamafactoryyangkitadefinisikansaatpembuatannya.Cekhasilnyapadaconsolebrowser.
Kurangaplikatifyacontohnya?.Okeyangagakmendingansayaberikancontohfactoryuntukaplikasikalkulator.
Kalkulatormemiliki4operasidasar:tambah,kurang,kali,bagi.Tentusudahterpikirkanbahwanilaiinputanharusbersifatdinamisyangartinyaberartikitamemerlukanparameteruntukmenanganihalyangbersifatdinamistersebut.Pertanyaanya,bisakahfactorymenerimaparameter?.
Jawabandaripertanyaandiatasadalahbisa,denganmemahamibahwayangdi-injectadalahnilaikembaliandarifactory,bukanfactoryitusendirimakakitabisamembuatsebuahfactorysepertidibawahini.
AngularJsUntukPemula
46Bab3Service
varapp=angular.module('MyApp',[]);
app.factory('KalkulatorFactory',function(){
varkalkulator={};
kalkulator.tambah=function(angkaA,angkaB){
returnparseInt(angkaA)+parseInt(angkaB);
};
kalkulator.kurang=function(angkaA,angkaB){
returnangkaA-angkaB;
};
kalkulator.kali=function(angkaA,angkaB){
returnangkaA*angkaB;
};
kalkulator.bagi=function(angkaA,angkaB){
returnangkaA/angkaB;
};
returnkalkulator;
});
Padabagianpalingawaldarifactoryterdapatkodevarkalkulator={};.Kodeinidigunakanuntukmembuatsebuahobjekyangbernamakalkulator.Kodeberikutnyaberturut-turutadalahke-4operasidasarkalkulatoryangberupafungsiyangdimilikiolehobjekkalkulatortadi.Padabagianakhirobjekkalkulatordijadikannilaikembalianolehfactory.Denganobjekkalkulatordijadikansebagainilaikembalianmakanantikitabisamenggunakaannyauntukmelakukanke-4operasidasar.Itulahmengapasayatekankandariawaluntukmemahamibahwapadafactoryyangdi-injectadalahnilaikembaliannya.
Halamanviewkitabuatsebagaijalanbagipenggunauntukmemasukkanangkadanmemilihoperasimatematikaapayangakandigunakan.
AngularJsUntukPemula
47Bab3Service
<divng-controller="MainController">
{{title}}
<hr/>
Angka1:<inputtype="text"ng-model="angkaA"></br>
Angka2:<inputtype="text"ng-model="angkaB"></br>
Hasil:{{hasil}}
</br>
</br>
<buttonng-click="penambahan()">+</button>
<buttonng-click="pengurangan()">-</button>
<buttonng-click="perkalian()">*</button>
<buttonng-click="pembagian()">/</button>
</div>
Danterakhir,bagianyangpentingadalahdi-controller,bagaimanacarakitamenggunakanfactoryuntukmelakukanoperasimatematika.
app.controller('MainController',['$scope','KalkulatorFactory',function($scope,KalkulatorFactory){
$scope.title='KalkulatorFactory';
$scope.penambahan=function(){
$scope.hasil=KalkulatorFactory.tambah($scope.angkaA,$scope.angkaB);
}
$scope.pengurangan=function(){
$scope.hasil=KalkulatorFactory.kurang($scope.angkaA,$scope.angkaB);
}
$scope.perkalian=function(){
$scope.hasil=KalkulatorFactory.kali($scope.angkaA,$scope.angkaB);
}
$scope.pembagian=function(){
$scope.hasil=KalkulatorFactory.bagi($scope.angkaA,$scope.angkaB);
}
}]);
Sepertisudahselazimnya,kitameng-injectfactorykedalamcontrollerdengancaramem-passingnamafactorydidalamparameterfungsi.Selanjutnya,karenanilaikembaliandarifactoryadalahobjekkalkulatoryangmemiliki4buahmethod,makakitabisamemanggil4buahmethodtersebutdidalamcontroller.
Cobajalankandibrowser,masukkanangkapadatextboxdantekansalahsatutomboloperasi.Pastikankodepembacasudahberjalandenganbenar.
AngularJsUntukPemula
48Bab3Service
3.3ServicePendekarketigakitaadalahservice.Kalausayabilang,serviceinimiripdenganfactory.Perbedaanantarakeduanyaadalah,jikapadafactoryyangdi-injectadalahnilaikembaliandarifactorymakapadaserviceyangdi-injectadalahserviceitusendiri.
Servicebekerjapadamoduledenganmenggunakanmethodservice.
varapp=angular.module('MyApp',[]);
app.service('myService',function(){
this.methodA=function(){
...
}
this.methodB=function(){
...
}
});
AngularJsUntukPemula
49Bab3Service
Denganmasihmenggunakanaplikasikalkulatorsebagaicontoh,makakitaubahoperasimatematikayangtadinyamenggunakanfactorymenjadimenggunakanservice.
varapp=angular.module('MyApp',[]);
app.service('KalkulatorService',function(){
this.tambah=function(angkaA,angkaB){
returnparseInt(angkaA)+parseInt(angkaB);
};
this.kurang=function(angkaA,angkaB){
returnangkaA-angkaB;
};
this.kali=function(angkaA,angkaB){
returnangkaA*angkaB;
};
this.bagi=function(angkaA,angkaB){
returnangkaA/angkaB;
};
});
Padabagianviewsamasekalitidakadaperubahan.Padacontrollertinggalubahyangtadinyanamafactorykitamenjadinamaservicekita,sebagaiberikutkodenya.
app.controller('MainController',['$scope','KalkulatorService',function($scope,KalkulatorService){
$scope.title='KalkulatorService';
$scope.penambahan=function(){
$scope.hasil=KalkulatorService.tambah($scope.angkaA,$scope.angkaB);
}
$scope.pengurangan=function(){
$scope.hasil=KalkulatorService.kurang($scope.angkaA,$scope.angkaB);
}
$scope.perkalian=function(){
$scope.hasil=KalkulatorService.kali($scope.angkaA,$scope.angkaB);
}
$scope.pembagian=function(){
$scope.hasil=KalkulatorService.bagi($scope.angkaA,$scope.angkaB);
}
}]);
AngularJsUntukPemula
50Bab3Service
Padakodediataskitayangpertamakitalakukanadalahmeng-injectKalkulatorService.Karenaservicekitainimemangsudahberupaobjekdarisananyamakakitabisamenggunakannyauntukmemanggilmethod-methodyangdimiliki.
Padabagianbelakang,yangdilakukanolehAngularJsadalahmelakukaninstantiasidariKalkulatorService.
vartheService=newKalkulatorService();
Jalankanpadabrowserdanpastikankalkulatorberjalandenganbenar,tidakadaerroryangterjadi.
3.4ContohServiceHttpBagianinimemuatcontohpenggunaanserviceyangmemanfaatkankomponen$httppadaAngularJsuntukmengambildatajsonyangberasaldariWebAPI.NilaibalikanjsontersebutakankitatampilkanmelaluiAngularJs.
Kalaurasanyadaritadicontohserviceyangsayaberikanterkesankurangaplikatifmakacontohkaliinisayajaminpastidigunakandidunianyata.Penggunaan$httpuntukberkomunikasidenganWebAPIdigunakanjikakitamembangunaplikasiyangberhubungandengandata.
Langkahpertamapastisudahhafalya,membuatmoduldancontrollerkemudianpasangpadafileview.Janganlupauntukmemasukkanfile.jspadahalamanHtml.
varapp=angular.module('MyApp',[]);
app.controller('MainController',['$scope',function($scope){
$scope.title="AngularJsHttpService";
}]);
<bodyng-app="MyApp">
<divng-controller="MainController">
{{title}}
<hr/>
</div>
</body>
Selanjutnyakitabuatserviceyangmenggunakan$http.Ketikkankodedibawahini.
AngularJsUntukPemula
51Bab3Service
app.service('UsersService',['$http',function($http){
this.index=function(){
return$http.get('http://jsonplaceholder.typicode.com/users');
}
}]);
Padaservicediatas,kitamelakukaninjeksikomponen$httpsehinggabisadigunakandidalamservice.Salahsatumethodyangdimilikioleh$httpadalahget,digunakanuntukmengambildatayangterletakpadaendpointtertentu,dalamcontohdiatasadalahhttp://jsonplaceholder.typicode.com/users.
Kembalikebagiancontroller.Ubahcontrollersupayaservicediatasbisadigunakandanpanggilmethodindexuntukmengambildatayangberadapadaresourceserver.
app.controller('MainController',['$scope','UsersService',function($scope,UsersService){
$scope.title="AngularJsHttpService";
UsersService.index().success(function(data){
$scope.users=data;
});
}]);
Apayangterjadidiatasadalahkitamelakukaninjeksiservicekedalamcontroller.SelanjutnyaservicememanggilmethodyangdimilikiyaituindexuntukmengambildatadariWebAPI.Ketikaberhasil/success,datayangdiperolehdimasukkankedalamvariabelyangbernamausers.
KalausudahsampaisinisihsayarasapembacasudahtahubagaimanacaramenampilkandatadariWebAPItadikeview-nya.
AngularJsUntukPemula
52Bab3Service
<divng-controller="MainController">
{{title}}
<hr/>
<table>
<tr>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Website</th>
<th>Company</th>
</tr>
<trng-repeat="uinusers">
<td>{{u.name}}</td>
<td>{{u.username}}</td>
<td>{{u.email}}</td>
<td>{{u.website}}</td>
<td>{{u.company.name}}</td>
</tr>
</table>
</div>
UntukHttpmethodyanglainsepertiPOST,DELETEdanPUTpenggunaannyahampirsama,nantiakansayaperlihatkancontohnyapadababyangmembahasstudikasus.
AngularJsUntukPemula
53Bab3Service
Bab4RouteMateriyangdipelajaripadababini:
RouteProviderRouteParam
Suatuaplikasiyangbergunasangatjarangataubahkantidakadayanghanyamemilikisatuhalamantanpaadanyahalamanyanglain.Khususuntukaplikasiweb,halaman–halamanyangsatuberkolaborasidenganhalamanmelaluiperantarasebuahlink.
Berbedadenganaplikasiwebpadaumumnyadimanaketikasebuahlinkdiklikdanberpindahkehalamanlainyangterjadiadalahadanyaprosesreload,makajikamenggunakanAngularJs,transisiakanterasasmoothtanpaadanyaprosesreload.
4.1RouteProviderRouteprovideradalahkomponenpadaAngularJsyangdigunakanuntukmengkonfigurasirouteyangadapadaaplikasikita.Apasajayangdikonfigurasi?SebelumsayamenjawabnyasayaperlumemperlihatkankepadapembacacontohurldariaplikasiAngularJsyangmemilikiroute.
http://sample.com/index.html#books
http://sample.com/index.html#authors
http://sample.com/index.html#books/123
Url–urldiatasmengaksesaplikasiyangsamatetapimemilikirouteyangberbeda.Routeditandaidenganadanyatanda#.Dibelakangtanda#tersebutadalahroute-nya.
Balikkepertanyaantadi,apasajayangdikonfigurasimenggunakanrouteprovider?.Ada2halyangdikonfigurasi,yaitu:
1. Templateyangakanditampikan2. Controlleryangbekerjapadatemplateyangditampilkan
Langsungkecontohsajayabiarpahammaksudnyabagaimanadancaramenggunakannyasepertiapa.Kasusnyamisalkitainginmembuat3buahhalamanyaituhome,aboutdancontact.Masing–masinghalamanmemilikikontenyangberbedasatusamalain.Marilangsungkitaterjunkekoding.
AngularJsUntukPemula
54Bab4Route
Dibawahiniadalahstrukturakhirdarifolderdanfiledaricontohyangakankitakerjakan.Jikaditengahjalannantipembacamerasabingungdenganpeletakanfoldersertafilemakabisamerujukkegambarini.
Buatsebuahmoduldidalamfileapp.jssepertiyangsudah-sudah.Akantetapi,kaliiniadasedikitperbedaan,cobalihatperbedaannyadimana.
varapp=angular.module('AngularRouteApp',['ngRoute']);
Perbedaannyaterletakpadaapayangadadidalamtandakurungkurawal,yaituadanyangRouteyangmerupakanmoduluntukrouteyangmemangdibuatterpisahdarimodulutamaAngularJs.Untukbisamenggunakanroutekitaharusmemuatnyakedalammodulyangkitabuat.
Selanjutnyabuat3buahcontrolleryangterletakdidalamfoldercontrollers,masing-masingadalahHomeController,AboutController,danContactController.
AngularJsUntukPemula
55Bab4Route
app.controller('HomeController',['$scope',function($scope){
$scope.title='Home';
$scope.message='MynameisAgungSetiawanandIamaSoftwareEngineer';
}]);
app.controller('AboutController',['$scope',function($scope){
$scope.title='About';
$scope.message='MIhavevariouskindofexperiencedevelopingsoftware';
$scope.technologies=['C#','ASP.NETMVC','LINQ','EntityFramework','SQL','GIT','Ruby','RubyonRails'];
}]);
app.controller('ContactController',['$scope',function($scope){
$scope.title='Contact';
$scope.contacts=['[email protected]','@agungsetiawanmu','http://agung-setiawan.com'];
}]);
Darimasing-masingcontrollerdiataskitabuatkanhalamanhtml-nyayangterletakdidalamfolderpages.PertamaadalahhalamanatautemplateuntukHomeController.
<h3>{{title}}</h3>
{{message}}
KemudiantemplateuntukAboutController
<h3>{{title}}</h3>
{{message}}
<ulng-repeat='tintechnologies'>
<li>{{t}}</li>
<ul>
DanterakhiradalahtemplateuntukContactController.
<h3>{{title}}</h3>
<ulng-repeat='cincontacts'>
<li>{{c}}</li>
<ul>
AngularJsUntukPemula
56Bab4Route
Nahkarenacontrollersudahsiapdantemplatejugasudahsiapmakasekarangsaatnyakitamelakukankonfigurasiuntukroute.Sepertiyangsudahsayakatakandiawalbabbahwayangperludikonfigurasiadalahcontrolleryangmanadantemplateyangmanayangakandipilihketikarouteyangsedangdiaksesadalahyangini.
KarenakitasudahmemuatmodulngRoutekedalammoduldariaplikasikitamakakitamemilikiaksesuntukmenggunakan$routeProvider.Komponeninilahyangkitagunakanuntukmelakukankonfigurasi.
Padafileroute.jsketikkankodedibawahiniyangberperanmengaturroutepadaaplikasiAngularkita.
app.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl:'pages/home.html',
controller:'HomeController'
})
.when('/about',{
templateUrl:'pages/about.html',
controller:'AboutController'
})
.when('/contact',{
templateUrl:'pages/contact.html',
controller:'ContactController'
})
.otherwise({
redirectTo:'/'
})
});
Tanpamembutuhkanpenjelasanyangcanggih,kodediatassudahmenjelaskandirinyasendiri,istilahkerennyaselfexplanatory.
Methodwhendigunakanuntukmengaturketikarouteyangadapadaurlbernilaixmakacontrollerdantemplateyangdigunakanadalahydanz.Sudahhanyasesederhanaitu.Padakodediatasberartiketikaurlyangdiaksesadalahhttp://xxx/#/aboutmakacontrolleryangbekerjaadalahAboutControllerdantemplateyangdigunakanadalahabout.html.
Selainwhenadasatulagipadakodediatasyaituotherwiseyangdigunakanuntukmenanganiroute-routeyangtidakdikenal.Jikaadarouteyangtidakdikenalmakamethodiniyangdigunakan.Padakodediatasjikaadaroutetidakdikenalmakaakandialihkankerooturl.
Baginterakhiradalahmembuathalamanutamayangakanmemuatsemuacontrollersertatemplateketikaroutebernilaisesuai.Padafileindex.htmlketikkankodehtmlberikutini.
AngularJsUntukPemula
57Bab4Route
<!DOCTYPEhtml>
<html>
<head>
<title>AngularJsRoute</title>
<scriptsrc='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>
<scriptsrc='https://code.angularjs.org/1.4.7/angular-route.min.js'></script>
</head>
<bodyng-app='AngularRouteApp'>
<ahref='#/'/>Home</a>
<ahref='#/about'/>About</a>
<ahref='#/contact'/>Contact</a>
<div>
<divng-view></div>
</div>
<scriptsrc='js/app.js'></script>
<scriptsrc='js/route.js'></script>
<scriptsrc='js/controllers/HomeController.js'></script>
<scriptsrc='js/controllers/AboutController.js'></script>
<scriptsrc='js/controllers/ContactController.js'></script>
</body>
</html>
Bentukhtml-nyamasihmiripdenganyangsebelum–sebelumnya,hanyaada2tambahanyangbaru.Tambahanpertamaadalahkitamemuatfileangular-route.min.js.FileinilahyangdidalamnyaterdapatmodulngRoute.Tambahankeduaadalahpenggunaandirectiveng-viewyangdigunakansebagaiplaceholderuntuktemplateyangakandimuatsesuaidenganroute.
Pentinguntukdiperhatikan.Pembacaharusmenjalankankode-kodediataspadasebuahwebserversepertisebelumnyapadababyangmembahasdirective.Jikatidak,makanakanterjadierror.
Setelahbisadijalankansilahkannikmatiperpindahanantarhalamanyangterasasangatsmooth.
Berikutdibawahadalahscreenshot-nya.
AngularJsUntukPemula
58Bab4Route
4.2RouteParamsKomponenyangsatuinidigunakanuntukmenangkapparameteryangadadiurl.Kalaupembacasudahpernahmenggunakanbahasapemrogramanyangbekerjadisisiserverpastitidakasingdenganyangdimaksudurlparameter.
Padacontohurl-urlyangmemilikiroutepadasubbab4.1sebelumnyasayamenyertakansatuyangmemilikiparameteryaitu
http://sample.com/index.html#books/123
Angka123adalahparameter.Denganadanyaparameterinikitabisamengambilnilai123untukkemudianmenggunakannyauntukkepentinganaplikasikita,misalnyamengambildatabukuyangmemilikiidsamadengan123.Sekalilagi,jikapembacasudahpernahngodingaplikasiwebpastisangatpahamdengankonsepini.
Kembalikitaterjunkekodingsupayapahamcaramengambilnilaiparameteryangadapadaurl.Contohkodeyangakandikerjakanlanjutandarikodesebelumnyasajaya.
BuatsebuahcontrollerbarudengannamaParamControllerdandibawahiniadalahkodenya.
AngularJsUntukPemula
61Bab4Route
app.controller('ParamController',['$scope','$routeParams',function($scope,$routeParams){
$scope.title='Parametes';
$scope.param=$routeParams.theparam;
}]);
Dibagiancontrolleriniadasebuahkomponenbaruyangdi-injectyaitu$routeParamsyangdigunakanuntukmengambilnilaiparameteryangadadiurl.Padabagianisiadakodesepertiini
$scope.param=$routeParams.theparam;
Darimanabagiantheparamdidapatkan?Jawabannyaadalahadapadabagiankonfigurasiroute.Padakonfigurasiyangsudahadatambahkanroutebarusebagaiberikut.
when('/param/:theparam',{
templateUrl:'pages/param.html',
controller:'ParamController'
})
Padakonfigruasiroutekitamendefiniskannamaparameteryangakandiambilmelaluicontroller,padakodediatasnamaparameternyaadalahtheparam.Padakeduabagianitunamaharussama,jikadikonfigurasinamanyaadalahparamsayamakapadacontrollerjugaharusparamsaya.Sudahjelasbukansekarang?
Selanjutnyamembuattemplateyangakanditampilkan.
<h3>{{title}}</h3>
Theparameteris{{param}}
Danlangkahterakhiradalahmenambahkanlinkuntukmenujuhalamanparameterdanmenambahkanfilecontrollerbarupadafileindex.html.
…
<ahref='#/param/agung'>Param</a>
…
…
…
<scriptsrc='js/controllers/ParamController.js'></script>
…
Cobaakseslinkbarutersebutdandibawahiniadalahhasilnya.
AngularJsUntukPemula
62Bab4Route
Bab5$watch,$digestdan$applySudahkitapelajaribersamapadabab–babawalbahwaketikaadaperubahannilaipadaviewmakaperubahanjugaakanterjadipadascopeyangadadicontrollerdanbegitujugasebaliknyaketikanilaiscopedicontrollerberubahmakaperubahanpadaviewpunakanterjadijuga.
KemampuanAngularuntukmelakukanhal–haltersebutberhubungandenganmethod–methodyangdimiliknyayaitu$watch,$digestdan$apply.Secaraumum,$watchdan$digestakandijalankansecaraautomatisolehAngularuntukmemperbaharuinilaitetapiadakondisidimanakitaharusmenggunakannyasecaramanualuntukmengupdatenilai.
5.1$watch$watchberfungsiuntukmengawasiperubahannilaiyangterjadipadasebuahvariabeldiscope.Parameterpertamadarimethodiniadalahstringdarinamavariabelyangakandiawasikemudianparameterkeduaadalahberupafungsiyangakandijalankan(listener)ketikanilaiyangdiawasiberubah.
Sayasertakanpotongankodecontohdibawahiniuntukmemahamicarakerja$watch.
<bodyng-app='AngularWatchApp'ng-controller='MainController'>
<inputtype='text'ng-model='book'/>
<div>
{{book}}
</div>
<div>
Bookhasbeenchanged{{count}}times.
</div>
<!--include.jshere-–!>
</body>
Halamandiatasakanmemunculkanteksmasukanyangnilainyalangsungdimunculkandibawahnya.Kitaakanmemunculkanangkaberapakalinilaisudahdiubahdenganmenggunakan$watch.Padacontrollerberikutadalahkodenya.
AngularJsUntukPemula
64Bab5$watch,$digestdan$apply
app.controller('MainController',function($scope){
$scope.book='ZerotoOne';
$scope.count=0;
$scope.$watch('book',function(newValue,oldValue){
$scope.count=$scope.count+1;
})
});
Cobajalankandanubahnilaiyangadapadateksmasukanmakasetiapperubahanyangterjadiakanmembuatnilaidaricounterbertambah.
5.2$digestMethodinibekerjadengancaraberkelilingkesemuawatchyangada.Ketikaberkelilingnyamperintiapwatch,diangecekapakahnilaiyangdiawasisiwatchiniberubahatautidak,jikaberubahmakadiamanggilfungsiyangjadiparameterkeduadarisiwatch(fungsilistener).
Adasuatukasusdimanakitaharusmemanggil$digestsupayanilaidarivariabelbisaterupdate.Padakasustertentusaatmelakukanprosesdatabindingadadataterbaruyangtidakterupdatemakakondisisepertiinibiasanyakarena$digesttidakjalansecaraautomatisdankitaharusmenjalankannyasecaramanual.
link:function(scope,elem,attrs){
elem.bind('click',function(){
scope.dunia='Sayadiklik';
scope.$digest();
});
}
Contohkodediatassayaambildarikodesaatkitabelajarbersamamateridirective.Cobajalankankodeyangadapadamateritersebuttetapidenganmenghilangkanbarisscope.$digest()makavariabelduniayangberisisayadikliktidakakanmunculdi-view.Haliniterjadikarena$digesttidakjalankarenakodeiniberadadiluarjangkauanlangsungdari$scopeyangadadicontroller.
5.3$apply
AngularJsUntukPemula
65Bab5$watch,$digestdan$apply
Kalausayabilangmethodinimerupakanpenyederhanaandaripenggunaan$digest.$applymenjalankanfungsiyangmenjadiparameternyakemudiansecaraautomatisdiaakanmenjalankan$digest.Denganpengertianinimakakodesebelumnyabisadiubahmenjadisepertiini.
link:function(scope,elem,attrs){
elem.bind('click',function(){
scope.$apply(function(){
scope.dunia='Sayadiklik';
});
});
}
AngularJsUntukPemula
66Bab5$watch,$digestdan$apply
Bab6ContohAplikasiCRUDMenggunakanWebAPIComingsoonya,staytuned;)
Aplikasicontohnyasudahjadi,webapi-nyapunsudahjadi.Masihperluwaktuuntukmenuliskannyadibukuinijadikalimatyangenakdipahami.
Sebagaiiming-imingmakasayasertakanbeberapascreenshotcontohaplikasinya.
AngularJsUntukPemula
67Bab6ContohAplikasiCRUDMenggunakanWebAPI