table of contents - ilhamcc.files.wordpress.com · idenya sangat sederhana namun akan membuat kita...

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].


3Introduction

http://agung-setiawan.com


4Introduction

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


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/app.js"></script>

<scriptsrc="js/controllers/MainController.js"></script>

</body>

</html>

9. Jalankanindex.htmlpadabrowser.


6Bab1Dasar-Dasar

AplikasiAngularJsyangpalingsederhana(sepertidiatas)terdiridari1moduldan1controller.Apayangadapadafileapp.jsadalahmodulsedangkanapayangadapadafileMainController.jsadalahcontroller.

SupayaHTMLtahumodulapadancontrollerapayangdigunakankitaperlumemberitahunyadenganmenggunakandirectiveng-appuntukmoduldanng-controlleruntukcontroller.

Kalaupembacasudahbenarmelakukanlangkah-langkahdiatasmakahasilyangmunculpadabrowserseharusnyaadalahsepertigambarberikut.

Sekarangcobaubahvariabeltitleyangadapadacontrollerdengankalimatsesukapembacadankemudianrefreshbrowserdanlihatperubahanyangterjadi.

Hallainyangpatutdicobaadalahmenambahkanvariabelbarudankemudiancobadimunculkanpadaview.

Peubahanpadacontroller


7Bab1Dasar-Dasar



$scope.book={

title:'BelajarAngularJsBersamaAgungSetiawan',

author:'AgungSetiawan',

price:80000

};

}]);

Perubahanpadaview


{{title}}</br>

{{book.title}}</br>

{{book.author}}</br>

{{book.price}}

</div>

SampaisinikitasudahbelajarhalpalingdasaruntukmemahamiAngularJs.

1.3Workflow


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.


{{title}}</br>

{{book.title}}</br>


{{book.price|currency}}

</div>

Penggunaanfiltersangatmenyenangkansepertibisadilihatpadalistingkodediatas.Kitamenambahkansebuahtandapipeline(|)dibelakangvariabelyanginginkitafilterkemudiandiikutidenganfilteryangkitagunakan.Setelahlakukanperubahandenganmenambahkanfiltercobajalankanpadabrowser.


9Bab1Dasar-Dasar

Adajugafilterlainyangbisadigunakanmisalnyadateuntukmengaturformattanggal.Sebelumnyatambahkanterlebihdahuluvariabelbarudicontroller.



$scope.book={



price:80000,

pubdate:newDate('2015','09',01'')

};

}]);

Tampilkanvariabelbarutersebutkedalamview.


{{title}}</br>

{{book.title}}</br>


{{book.price|currency}}</br>

{{book.pubdate|date}}

</div>


10Bab1Dasar-Dasar

Ngomong-ngomongnihadayangmemperhatikantidakkenapabulan09kokjadinyaOktoberyangseharusnyaSeptember?.Bertanya-tanyaya?InikarenabulandiJavaScriptdihitungnyamulaidari0bukandari1.

UntukmengetahuifilterapasayayangtelahdisediakanolehAngularJs,pembacabisamerujukkedokumentasiyangadadihttps://docs.angularjs.org/api/ng/filter.

SudahpastitidaksemuafilteryangtersediamampumengakomodasikebutuhankitasepertimisalnyaformatmatauangdalamRupiah.AngularJsmemungkinkanbagikitauntukmembuatfiltersendiriataucustomfilter.

MisalkankitainginmembuatfilteruntukmemformatangkamenjadimatauangRupiah.Lakukanperubahanpadafileapp.js.


11Bab1Dasar-Dasar

https://docs.angularjs.org/api/ng/filter

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.


…

{{book.price|currency}}/{{book.price|rupiah}}</br>

…

</div>

Lihatperubahanpadabrowserdansilahkanberteriak"Wwoooowww!".


12Bab1Dasar-Dasar

1.5BasicDirectiveDirectiveadalahtagkhususyangdigunakanolehAngularJs.Sampaisaatinikitabarumengenal2buahdirectiveyaitung-appdanng-controller.Subbabiniakanmembahasbeberapadirectivedasaryangwajibdimengerti.

1.5.1ng-repeat

Tidakbisatidak,perulanganforeachdibutuhkanuntukmendapatkanisidarivariabelyangterdapatadasuatukoleksi/array.BagipembacayangsudahfamiliardenganbahasapemrogramansepertiC#,JavamaupunPHPpastisudahmengetahuikegunaannyadansangatseringdigunakan.

AngularJsmenyediakandirectiveyangbergunauntukmelakukanperulangantersebut.Kitagunakanng-repeatuntukmelakukannya.Supayalebihmudahdipahamimakasayatunjukkanlangsungcontohkodenya.MasihmenggunakancontohyangsamamakapadafileMainController.jshapusvariabelbookdantitle.Sebagaigantinyabuatvariabelbooksyangberisiarrayobject.


13Bab1Dasar-Dasar


$scope.books=[

{



price:80000,

pubdate:newDate('2015','09','09')

},

{

title:'BelajarRuby',

author:'PenulisSatu',

price:65000,


},

{

title:'BelajarRubyonRails',

author:'PenulisDua',

price:90000,


}];

}]);

Ingatworkflow-nya,setelahmenambahkandatadicontrollermakaberikutnyaadalahmenampilkandatadiview.Kaliiniuntukmenampilkandatabukuyangadapadavariabelbooksdigunakanng-repeat.


<divng-repeat="bookinbooks">

{{book.title}}</br>


{{book.price|rupiah}}</br>

{{book.pubdate|date}}

<hr/>

</div>

</div>

Jalankandibrowserdansekalilagibolehlahberteriak"Wwoooowww!".


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.


15Bab1Dasar-Dasar


$scope.books=[

…

…

];

$scope.logToConsole=function(index){

varbook=$scope.books[index];

console.log(book);

};

}]);

DidalamfileMainController.jskitatambahkansebuahmethodbarudengannamalogToConsoleyangmemilikisebuahparameterbernamaindeks.Apayangdilakukanmethodiniadalahmengambilsatudatabukuberdasaranindeksarray-nyadarivariabelbookskemudiandimuncukanmelaluijendelaconsole.

MethodlogToConsoleiniyangakankitagunakandiviewbersamadenganng-click.Berikutadalahkodenya.



{{book.title}}</br>



{{book.pubdate|date}}</br>

<buttonng-click="logToConsole($index)">Log</button>

<hr/>

</div>

</div>

Jadiyangmenjadiisidaridirectiveng-clickadalahnamamethodyangterdapatdicontroller,dalamhaliniadalahlogToConsole.

Kodediatassekaligusjugamenunjukkancarapenggunavariabel$indexyangsudahsayajelaskanpadasubbabsebeumnyayaitutentangvariabel-variabelyangadading-repeat.

KetikadijalankanpadabrowsercobalahuntukmengeklikbuttonLogdanlihathasilyangkeluardiconsole.


16Bab1Dasar-Dasar

Sayainginpembacabenar-benarmemahamimateriini.Olehkarenaitu,marikitabuatsebuahcontohlagiyangmenggunakanng-click.

Sekarang,padatiaparrayobjectpadavariabelbookstambahkansebuahvariabelbarudengannamalikesdannilainyaadalah0.

$scope.books=[

{



price:80000,

pubdate:newDate('2015','09','09'),

likes:0

},

{

title:'BelajarRuby',

author:'PenulisSatu',

price:65000,


likes:0

},

{

…………….

}

];


17Bab1Dasar-Dasar

Kitaakanmenampilkanjumlahlikepadaviewkemudianmembuatsebuahtombolyangketikadiklikakanmenambahjumlahlikessebanyak1.Untukkeperluanitukitabutuhuntukmenambahmethodbaru.

BukafileMainController.jsdanbuatmethodbarusepertiberikut


$scope.books=[

{



price:80000,


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.



{{book.title}}</br>



{{book.pubdate|date}}</br>

{{book.likes}}<buttonng-click="likes($index)">Like</button></br>

<buttonng-click="logToConsole($index)">Log</button>

<hr/>

</div>

</div>


18Bab1Dasar-Dasar

Jikakodinganpembacabelumberjalansebagaimanamestinyacobauntukmenelitikodeyangpembacatulisdanbacalagidariawalinstruksiyangsayaberikandariawalsecaralebihteliti.

1.5.2ng-model

DiAngularJsterdapatsebuahjargontwowaydatabinding.Maksudnyaadalahkitabisamelakukandatabindingdarikeduaarah,yaitudaricontrollerkeviewyangselamainisudahlakukandanyangsatunyalagiyaituarahkebalikan,dariviewkecontroller.

Untukmengirimnilaidariviewkecontrollerkitamenggunakandirectiveng-modelyangberisinamavariabelyangterdapatpadacontroller.

Padacontrollersiapkansebuahvariabeldengannamatitlesertasebuahmethoduntukmenge-lognilaidarivariabeltersebut.


19Bab1Dasar-Dasar


$scope.title=10;

$scope.log=function(){

console.log($scope.title);

};

}]);

Buatview-nyayangberisisebuahinputdansebuahekspresiuntukmenampikantitle.Padainputgunakanng-model.


Title:<inputtype="text"ng-model="title"/></br>

{{title}}</br>

<buttonng-click="log()">Log</button>

</div>

Padasaatpertamakalidijalankanmakaakanmunculnilai10baikpadaekspresimaupunpadabagianinput.Halinidikarenakannilaibawaandarititleadalah10sepertiyangtertulisdicontroller.CobatekantombolLogdanhasilpadaconsolejuga10.

Cobaubahnilaiyangadapadainputmakanilaipadaekspresipunakanikutberubahseketikaitujuga.JanganlupauntukmenekantombolLogmakanilaiyangdimunculkandiconsolejugasesuaidenganapayangadakinipadainput.


20Bab1Dasar-Dasar


21Bab1Dasar-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()

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.


22Bab2Directive


$scope.dunia="DuniaIndonesia";

}]);

Untukviewbisakitatampilkandirectiveyangkitabuattadi.

<html>

<head>

</head>

<bodyng-app="MyApp">


<my-directive></my-directive>

<hr/>

<divmy-directive></div>

</div>




<scriptsrc="js/directives/MyDirective.js"></script>

</body>

<html>

KarenakitamengaturnilaipropertyrestrictedsebagaiEAyangartinyaElementdanAttributemakakitabisamenggunakandirectivebaiksebagaielementmaupunattribute.Untukclassdancomment,stringyangdigunakanberurutanadalahCdanM.


<divmy-directive></div>

Ngomong-ngomongkenapadirectivekitamenggunakanmy-directivepadahalkitadikodinganmenuliskannyadenganmyDirective?.ItuadalahconventiondariAngularJs.

Sekarangbukafileviewpadabrowserdanlihathasilyangmuncul.


23Bab2Directive

Bisadipahami?.KalimatDuniaIndonesiamunculberasaldarivariabelduniayangadapadacontrollerkemudiandimunculkanmelaluiekpresi{{dunia}}yangadadidalamdirective.Darisinibisadiketahuibahwasemuavariabelyangadadiscopecontrollerjugabisadiaksesdaridirectiveyangberadadibawahcontrollertersebut.

SelanjutnyaketikadilihatmelaluijendelainspectelementterlihatbahwakalimatHelloDuniaIndonesiayangmenggunakantagh2terletakdidalamtagdirectiveyangkitabuat.

<my-directive>

<h2class="ng-binding">HelloDuniaIndonesia</h2>

</my-directive>

Jikainginposisidaritemplateyangkitagunakantidakberadadidalamtagdirectivekitabisamengaturnyadenganmenggunakanpropertireplaceyangbernilaitrue.Ketikareplacebernilaitruemakadirectiveakandigantikan/di-replacedenganapayangadapadapropertitemplate.


return{

restrict:'EA',

template:'<h2>Hello{{dunia}}</h2>',

replace:true

};

});


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.


25Bab2Directive


$scope.dunia="DuniaIndonesia";

}]);

Untukdirectivedanviewadasedikitperubahan.Berikutdirectiveyangdigunakan,adatambahanpropertilinkdidalamnya(materilinkakansayajelaskanpadasubbabberikutnya).


return{

restrict:'EA',


replace:true,

link:function(scope,elem,attrs){

elem.bind('click',function(){

scope.dunia='Sayadiklik';

scope.$digest();

});

}

};

});

MaksuddarilinkdiatasadalahketikadirectivediklikmakavariabelduniayangadapadascopeakandigantinilainyamenjadiSayadiklik.

Viewjugamengalamisedikitperubahan.Bagianatasdigunakanuntukmenampilkanvariabelduniayangadadicontroller(parent)sedangkanyangbawahuntukvariabelyangadadidirective.


<b>dunia</b>dariparentscope</br>

<h2>Hello{{dunia}}</h2>

<hr/>

<b>dunia</b>daridirectivescope</br>


</div>

Ketikadijalankanmakayangmunculadalahsepertipadagambardibawah.


26Bab2Directive

SekarangkitacobakliktulisanHelloDuniaIndonesiayangberadapadabagianbawahyaitupadabagiandirectiveyangsudahkitatambahaifungsiuntukmengubahnilaivariabelduniaketikadiklik.Makayangterjadiadalahbukanhanyatulisanyangbawahyangberubahtetapijugatulisanbagianatas.Halinisesuaipenjelasansayadiatas,karenavariabelyangdiacuadalahvariabelyangsamamakaketikaberubahsemuanyaikutberubah.

Hal–halsepertiinilahyangingindihindarikarenabisamenyebabkankekacauanjikavariabelyangadapadadirectivemengacukevariabelyangsamapadaparent-nya.Sebenarnyakitainginmengubahyangadapadadirectivesaja,ehnamunyangadapadaparentikutberubahjuga.


27Bab2Directive

Gambardiatasmenunjukkanperubahanyangterjadiketikadirectivediklik.Tampakjelasbagianparentjugaikutberubah.

2.2.1ChildScope

Childscopeadalahscopeyangmerupakanprototypedariparentscope.Artinyabentuknyasamadenganpunyaparentcumadiaitutiruannya,aliassemacamnge-copydariparent.Karenange-copyberartidiamerupakanscopeyangberbedadenganyangdimilikiolehparent.Halinimenyebabkanperubahanscopedidirectivetidakakanberpengaruhdiparent.

Untukmenggunakanchildscopekitamenggunakanpropertiscopedengannilaitruepadaobjekdirective.


28Bab2Directive


return{

scope:true,

restrict:'EA',


replace:true,




scope.$digest();

});

}

};

});

Sekarangcobajalankankembalidankliksekalilagipadadirective.Kaliiniperubahanhanyaterjadipadabagiandirective(bagiansebelahbawah).

2.2.2IsolatedScope


29Bab2Directive

Sesuaidengannamanya,isolatedscopeberartiscopeyangsifatnyaterisolasi,berlakuhanyadiareadirective,tidakmerembetsampaiparent.Kalauchildscopetaditidakmempengaruhiparentjugatetapidiabentuknyamerupakankopiandariparent,isolatedscopeharuskitadefinisikantersendiriuntukbisadigunakan.

Marikitaubahkodedirectivesebelumnyadenganmengubahscopeyangsemulachildscopemenjadiisolatedscope.Untukmendefiniskanisolatedscopekitamenggunakanpropertiscopeyangberupaobjek.


return{

scope:{

},

restrict:'EA',


replace:true,




scope.$digest();

});

}

};

});

Diataskitamembuatisolatedscopeyangbernilaikosong,nantiakankitaisidanbagaimanacontohpenggunaanya.

Sekarangcobajalankanlagicontohaplikasikita.Kaliinibagiandirectivetidakbisamembacavariabelduniayangadapadascope.Kejadianinidisebabkankarenakitamenggunakanisolatedscope,jadidirectivetidakmengenaliscopeselainyangadadiisolatedscope.


30Bab2Directive

Sekarangpertanyaannyabagaimanadirectivebisamenggunakanisolatedscope?.Mungkinpembacaakanmengira-ngiradengansepertiinidefinisikanvariabeldidalamobjekscopedankasihnilainya,sepertiberikut.


return{

scope:{

dunia:'HaloSayaIsolatedScope'

},

…

…

…

};

});

Namunsetelahkodediatasditulisdandieksekusimakatidakberjalansepertiyangkitainginkanhaha.Yakarenamemangbukansepertiitucaramenggunakanisolatedscope.Punmisalcaradiatasbisamakadatavariabelakanmenjadihardcode.

Subbabselanjutnyasayatulisuntukmembahasmasalahcaramelakukanbindingantaraisolatedscopedenganparentscopesehinggakitabisamenaruhsebuahnilaipadaisolatedscope.


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>',



scope.$apply(function(){

scope.title="JavaScript";

});

});

}

};

});

NantinyakodediataskanmenampilkanpesanberupaTitleInside:{{inside}}dengannilaivariabelinsideberasaldariluar/parentscope.

KodehtmldanAngularJsdibawahinimenunjukkanbagaimanacaramengisinilaivariabeltitleyangadapadaisolatedscopeyangberasaldariparentscope.


32Bab2Directive


<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.


33Bab2Directive

Ngomong-ngomong,jikamenggunakan@untukmem-passingvariabelmakayangbisadi-passinghanyalahstring,itumengapakitamenggunakanekspresi{{title}}saatmem-passingvariabeltitle.

<one-waytitle="{{title}}"></one-way>

Terusmasalahoneway-nyasudahsayajelaskanpadabagianparentscopedanisolatedscopedya.UntukmencobanyasilahkanklikpadakeduadirectivemakatitleakanberubahmenjadiJavaScipttetapivariabelpadatitleyangadapadainputantekstidakberubah.


34Bab2Directive

=untuktwowaybinding

Perbedaandenganmenggunakan@adalah

1. Yangdi-passingberupaobjectbukanstring2. Perubahanscopediparentberpengaruhkechilddanberlakusebaliknya

Denganmenggunakancontohkodingyangmasihsamakitahanyaperlumenggantitandadari@menjadi=


35Bab2Directive

app.directive('oneWay',function(){

return{

restrict:'E',

scope:{

title:'='

},

template:'<h2>TitleInside:{{title}}</h2>',




scope.title="JavaScript";

});

});

}

};

});

Selainitukitatidaklagimenggunakanekspresi({{var}})saatmem-passingsebuahnilai.PerhatikancontohdibawahinipadaHTML-nya.


<inputtype="text"ng-model="title"/></br></br>

<one-waytitle="title"></one-way>

</div>

Ketikadiklikparentakanikutberubah


36Bab2Directive

2.3linkfunctionPembacapastisudahberkali-kalimelihatdaribeberapacontohdiatasterdapatpropertilinkpadadirectiveyangberupafungsi.Sayajugayakinpembacasudahmengertiapakegunaannya.

linkdigunakanuntukmelakukanutilisasiterhadapscope.Bahasagampangnya,kalaumaungapa-ngapainscopemisalmengubahnilainyayagunakanlink.

linkmemiliki3buahparameteryaitu:

1. scope–scopeyangadapadadirective2. elem–elemendaridirective,digunakanuntukmanipulasiDOM3. attrs–attributedaridirective

Jikamaumengubahnilaivariabelpadascopemakagunakanparameterscopeuntukmengubahnya,misaladavariabeldengannamatitleyangingindiubahmakakodeberikutdiperlukan.

scope.title="Nilaibaru";


37Bab2Directive

Nilaiscopetidakakanberubahkalautidakadaapa-apa.Masaiyatiba-tibanilaibisaberubah?Pastitidakkan?.Palingsering,suatunilaiberubahpadasaatadaeventklik.Untukmengakomodasihalsepertiitudigunakanlahparameterelem.

Misalkitainginmemberinilaibarupadatitleketikaadaklikpadadirective,makagunakanelemsupayabereaksiketikadiklik.elemadalahjQLite(subsetdarijQuery)jadicarapenggunaanyasamasajadenganjQueryuntukmelakukanmanipulasiDOM.




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',[]);


38Bab2Directive

<!DOCTYPEhtml>

<html>

<head>

<title>DemoLatihanDirective</title>

</head>



{{judul}}

<hr/>

</div>




<scriptsrc="js/directives/AgsTable.js"></script>

</body>

</html>

Berikutadalahkodeawalyangadadicontroller.


$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.


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.


40Bab2Directive


$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.


{{judul}}

<hr/>

<ags-tablebooks="books"></ags-table>

</div>

Jikapembacabingungmengikutibagaimanastrukturfoldernya,dibawahinisayasertakanstrukturfolderdaripekerjaandiatas.


41Bab2Directive

Selesaisudahutak-atikkitauntukmembuatdirective.Bukafileindex.htmldibrowsermakaseharusnyayangpembacalihatadalahsepertipadagambardibawah.


42Bab2Directive

Manfaatdaripenggunaandirectiveiniadalahjikapadabagianlaindariaplikasikitainginmenampilkandatabukuyangmemilikiformatyangsamadenganisiyangberbedamakakitatinggalmenggantiscopebooksdengandatayanglain.Misalnyagini,dihalamandepandimunculkanbuku-bukuyangbaruterbit,sedangkandihalamanlaindimunculkanbuku-bukuyangmendudukirangking1–10.


43Bab2Directive

SampaisinimakaberakhirsudahpelajarankitamengenaidirectivepadaAngularJs.Sayayakinpastimasihbanyakhalyangharusdipelajarilebihlanjutdidirective.Marisama-samaterusbelajar:)


44Bab2Directive

Bab3ServiceMateriyangdipelajaripadababini:

ValueFactoryServiceProviderConstant

Ketikaaplikasiyangkitakembangkanmerupakanaplikasiyangbesar,makaakanlebihbaikjikakitamemecah-mecahnyamenjadibagianyangterpisahyangmemilikifungsimasing-masing.Tujuanpemecahaninisupayakodemenjadirapi,tidaktumplekblekmenjadisatudicontrolleryangsangatmembingungkan.UntukkeperluaniniAngularJsmenyediakan2buahsenjata:dependencyinjectiondanservice.

3.1ValueValuediAngularJsdigunakansebagaisemacamdictionaryyangberisikey/kuncidanvalue/nilai.Nilaiyangdigunakanbisaberupatipedataapasaja,string,angkamaupunobject.Valueininantinyadi-injectbaikkecontroller,factory,maupunservicetergantungkebutuhan.

SebuahValuemerupakanbagiandarimodule,jadiuntukmembuatnyakitamenggunakanmethodvaluepadamodule.


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.


45Bab3Service

Variabelstringyangdi-injectpadakodediatasadalahberasaldarivalueyangjugabernamastringyangberisiBelajarAngularJsService.Namakeduanyaharuspersissamaketikadigunakan.

3.2FactoryJikaValueterlihatkokgitudoangya?makapembacapastiakanmerasasenangjikasudahberkenalandenganfactory.

Berbedadenganvalueyangnilainyadi-hardcodesehinggatidakbersifatdinamismakafactorybisamemberikannilaiyangdinamis.Yangperludiingatdarifactoryadalah,saatdi-injectnanti,yangdi-injectbukanlahfactoryitusendiritetapinilaiyangdikembalikanolehnya.

Factoryjugadibuatdimodule,kaliinimenggunakanmethodyangbernamafactory.


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.


46Bab3Service


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.


47Bab3Service


{{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.


48Bab3Service

3.3ServicePendekarketigakitaadalahservice.Kalausayabilang,serviceinimiripdenganfactory.Perbedaanantarakeduanyaadalah,jikapadafactoryyangdi-injectadalahnilaikembaliandarifactorymakapadaserviceyangdi-injectadalahserviceitusendiri.

Servicebekerjapadamoduledenganmenggunakanmethodservice.


app.service('myService',function(){

this.methodA=function(){

...

}

this.methodB=function(){

...

}

});


49Bab3Service

Denganmasihmenggunakanaplikasikalkulatorsebagaicontoh,makakitaubahoperasimatematikayangtadinyamenggunakanfactorymenjadimenggunakanservice.


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);

}

}]);


50Bab3Service

Padakodediataskitayangpertamakitalakukanadalahmeng-injectKalkulatorService.Karenaservicekitainimemangsudahberupaobjekdarisananyamakakitabisamenggunakannyauntukmemanggilmethod-methodyangdimiliki.

Padabagianbelakang,yangdilakukanolehAngularJsadalahmelakukaninstantiasidariKalkulatorService.

vartheService=newKalkulatorService();

Jalankanpadabrowserdanpastikankalkulatorberjalandenganbenar,tidakadaerroryangterjadi.

3.4ContohServiceHttpBagianinimemuatcontohpenggunaanserviceyangmemanfaatkankomponen$httppadaAngularJsuntukmengambildatajsonyangberasaldariWebAPI.NilaibalikanjsontersebutakankitatampilkanmelaluiAngularJs.

Kalaurasanyadaritadicontohserviceyangsayaberikanterkesankurangaplikatifmakacontohkaliinisayajaminpastidigunakandidunianyata.Penggunaan$httpuntukberkomunikasidenganWebAPIdigunakanjikakitamembangunaplikasiyangberhubungandengandata.

Langkahpertamapastisudahhafalya,membuatmoduldancontrollerkemudianpasangpadafileview.Janganlupauntukmemasukkanfile.jspadahalamanHtml.



$scope.title="AngularJsHttpService";

}]);



{{title}}

<hr/>

</div>

</body>

Selanjutnyakitabuatserviceyangmenggunakan$http.Ketikkankodedibawahini.


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.


52Bab3Service


{{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.


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.


54Bab4Route

Dibawahiniadalahstrukturakhirdarifolderdanfiledaricontohyangakankitakerjakan.Jikaditengahjalannantipembacamerasabingungdenganpeletakanfoldersertafilemakabisamerujukkegambarini.

Buatsebuahmoduldidalamfileapp.jssepertiyangsudah-sudah.Akantetapi,kaliiniadasedikitperbedaan,cobalihatperbedaannyadimana.

varapp=angular.module('AngularRouteApp',['ngRoute']);

Perbedaannyaterletakpadaapayangadadidalamtandakurungkurawal,yaituadanyangRouteyangmerupakanmoduluntukrouteyangmemangdibuatterpisahdarimodulutamaAngularJs.Untukbisamenggunakanroutekitaharusmemuatnyakedalammodulyangkitabuat.

Selanjutnyabuat3buahcontrolleryangterletakdidalamfoldercontrollers,masing-masingadalahHomeController,AboutController,danContactController.


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>


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.


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.


58Bab4Route


59Bab4Route


60Bab4Route

4.2RouteParamsKomponenyangsatuinidigunakanuntukmenangkapparameteryangadadiurl.Kalaupembacasudahpernahmenggunakanbahasapemrogramanyangbekerjadisisiserverpastitidakasingdenganyangdimaksudurlparameter.

Padacontohurl-urlyangmemilikiroutepadasubbab4.1sebelumnyasayamenyertakansatuyangmemilikiparameteryaitu

http://sample.com/index.html#books/123

Angka123adalahparameter.Denganadanyaparameterinikitabisamengambilnilai123untukkemudianmenggunakannyauntukkepentinganaplikasikita,misalnyamengambildatabukuyangmemilikiidsamadengan123.Sekalilagi,jikapembacasudahpernahngodingaplikasiwebpastisangatpahamdengankonsepini.

Kembalikitaterjunkekodingsupayapahamcaramengambilnilaiparameteryangadapadaurl.Contohkodeyangakandikerjakanlanjutandarikodesebelumnyasajaya.

BuatsebuahcontrollerbarudengannamaParamControllerdandibawahiniadalahkodenya.


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.


62Bab4Route


63Bab4Route

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.


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.




scope.$digest();

});

}

Contohkodediatassayaambildarikodesaatkitabelajarbersamamateridirective.Cobajalankankodeyangadapadamateritersebuttetapidenganmenghilangkanbarisscope.$digest()makavariabelduniayangberisisayadikliktidakakanmunculdi-view.Haliniterjadikarena$digesttidakjalankarenakodeiniberadadiluarjangkauanlangsungdari$scopeyangadadicontroller.

5.3$apply



Kalausayabilangmethodinimerupakanpenyederhanaandaripenggunaan$digest.$applymenjalankanfungsiyangmenjadiparameternyakemudiansecaraautomatisdiaakanmenjalankan$digest.Denganpengertianinimakakodesebelumnyabisadiubahmenjadisepertiini.





});

});

}



Bab6ContohAplikasiCRUDMenggunakanWebAPIComingsoonya,staytuned;)

Aplikasicontohnyasudahjadi,webapi-nyapunsudahjadi.Masihperluwaktuuntukmenuliskannyadibukuinijadikalimatyangenakdipahami.

Sebagaiiming-imingmakasayasertakanbeberapascreenshotcontohaplikasinya.


67Bab6ContohAplikasiCRUDMenggunakanWebAPI

table of contents - ilhamcc.files.wordpress.com · idenya sangat sederhana namun akan membuat kita...

Documents