Anda di halaman 1dari 69

AngularJsUntukPemula

TableofContents

Introduction

Introduction

0

0

Bab1Dasar-Dasar

Bab1Dasar-Dasar
 

1

1

Bab2Directive

Bab2Directive
 

2

2

Bab3Service

Bab3Service
 

3

3

Bab4Route

Bab4Route

4

4

Bab5$watch,$digestdan$apply

Bab5$watch,$digestdan$apply
 

5

5

Bab6ContohAplikasiCRUDMenggunakanWebAPI

Bab6ContohAplikasiCRUDMenggunakanWebAPI

6

6

AngularJsUntukPemula

Bukuyangditujukanuntukpemulainimembahas

besutanGoogleyangdigunakanuntukfrontenddevelopmentkhususnyaSinglePage

Application(SPA).`

AngularJs

,frameworkJavaScript

Materiyangdisajikanbersifatpraktikdandiharapkanpembacabisalangsungcodinguntuk

langsungmerasakandanmulaimengenal

belajarngodingmemangharusbeneranngoding.

AngularJs

.Diharapkantidakcopy-pastekarena

AngularJs

dalambukuinimerupakanversi1,untukversi2harapmenunggupenulis

mempelajarinyaterlebihdahulu:D

Ebookinigratisdanbolehdisebarkandengansyaratharuslinkdaridomainini,tidakboleh

dihostpadadomainlain.

Sourcecodecontoh-contohprogramakansegeraditaruhGithub,untuksaatinimohonmaaf

masihbelum:)

BukuiniditulisolehAgungSetiawan.Jikaadapertanyaan,kritik,dansaransilahkanuntuk

mengirimemailke

com.agungsetiawan@gmail.com

.

AngularJsUntukPemula

AngularJsUntukPemula Introduction 4

AngularJsUntukPemula

Bab1Dasar-Dasar

Materiyangdipelajaripadababini:

MemasangAngularJsBab1Dasar-Dasar Materiyangdipelajaripadababini: HelloWorld Workflow Filter BasicDirective

HelloWorldMateriyangdipelajaripadababini: MemasangAngularJs Workflow Filter BasicDirective 1.1MemasangAngularJs

WorkflowMateriyangdipelajaripadababini: MemasangAngularJs HelloWorld Filter BasicDirective 1.1MemasangAngularJs

FilterMemasangAngularJs HelloWorld Workflow BasicDirective 1.1MemasangAngularJs

BasicDirectiveMemasangAngularJs HelloWorld Workflow Filter 1.1MemasangAngularJs

1.1MemasangAngularJs

ProsesinstalasiataupemasanganAngularJskedalamaplikasiyangakankitabangun

sangatlahmudah.Kitahanyaperlumeng-includefileAngularJsdidalamfileHTML

menggunakantag

<script>

sepertilayaknyafileJavaScriptbiasa.

 

<html>

<head>

</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></sc </body> <html>

</body> <html>
</body> <html>

Ataujikapembacalebihmemilihuntukmengunduhfilenyaterlebihdahuluuntuk

direferensikanmelaluifolderlokalmakamenjadisepertidibawahini.

<html>

<head>

</head>

<body>

<script src="js/angular.min.js"></script> </body> <html>

1.2HelloWorld

AngularJsUntukPemula

Supayabelajarnyajadisemangatmakaakansayatunjukkansedikitkesaktiandari

AngularJs.Idenyasangatsederhananamunakanmembuatkitapahambagaimanaflowdari

AngularJs.

1. Buatsebuahfiledengannamaindex.htmldanpasangAngularJssepertipadacontoh

diatas.

2. Buatsebuahfolderbarubernamajssejajardenganfileindex.html.

3. Buatfiledengannamaapp.jsdidalamfolderjstadidanisikankodeberikut.

var app=angular.module('FirstApp',[]);

4. Includefileapp.jsdidalamfileindex.htmlmenggunakantag

bagianatassebelumtag

</body> .
</body>
.

<script>

,letakkanpada

5. Buatfolderbarudengannamacontrollersdidalamfolderjsdanbuatfile.

MainController.jsdidalamfolderbaruini.

6. IsikankodeberikutdidalamfileMainController.js.

app.controller('MainController',['$scope', function($scope){ $scope.title='Belajar AngularJs'; }]);

7. IncludefileMainController.jsdidalamfileindex.htmlmenggunakantag

letakkanpadabagianatassebelumtag

</body> .
</body>
.

<script>

,

8. Editfileindex.htmlmenjadisepertitampakpadakodeberikut.

<!DOCTYPE html> <html> <head> <title>Belajar AngularJs</title> </head> <body ng-app="FirstApp"> <div ng-controller="MainController">

</div>

<script src="js/angular.min.js"></script> <script src="js/app.js"></script> <script src="js/controllers/MainController.js"></ script> </body> </html>

9. Jalankanindex.htmlpadabrowser.

AngularJsUntukPemula

AplikasiAngularJsyangpalingsederhana(sepertidiatas)terdiridari1moduldan1

controller.Apayangadapadafileapp.jsadalahmodulsedangkanapayangadapadafile

MainController.jsadalahcontroller.

SupayaHTMLtahumodulapadancontrollerapayangdigunakankitaperlu

memberitahunyadenganmenggunakandirective

untukcontroller.

ng-app
ng-app

untukmoduldan

ng-controller

Kalaupembacasudahbenarmelakukanlangkah-langkahdiatasmakahasilyangmuncul

padabrowserseharusnyaadalahsepertigambarberikut.

pada browser seharusnyaadalahsepertigambarberikut. Sekarangcobaubahvariabel title

Sekarangcobaubahvariabeltitleyangadapadacontrollerdengankalimatsesuka

pembacadankemudianrefreshbrowserdanlihatperubahanyangterjadi.

Hallainyangpatutdicobaadalahmenambahkanvariabelbarudankemudiancoba

dimunculkanpadaview.

Peubahanpadacontroller

AngularJsUntukPemula

app.controller('MainController',['$scope', function($scope){ $scope.title='Belajar AngularJs'; $scope.book={ title: 'Belajar AngularJs Bersama Agung Setiawan', author : 'Agung Setiawan',

};

}]);

price

: 80000

Perubahanpadaview

<div ng-controller="MainController"> {{title}} </br> {{book.title}} </br> {{book.author}} </br> {{book.price}} </div>

{{book.author}} </br> {{book.price}} </div>

SampaisinikitasudahbelajarhalpalingdasaruntukmemahamiAngularJs.

1.3Workflow

AngularJsUntukPemula

Biasanyasetiapdevelopermemilikiworkflow/urutankerjayangberbedadengandeveloper

yanglaindalammengerjakanaplikasi.Akantetapi,seringnyaadasuatuworkflowyang

bersifatumumyangdiikutiolehsemuadeveloper.

Darilangkah-langkahyangkitakerjakanpadasubbab1.2dapatdisimpulkanbahwa

workflowuntukmembuatsebuahaplikasiAngularJsadalah:

1.

2.

3.

4.

Membuatmodule,includefilemoduldiHTMLkemudianmemberitahuHTMLmodulapa

yangdigunakanmenggunakan

ng-app .
ng-app
.
Membuat controller controller
Membuat
controller
controller

,includefilemoduldiHTMLkemudianmemberitahuHTML

ng-controller . $scope .
ng-controller
.
$scope
.

apayangdigunakanmenggunakan

Menambahkandatapadacontrollermenggunakan

Menampilkandatadiviewmenggunakanekspresi``.

1.4Filter

TerdapatfiturpadaAngularJsyangbernamafilter,digunakanuntukmemformattampilan

sebuahvariabeldiview.Jadialih-alihkitamelakukanformattingdicontroller,kita

melakukannyadiviewdenganbantuanfilter.

Padacontohkodesebelumnyaterlihatkalauhargayangkitaketikkanberupaangkabiasa

danketikaditampilkandiviewmakahasilnyamasihapaadanya,tanpaformatmatauang.

Kitabisamenggunakanfilter

sehinggaenakdilihat.

currency

yangdisediakanAngularJsuntukmemformatharga

<div ng-controller="MainController"> {{title}} </br> {{book.title}} </br> {{book.author}} </br> {{book.price | currency}} </div>

Penggunaanfiltersangatmenyenangkansepertibisadilihatpadalistingkodediatas.Kita

menambahkansebuahtandapipeline(|)dibelakangvariabelyanginginkitafilterkemudian

diikutidenganfilteryangkitagunakan.Setelahlakukanperubahandenganmenambahkan

filtercobajalankanpadabrowser.

AngularJsUntukPemula

AngularJsUntukPemula Adajugafilterlainyangbisadigunakanmisalnya Sebelumnyatambahkanterlebihdahuluvariabelbarudicontroller.

Adajugafilterlainyangbisadigunakanmisalnya

Sebelumnyatambahkanterlebihdahuluvariabelbarudicontroller.

date
date

untukmengaturformattanggal.

app.controller('MainController',['$scope', function($scope){ $scope.title='Belajar AngularJs'; $scope.book={ title: 'Belajar AngularJs Bersama Agung Setiawan', author : 'Agung Setiawan',

};

}]);

price

pubdate : new Date('2015','09',01'')

: 80000,

Tampilkanvariabelbarutersebutkedalamview.

<div ng-controller="MainController"> {{title}} </br> {{book.title}} </br> {{book.author}} </br> {{book.price | currency}} </br> {{book. pubdate | date }} </div>

AngularJsUntukPemula

AngularJsUntukPemula Ngomong-ngomongnihadayangmemperhatikantidakkenapabulan09kokjadinya

Ngomong-ngomongnihadayangmemperhatikantidakkenapabulan09kokjadinya

OktoberyangseharusnyaSeptember?.Bertanya-tanyaya?InikarenabulandiJavaScript

dihitungnyamulaidari0bukandari1.

UntukmengetahuifilterapasayayangtelahdisediakanolehAngularJs,pembacabisa

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

Sudahpastitidaksemuafilteryangtersediamampumengakomodasikebutuhankitaseperti

misalnyaformatmatauangdalamRupiah.AngularJsmemungkinkanbagikitauntuk

membuatfiltersendiriataucustomfilter.

MisalkankitainginmembuatfilteruntukmemformatangkamenjadimatauangRupiah.

Lakukanperubahanpadafileapp.js.

AngularJsUntukPemula

var app=angular.module('FirstApp',[]); app.filter('rupiah', function(){ return function toRp(angka){

var rev = parseInt(angka, 10).toString().split('').reverse().join('');

var rev2

for(var i = 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';

}

});

Janganpusingdenganlogikayangdigunakanuntukmemformatangkamenjadidalam

bentukmatauangrupiah,perhatikansajabagaimanacaramembuatfilteryangsesuai

dengankebutuhankita.Itupunlogikayangdigunakansayadapatdarigoogling.Setelahitu

pakaifilteruntukmemformatangkahargadihalamanview.

<div ng-controller="MainController">

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

</div>

Lihatperubahanpadabrowserdansilahkanberteriak"Wwoooowww!".

AngularJsUntukPemula

AngularJsUntukPemula 1.5BasicDirective Directive adalahtagkhususyangdigunakanolehAngularJs.Sampaisaatinikitabaru dan

1.5BasicDirective

DirectiveadalahtagkhususyangdigunakanolehAngularJs.Sampaisaatinikitabaru

dan

mengenal2buahdirectiveyaitu

beberapadirectivedasaryangwajibdimengerti.

ng-app
ng-app

ng-controller

.Subbabiniakanmembahas

1.5.1ng-repeat

Tidakbisatidak,perulangan

terdapatadasuatukoleksi/array.Bagipembacayangsudahfamiliardenganbahasa

pemrogramansepertiC#,JavamaupunPHPpastisudahmengetahuikegunaannyadan

sangatseringdigunakan.

for each

dibutuhkanuntukmendapatkanisidarivariabelyang

AngularJsmenyediakandirectiveyangbergunauntukmelakukanperulangantersebut.Kita

gunakan

tunjukkanlangsungcontohkodenya.Masihmenggunakancontohyangsamamakapada

fileMainController.jshapusvariabel

ng-repeat

untukmelakukannya.Supayalebihmudahdipahamimakasaya

book
book

dan

title
title

.Sebagaigantinyabuatvariabel

books
books

yangberisiarrayobject.

AngularJsUntukPemula

app.controller('MainController',['$scope', function($scope){ $scope.books=[

{

 

title: 'Belajar AngularJs Bersama Agung Setiawan', author : 'Agung Setiawan',

price

: 80000,

pubdate : new Date('2015','09','09')

},

{

 

title: 'Belajar Ruby', author : 'Penulis Satu',

price

: 65000,

pubdate : new Date('2015','10','09')

},

{

title: 'Belajar Ruby on Rails', author : 'Penulis Dua',

price

: 90000,

pubdate : new Date('2015','11','09') }]; }]);

Ingatworkflow-nya,setelahmenambahkandatadicontrollermakaberikutnyaadalah

menampilkandatadiview.Kaliiniuntukmenampilkandatabukuyangadapadavariabel

books
books

digunakan

ng-repeat

.

<div ng-controller="MainController"> <div ng-repeat="book in books"> {{book.title}} </br> {{book.author}} </br> {{book.price | rupiah}} </br> {{book.pubdate | date}} <hr/> </div> </div>

Jalankandibrowserdansekalilagibolehlahberteriak"Wwoooowww!".

AngularJsUntukPemula

AngularJsUntukPemula Beberapavariabelbawaanyangperludiketahuiberkaitandenganng-repeat. 1.

Beberapavariabelbawaanyangperludiketahuiberkaitandenganng-repeat.

1. $index–Indekselemenyangsedangdiakses

2. $first-Booleanyangmenandakanelemenpertamaataubukan

3. $middle-Booleanyangmenandakanelemenbukanpertamadanbukanterakhir

4. $last-Booleanyangmenandakanelementerakhirataubukan

5. $even-Booleanyangmenandakanelemenberindeksgenap

6. $odd-Booleanyangmenandakanelemenberindeksganjil

1.5.2ng-click

Directiveberikutnyayangperludimengertiadalah

namanyayadirectiveinipastidigunakanuntukmenjalankansesuatuketikadiklik.

ng-click

.Sudahbisadidugadari

Kembalisayakasihcontohpenggunaannya.

AngularJsUntukPemula

app.controller('MainController',['$scope', function($scope){ $scope.books=[

];

$scope.logToConsole=function(index){ var book=$scope.books[index]; console.log(book);

};

}]);

DidalamfileMainController.jskitatambahkansebuahmethodbarudengannama

logToConsole

yangmemilikisebuahparameterbernamaindeks.Apayangdilakukan

methodiniadalahmengambilsatudatabukuberdasaranindeksarray-nyadarivariabel

kemudiandimuncukanmelaluijendelaconsole . console.

Method

Berikutadalahkodenya.

logToConsole

iniyangakankitagunakandiviewbersamadengan

ng-click

.

<div ng-controller="MainController"> <div ng-repeat="book in books"> {{book.title}} </br> {{book.author}} </br> {{book.price | rupiah}} </br> {{book.pubdate | date}} </br> <button ng-click="logToConsole($index)">Log</button> <hr/> </div> </div>

Jadiyangmenjadiisidaridirective

controller,dalamhaliniadalah

ng-click logToConsole .
ng-click
logToConsole
.

adalahnamamethodyangterdapatdi

Kodediatassekaligusjugamenunjukkancarapenggunavariabel

jelaskanpadasubbabsebeumnyayaitutentangvariabel-variabelyangadadi

$index
$index

yangsudahsaya

ng-repeat

.

KetikadijalankanpadabrowsercobalahuntukmengeklikbuttonLogdanlihathasilyang

keluardiconsole.

AngularJsUntukPemula

AngularJsUntukPemula Sayainginpembacabenar-benarmemahamimateriini.Olehkarenaitu,marikitabuat

Sayainginpembacabenar-benarmemahamimateriini.Olehkarenaitu,marikitabuat

sebuahcontohlagiyangmenggunakan

ng-click

.

Sekarang,padatiaparrayobjectpadavariabel

dengannamalikesdannilainyaadalah0.

books
books

tambahkansebuahvariabelbaru

$scope.books=[

{

 

title: 'Belajar AngularJs Bersama Agung Setiawan', author : 'Agung Setiawan',

price

: 80000,

pubdate : new Date('2015','09','09'), likes : 0

},

{

 

title: 'Belajar Ruby',

author : 'Penulis Satu',

price

: 65000,

pubdate : new Date('2015','10','09'), likes : 0

},

{

 

…………….

}

];

AngularJsUntukPemula

Kitaakanmenampilkanjumlahlikepadaviewkemudianmembuatsebuahtombolyang

ketikadiklikakanmenambahjumlahlikessebanyak1.Untukkeperluanitukitabutuhuntuk

menambahmethodbaru.

BukafileMainController.jsdanbuatmethodbarusepertiberikut

app.controller('MainController',['$scope', function($scope){ $scope.books=[

{

 

title: 'Belajar AngularJs Bersama Agung Setiawan', author : 'Agung Setiawan',

price

: 80000,

pubdate : new Date('2015','09','09'), likes : 0

},

{

 

….

….

}

];

$scope.logToConsole=function(index){ var book=$scope.books[index]; console.log(book);

};

$scope.likes=function(index){

$scope.books[index].likes+=1;

};

}]);

Sampaisinidapatkanlogikanyabagaimanamenambahnilailikesuntukmasing-masing

buku?.Sepertibiasa,untukmengetesnyaperlukitaeksekusidibrowserdantekantombol

likes.Sebelumnyatentubuatterlebihdahulubagianview-nya.

<div ng-controller="MainController"> <div ng-repeat="book in books"> {{book.title}} </br> {{book.author}} </br> {{book.price | rupiah}} </br> {{book.pubdate | date}} </br> {{book.likes}} <button ng-click="likes($index)">Like</button> </br> <button ng-click="logToConsole($index)">Log</button> <hr/> </div> </div>

AngularJsUntukPemula

AngularJsUntukPemula Jikakodinganpembacabelumberjalansebagaimanamestinyacobauntukmenelitikode

Jikakodinganpembacabelumberjalansebagaimanamestinyacobauntukmenelitikode

yangpembacatulisdanbacalagidariawalinstruksiyangsayaberikandariawalsecara

lebihteliti.

1.5.2ng-model

DiAngularJsterdapatsebuahjargon

melakukandatabindingdarikeduaarah,yaitudaricontrollerkeviewyangselamainisudah

lakukandanyangsatunyalagiyaituarahkebalikan,dariviewkecontroller.

two way data binding

.Maksudnyaadalahkitabisa

Untukmengirimnilaidariviewkecontrollerkitamenggunakandirective

berisinamavariabelyangterdapatpadacontroller.

ng-model

yang

Padacontrollersiapkansebuahvariabeldengannama

menge-lognilaidarivariabeltersebut.

title
title

sertasebuahmethoduntuk

AngularJsUntukPemula

app.controller('MainController',['$scope', function($scope){

$scope.title=10;

$scope.log=function(){

console.log($scope.title);

};

}]);

Buatview-nyayangberisisebuahinputdansebuahekspresiuntukmenampikan

Padainputgunakan

ng-model

.

title .
title
.

<div ng-controller="MainController"> Title : <input type="text" ng-model="title"/> </br> {{title}} </br> <button ng-click="log()">Log</button> </div>

Padasaatpertamakalidijalankanmakaakanmunculnilai10baikpadaekspresimaupun

padabagianinput.Halinidikarenakannilaibawaandari

tertulisdicontroller.CobatekantombolLogdanhasilpadaconsolejuga10.

title
title

adalah10sepertiyang

console juga10. title adalah 10sepertiyang

Cobaubahnilaiyangadapadainputmakanilaipadaekspresipunakanikutberubah

seketikaitujuga.JanganlupauntukmenekantombolLogmakanilaiyangdimunculkandi

consolejugasesuaidenganapayangadakinipadainput.

AngularJsUntukPemula

AngularJsUntukPemula Bab1Dasar-Dasar 21

AngularJsUntukPemula

Bab2Directive

Materiyangdipelajaripadababini:

MembuatcustomdirectiveBab2Directive Materiyangdipelajaripadababini: scope linkfunction 2.1MembuatCustomDirective

scopeMateriyangdipelajaripadababini: Membuatcustomdirective linkfunction 2.1MembuatCustomDirective

linkfunctionMateriyangdipelajaripadababini: Membuatcustomdirective scope 2.1MembuatCustomDirective Setelahmempelajaribeberapa

2.1MembuatCustomDirective

Setelahmempelajaribeberapadirectivedasaryangwajibdiketahuiuntukmenunjang

pekerjaanpembuatanaplikasimenggunakanAngularJs,sekarangsaatnyabelajarmembuat

directivesendiriyangsesuaidengankebutuhan.

Secarapenggunaantag,directivediAngularJsterbagimenjadi4,yaitu:

1. ElementDirective(

<my-directive></my-directive>

)

2. AttributeDirective(

<div my-directive></div>

)

3. ClassDirective(

<div class="my-directive"></div>

)

4. CommentDirective(

<!--directive:my-directive-->

)

Tujuandaripenulisanbukuiniadalahsayainginmengenalkandasar-dasardariAngularJS.

Berkaitandengantujuantersebut,karenamateridirectiveinisangatdalamdanrumitmaka

sayahanyamenulishaldasaryangsekiranyapenting.

SekarangmarikitalihatstrukturpalingdasardaricustomdirectivediAngularJs.Secara

kodingancarame-registercustomdirectivehampirsamadenganme-registercontroller,

bedadimethodyangdigunakandannilaikembalian.Saatmembuatdirectivekita

diharuskanuntukmengembalikanobjekdirectiveyangmemilikibeberapaproperty.

app.directive('myDirective',function(){ return { restrict:'EA', template:'<h2>Hello {{dunia}}</h2>'

};

});

TuliskodediataspadafileMyDirective.jsyangadapadafolderjs/directives.Janganlupa

untukmembuatAngularJsmodulterlebihdahuludanpasangdiviewsepertiworkflowyang

biasa.Buatjugacontroller-nyasebagaiberikut.

AngularJsUntukPemula

app.controller('MainController',['$scope', function($scope){ $scope.dunia="Dunia Indonesia"; }]);

Untukviewbisakitatampilkandirectiveyangkitabuattadi.

<html> <head> </head> <body ng-app="MyApp"> <div ng-controller="MainController"> <my-directive></my-directive> <hr/> <div my-directive></div> </div>

<script src="js/angular.min.js"></script> <script src="js/app.js"></script> <script src="js/controllers/MainController.js"></script> <script src="js/directives/MyDirective.js"></script> </body> <html>

Karenakitamengaturnilaipropertyrestrictedsebagai

Attributemakakitabisamenggunakandirectivebaiksebagaielementmaupunattribute.

Untukclassdancomment,stringyangdigunakanberurutanadalah

EA
EA

yangartinyaElementdan

dan,stringyangdigunakanberurutanadalah EA yangartinyaElementdan M . <my-directive></my-directive> <div

M .
M
.

<my-directive></my-directive> <div my-directive></div>

Ngomong-ngomongkenapadirectivekitamenggunakan

kodinganmenuliskannyadengan

my-directive padahalkitadi

myDirective

?.ItuadalahconventiondariAngularJs.

Sekarangbukafileviewpadabrowserdanlihathasilyangmuncul.

AngularJsUntukPemula

AngularJsUntukPemula Bisadipahami?.Kalimat padacontrollerkemudiandimunculkanmelaluiekpresi directive

Bisadipahami?.Kalimat

padacontrollerkemudiandimunculkanmelaluiekpresi

directive.Darisinibisadiketahuibahwasemuavariabelyangadadiscopecontrollerjuga

bisadiaksesdaridirectiveyangberadadibawahcontrollertersebut.

Dunia Indonesia

munculberasaldarivariabel

{{dunia}}

dunia
dunia

yangada

yangadadidalam

Selanjutnyaketikadilihatmelaluijendelainspectelementterlihatbahwakalimat

Hello Dunia

Indonesia

yangmenggunakantag

h2
h2

terletakdidalamtagdirectiveyangkitabuat.

<my-directive> <h2 class="ng-binding">Hello Dunia Indonesia</h2> </my-directive>

Jikainginposisidaritemplateyangkitagunakantidakberadadidalamtagdirectivekitabisa

mengaturnyadenganmenggunakanpropertireplaceyangbernilai

bernilai

propertitemplate.

true
true

.Ketikareplace

true
true

makadirectiveakandigantikan/di-replacedenganapayangadapada

app.directive('myDirective',function(){ return { restrict:'EA', template:'<h2>Hello {{dunia}}</h2>', replace:true

};

});

AngularJsUntukPemula

Sampaisinisayamintapembacauntukmemahamidulubagaimanatulisan

bisamuncul.Amatibaik-baiktiaplangkahdanpenjelasayangsayaberikan,dan

sebisamungkinuntukmencobanyasendiridenganmengetikkankode,bukancopy–paste

hehe.

Hello Dunia

Indonesia

Meskipundirectiveyangkitabuatmasihsederhananamunadahal-halpentingyangbisa

kitapelajari.Kitasudahmenggunakantigabuahpropertidaridirective.Maribahassatuper

satu.

1. restricted–propertyiniuntukmengaturbagaimanadirectivekitaakandigunakan.

Ingatada4jenispenggunaandirective.Ada4stringuntukmasing-masingyaitu

E,A,C,M
E,A,C,M

.Penggunaanyabisadigabungmissal

EA ,
EA
,

2. template–propertiinisebagaitemplateyangakanditampilkanketikadirectivedi-

render.Jikainginyangdi-renderadalahsebuahhalamanHTMLdarifilelainmakayang

digunakanadalahproperty

bersangkutan.

templateUrl

dengannilailokasipathfilehtmlyang

3. replace–untukmengaturapakahtemplateyangditampilkanme-replacetagdirective

atautidak.

2.2Scope

Padasubbabsebelumnyasayasudahsempatmenyinggungmasalahscopeyangada

didalamdirectiveyangsebenarnyaadalahscopeyangberadadiparent-nya.Lihatkembali

kodeterakhirdimanaekspresimengambilvariabel

dunia
dunia

yangadadicontroller.

Bisajadiadakasusdimanakitamembuatsebuahdirectiveyangmenggunakanscopeyang

bukanberasaldariparent-nya.Ada2carauntukmelakukannyayaitu:

1. ChildScope

2. IsolatedScope

Sebelumkitalarikeduajenisscopetersebutakanlebihbaiksayamenjelaskanterlebih

dahulukenapakitainginmenggunakanbaikchildscopemaupunisolatedscope.

Scopeyangadadidirectiveitusecaradefaultberasaldariscopeyangdimilikiolehparent-

nyasepertiyangsudahsayakatakansebelumnya.Pahamibenar-benarkalimatsayayang

itu.Karenascopetersebutmerujukkescopeyangsamamakaketikascopeyangadapada

directiveberubah,secaraautomatisscopeyangadadiparentjugaberubah,makesense

kan?

Berikutinicontohdaripenjelasandiatas.Kitamasihmenggunakancontrolleryangsama

dengancontohsebelumnya.

AngularJsUntukPemula

app.controller('MainController',['$scope', function($scope){ $scope.dunia="Dunia Indonesia"; }]);

Untukdirectivedanviewadasedikitperubahan.Berikutdirectiveyangdigunakan,ada

tambahanpropertilinkdidalamnya(materilinkakansayajelaskanpadasubbab

berikutnya).

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='Saya diklik'; scope.$digest(); });

};

});

}

Maksuddari

scopeakandigantinilainyamenjadi

link
link

diatasadalahketikadirectivediklikmakavariabelduniayangadapada

Saya diklik

.

Viewjugamengalamisedikitperubahan.Bagianatasdigunakanuntukmenampilkan

variabel dunia adadidirective.
variabel
dunia
adadidirective.

yangadadicontroller(parent)sedangkanyangbawahuntukvariabelyang

<div ng-controller="MainController"> <b>dunia</b> dari parent scope </br> <h2>Hello {{dunia}} </h2> <hr/> <b>dunia</b> dari directive scope </br>

<my-directive></my-directive>

</div>

Ketikadijalankanmakayangmunculadalahsepertipadagambardibawah.

AngularJsUntukPemula

AngularJsUntukPemula Sekarangkitacobakliktulisan yaitupadabagian directive

Sekarangkitacobakliktulisan

yaitupadabagiandirectiveyangsudahkitatambahaifungsiuntukmengubahnilaivariabel

duniaketikadiklik.Makayangterjadiadalahbukanhanyatulisanyangbawahyangberubah

tetapijugatulisanbagianatas.Halinisesuaipenjelasansayadiatas,karenavariabelyang

diacuadalahvariabelyangsamamakaketikaberubahsemuanyaikutberubah.

Hello Dunia Indonesia

yangberadapadabagianbawah

Hal–halsepertiinilahyangingindihindarikarenabisamenyebabkankekacauanjika

variabelyangadapadadirectivemengacukevariabelyangsamapadaparent-nya.

Sebenarnyakitainginmengubahyangadapadadirectivesaja,ehnamunyangadapada

parentikutberubahjuga.

AngularJsUntukPemula

AngularJsUntukPemula Gambardiatasmenunjukkanperubahanyangterjadiketika directive diklik.Tampakjelas bagian parent

Gambardiatasmenunjukkanperubahanyangterjadiketikadirectivediklik.Tampakjelas

bagianparentjugaikutberubah.

2.2.1ChildScope

Childscopeadalahscopeyangmerupakanprototypedariparentscope.Artinyabentuknya

samadenganpunyaparentcumadiaitutiruannya,aliassemacamnge-copydariparent.

Karenange-copyberartidiamerupakanscopeyangberbedadenganyangdimilikioleh

parent.Halinimenyebabkanperubahanscopedidirectivetidakakanberpengaruhdi

parent.

Untukmenggunakanchildscopekitamenggunakanpropertiscopedengannilai

objekdirective.

true
true

pada

AngularJsUntukPemula

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='Saya diklik'; scope.$digest(); });

};

});

}

Sekarangcobajalankankembalidankliksekalilagipadadirective.Kaliiniperubahanhanya

terjadipadabagiandirective(bagiansebelahbawah).

directive .Kaliiniperubahanhanya terjadipadabagian directive (bagiansebelahbawah). 2.2.2IsolatedScope Bab2Directive 29

2.2.2IsolatedScope

AngularJsUntukPemula

Sesuaidengannamanya,isolatedscopeberartiscopeyangsifatnyaterisolasi,berlaku

hanyadiareadirective,tidakmerembetsampaiparent.Kalauchildscopetaditidak

mempengaruhiparentjugatetapidiabentuknyamerupakankopiandariparent,isolated

scopeharuskitadefinisikantersendiriuntukbisadigunakan.

Marikitaubahkodedirectivesebelumnyadenganmengubahscopeyangsemulachild

scopemenjadiisolatedscope.Untukmendefiniskanisolatedscopekitamenggunakan

propertiscopeyangberupaobjek.

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='Saya diklik'; scope.$digest(); });

}

};

});

Diataskitamembuatisolatedscopeyangbernilaikosong,nantiakankitaisidanbagaimana

contohpenggunaanya.

Sekarangcobajalankanlagicontohaplikasikita.Kaliinibagiandirectivetidakbisa

yangadapadascope.Kejadianinidisebabkankarenakita

menggunakanisolatedscope,jadidirectivetidakmengenaliscopeselainyangadadi

isolatedscope.

membacavariabel

dunia
dunia

AngularJsUntukPemula

AngularJsUntukPemula Sekarangpertanyaannyabagaimana directive bisamenggunakan isolatedscope ?.Mungkin

Sekarangpertanyaannyabagaimanadirectivebisamenggunakanisolatedscope?.Mungkin

pembacaakanmengira-ngiradengansepertiini

definisikan variabel di dalam objek scope

dan kasih nilainya

,sepertiberikut.

app.directive('myDirective',function(){ return { scope : { dunia : 'Halo Saya Isolated Scope'

};

});

},

Namunsetelahkodediatasditulisdandieksekusimakatidakberjalansepertiyangkita

inginkanhaha.Yakarenamemangbukansepertiitucaramenggunakanisolatedscope.Pun

misalcaradiatasbisamakadatavariabelakanmenjadihardcode.

Subbabselanjutnyasayatulisuntukmembahasmasalahcaramelakukanbindingantara

isolatedscopedenganparentscopesehinggakitabisamenaruhsebuahnilaipadaisolated

scope.

AngularJsUntukPemula

2.2.3BindingAntaraParentScopedenganIsolatedScope

Sepertisudahsayasinggungpadasubbabberikutnya,kitatidakbisamendefiniskan

isolatedscopedenganserta-mertalangsungdiisinilanya.Akantetapi,kitabisamengisinilai

yangadapadavariabeldiisolatedscopedengannilaiyangberasaldarivariabeldiluarnya

(parentscope).

Ada2carauntukmemberinilaipadaisolatedscopeyaitumenggunakan:

1. @untukonewaytextbinding

2. =untuktwowaybinding

Marikitabahassatudemisatu2caradiatas.

@untukonewaytextbinding

Diberinamasepertiitukarenadengancaraininilaiyangdikirimkeisolatedscopeberasal

dariparentscopetetapitidakbisaberlakukebalikan(nilaidi-isolatedscopetidakakan

mempengaruhiparentscope).

Perhatikancontohdirectivedibawahini

app.directive('oneWay',function(){ return { restrict:'E', scope:{ title:'@'

}, template:'<h2>Title Inside : {{title}}</h2>', link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.$apply(function() { scope.title = "JavaScript"; });

};

});

}

});

Nantinyakodediataskanmenampilkanpesanberupa

nilaivariabel

inside
inside

berasaldariluar/parentscope.

Title Inside : {{inside}}

dengan

KodehtmldanAngularJsdibawahinimenunjukkanbagaimanacaramengisinilaivariabel

title
title

yangadapadaisolatedscopeyangberasaldariparentscope.

AngularJsUntukPemula

<div ng-controller="MainController"> <input type="text" ng-model="title"/> </br> </br>

<one-way title="static"></one-way> <one-way title="{{title}}"></one-way> </div>

Tampilanawalketikadijalankansudahbisapembacatebak?,cobacocokkanperkiraan

pembacadenganscreenshotberikutini.

pembacadengan screenshot berikutini. Directive pertamaakanmenghasilkanteks kitamem- passing

Directivepertamaakanmenghasilkanteks

kitamem-passingnilaikevariabelinsidedengannilai

Title Inside : static

static .
static
.

karenapadadirectiveini

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

Sedangkandirectivekeduaakankosongkarenanilaiyangkitapassingadalahberupateks

yangdidapatdarivariabel

title
title

yangpadasaatawaltidakbernilai.

Sekarangcobaisiinputteksyangadadengankataapapun,makadirectiveakanikut

berubah.

AngularJsUntukPemula

AngularJsUntukPemula Ngomong-ngomong,jikamenggunakan passing hanyalahstring,itumengapakitamenggunakanekspresi passing

Ngomong-ngomong,jikamenggunakan

passinghanyalahstring,itumengapakitamenggunakanekspresi

passingvariabeltitle.

@
@

untukmem-passingvariabelmakayangbisadi-

{{title}}

saatmem-

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

Terusmasalahoneway-nyasudahsayajelaskanpadabagianparentscopedanisolated

scopedya.Untukmencobanyasilahkanklikpadakeduadirectivemaka

berubahmenjadi

berubah.

title
title

akan

JavaScipt

tetapivariabelpada

title
title

yangadapadainputantekstidak

AngularJsUntukPemula

AngularJsUntukPemula =untuktwowaybinding Perbedaandenganmenggunakan@adalah 1. Yangdi-passingberupaobjectbukanstring 2.

=untuktwowaybinding

Perbedaandenganmenggunakan@adalah

1. Yangdi-passingberupaobjectbukanstring

2. Perubahanscopediparentberpengaruhkechilddanberlakusebaliknya

Denganmenggunakancontohkodingyangmasihsamakitahanyaperlumenggantitanda

dari

@
@

menjadi

=
=

AngularJsUntukPemula

app.directive('oneWay',function(){ return { restrict:'E', scope:{ title:'='

}, template:'<h2>Title Inside : {{title}}</h2>', link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.$apply(function() { scope.title = "JavaScript"; });

};

});

}

});

Selainitukitatidaklagimenggunakanekspresi(

PerhatikancontohdibawahinipadaHTML-nya.

{{var}}
{{var}}

)saatmem-passingsebuahnilai.

<div ng-controller="MainController"> <input type="text" ng-model="title"/> </br> </br>

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

Ketikadiklikparentakanikutberubah

AngularJsUntukPemula

AngularJsUntukPemula 2.3linkfunction Pembacapastisudahberkali-kalimelihatdaribeberapacontohdiatasterdapatproperti link

2.3linkfunction

Pembacapastisudahberkali-kalimelihatdaribeberapacontohdiatasterdapatproperti

link
link

padadirectiveyangberupafungsi.Sayajugayakinpembacasudahmengertiapa

kegunaannya.

digunakanuntukmelakukanutilisasiterhadapscope .Bahasagampangnya,kalau scope.Bahasagampangnya,kalau

maungapa-ngapainscopemisalmengubahnilainyayagunakanlink.

link
link

memiliki3buahparameteryaitu:

1. scopescopeyangadapadadirective

2. elem–elemendaridirective,digunakanuntukmanipulasiDOM

3. attrsattributedaridirective

Jikamaumengubahnilaivariabelpadascopemakagunakanparameterscopeuntuk

mengubahnya,misaladavariabeldengannama

berikutdiperlukan.

title
title

yangingindiubahmakakode

scope.title = "Nilai baru";

AngularJsUntukPemula

Nilaiscopetidakakanberubahkalautidakadaapa-apa.Masaiyatiba-tibanilaibisa

berubah?Pastitidakkan?.Palingsering,suatunilaiberubahpadasaatadaeventklik.

Untukmengakomodasihalsepertiitudigunakanlahparameter

elem .
elem
.

Misalkitainginmemberinilaibarupada

gunakan

jadicarapenggunaanyasamasajadengan

title elem jQuery
title
elem
jQuery

ketikaadaklikpadadirective,maka

jQLite
jQLite

(subsetdari

elem
elem

supayabereaksiketikadiklik.

adalah

untukmelakukanmanipulasiDOM.

jQuery )
jQuery
)

link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.$apply(function() { scope.title = "Nilai baru"; }); });

}

Clickadalahhanyasebagiandarieventyangbisadigunakandisini,untukeventapasaja

yangadasilahkanmerujukkedokumentasiresmidarijQueryataugoogling.

Diperhatikansecaraseksamamakapembacaakanmenemukankodeyangsedikitaneh

yaituadanya

akansayabahasjuga.Pokoknyauntuksekarangcukuptahukegunaandari

menggunakanparameter-parameteryangdimilikinya:)

scope.$apply

,apakegunaannya?Sabarduluyanantipadababmendatang

link
link

dancara

2.4DemoDirective

Setelahmelewatiperjalananyangcukupmenyitaenergiuntukbelajardirectivemelalui

subbab–subbabsebelumnya,yoksekarangmarikitacobauntukmengimplementasikan

apayangtelahkitapelajaridenganmembuatsebuahdirectiveyangpantasdigunakandi

realworldproject.

Tujuanutamadaridirectiveyangakankitabuatadalahuntukmenampilkandatatertentu

dalambentuktabelyangbisadigunakanberulangkali.DiASP.NEThalsepertiinidisebut

partialview.DiRubyonRailsdisebutpartialrender.

LangkahpertamasepertibiasabuatmoduledanpasangdiHTML-nyadankemudianbuat

controllerdanjugapasangdiHTML.Janganlupauntukmenyertakanfile

.js .
.js
.

var app=angular.module('MyApp',[]);

AngularJsUntukPemula

<!DOCTYPE html> <html> <head> <title>Demo Latihan Directive</title> </head> <body ng-app="MyApp">

<div ng-controller="MainController"> {{judul}} <hr/>

</div> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> <script src="js/controllers/MainController.js"></script> <script src="js/directives/AgsTable.js"></script> </body> </html>

Berikutadalahkodeawalyangadadicontroller.

app.controller('MainController', ['$scope', function($scope){ $scope.judul='Demo Penggunaan AngularJs Directive';

}]);

Jalankanpadabrowserdanpastikantulisan

Demo Penggunaan AngularJs Directive

muncul.

Langkahselanjutnyaadalahmembuatdirectiveyangmenggunakantemplateberupafile

HTML.

PERHATIAN,untukbisamenggunakantemplateyangberupahalamanHTML,kitaharus

menjalankanaplikasiAngularJsmelaluiwebserver,semisalApache.

Kodedibawahinimerupakandirectivekita.

app.directive('agsTable',function(){ return { restrict:'E', scope:{ books:'='

},

templateUrl:'js/directives/AgsTable.html'

};

});

AdapaunfileHTMLyangkitajadikansebagaitemplateyangbisadigunakanberulangkali

bisadilihatdibawahini.

AngularJsUntukPemula

<head> <style type="text/css"> .table{ border-collapse: collapse;

}

tr,td,th{ border: 1px solid #000; padding: 5px;

}

td{

width: 300px;

}

.number{ text-align: right;

}

</style>

</head>

<table class="table"> <tr> <th>Judul</th> <th>Penulis</th> <th>Rating</th> </tr>

<tr ng-repeat="b in books"> <td>{{b.judul}}</td> <td>{{b.penulis}}</td> <td class="number">{{b.rating}}</td> </tr> </table>

Kembalilagikecontroller.Tambahkansebuahvariabelbernama

databeberapabuku,usahakanminimal3ya.

books
books

yangmenampung

AngularJsUntukPemula

app.controller('MainController', ['$scope', function($scope){ $scope.judul='Demo Penggunaan AngularJs Directive';

$scope.books=[

{

 

'judul':'Ayah', 'penulis':'Andrea Hirata',

'rating':4

},

{

 

'judul':'Eragon', 'penulis':'Christoper Paolini',

'rating':3

},

{

 

'judul':'Blink', 'penulis':'Malcolm Gladwell',

'rating':3

},

];

}]);

Sipkalaubisamengikutisampaisini.Langkahterakhiradalahmemasukkandata

yangadadicontrollerkedalamdirective.Pastibisadong?,kalaubelumbisacobapahami

lagipadasubbabsebelumnya.Kalausudahyakinbisacobacocokkandengankodeberikut

ini.

books
books

<div ng-controller="MainController"> {{judul}} <hr/> <ags-table books="books"></ags-table> </div>

Jikapembacabingungmengikutibagaimanastrukturfoldernya,dibawahinisayasertakan

strukturfolderdaripekerjaandiatas.

AngularJsUntukPemula

AngularJsUntukPemula Selesaisudahutak-atikkitauntukmembuat directive .Bukafile index.html di browser maka

Selesaisudahutak-atikkitauntukmembuatdirective.Bukafileindex.htmldibrowsermaka

seharusnyayangpembacalihatadalahsepertipadagambardibawah.

AngularJsUntukPemula

AngularJsUntukPemula Manfaatdaripenggunaan directive iniadalahjikapadabagianlaindariaplikasikitaingin

Manfaatdaripenggunaandirectiveiniadalahjikapadabagianlaindariaplikasikitaingin

menampilkandatabukuyangmemilikiformatyangsamadenganisiyangberbedamaka

kitatinggalmenggantiscope

depandimunculkanbuku-bukuyangbaruterbit,sedangkandihalamanlaindimunculkan

buku-bukuyangmendudukirangking1–10.

books
books

dengandatayanglain.Misalnyagini,dihalaman

AngularJsUntukPemula

AngularJsUntukPemula Sampaisinimakaberakhirsudahpelajarankitamengenai directive padaAngularJs.Saya

SampaisinimakaberakhirsudahpelajarankitamengenaidirectivepadaAngularJs.Saya

yakinpastimasihbanyakhalyangharusdipelajarilebihlanjutdidirective.Marisama-sama

terusbelajar:)

AngularJsUntukPemula

Bab3Service

Materiyangdipelajaripadababini:

ValueBab3Service Materiyangdipelajaripadababini: Factory Service Provider Constant

FactoryBab3Service Materiyangdipelajaripadababini: Value Service Provider Constant

ServiceBab3Service Materiyangdipelajaripadababini: Value Factory Provider Constant

ProviderMateriyangdipelajaripadababini: Value Factory Service Constant

ConstantValue Factory Service Provider

Ketikaaplikasiyangkitakembangkanmerupakanaplikasiyangbesar,makaakanlebihbaik

jikakitamemecah-mecahnyamenjadibagianyangterpisahyangmemilikifungsimasing-

masing.Tujuanpemecahaninisupayakodemenjadirapi,tidaktumplekblekmenjadisatudi

controlleryangsangatmembingungkan.UntukkeperluaniniAngularJsmenyediakan2buah

senjata:dependencyinjectiondanservice.

3.1Value

ValuediAngularJsdigunakansebagaisemacamdictionaryyangberisikey/kuncidan

value/nilai.Nilaiyangdigunakanbisaberupatipedataapasaja,string,angkamaupun

object.Valueininantinyadi-injectbaikkecontroller,factory,maupunservicetergantung

kebutuhan.

SebuahValuemerupakanbagiandarimodule,jadiuntukmembuatnyakitamenggunakan

methodvaluepadamodule.

var app=angular.module('MyApp',[]); app.value('string','Belajar AngularJs Service');

app.value('number',100);

app.value('object',{'title':'AngularJs Service','desc':'Belajar'})

Padakodediatas,parameterpertamaadalahnamadarivaluedanparameterkeduaadalah

isinya.Setelahmendefiniskanvalue,kitabisameng-inject-nyadicontroller.

app.controller('MainController',['$scope','string',function($scope, string){ console.log(string); }]);

Cekhasilnyapadaconsoledibrowser.

AngularJsUntukPemula

Variabelstringyangdi-injectpadakodediatasadalahberasaldarivalueyangjugabernama

string yangberisi digunakan.
string
yangberisi
digunakan.

Belajar AngularJs Service

.Namakeduanyaharuspersissamaketika

3.2Factory

JikaValueterlihat

sudahberkenalandenganfactory.

kok gitu doang ya?

makapembacapastiakanmerasasenangjika

Berbedadenganvalueyangnilainyadi-hardcodesehinggatidakbersifatdinamismaka

factorybisamemberikannilaiyangdinamis.Yangperludiingatdarifactoryadalah,saat

di-injectnanti,yangdi-injectbukanlahfactoryitusendiritetapinilaiyangdikembalikan

olehnya.

Factoryjugadibuatdimodule,kaliinimenggunakanmethodyangbernamafactory.

var app=angular.module('MyApp',[]);

app.factory('myFactory', function(){ return 'Berasal dari dalam Factory'; });

Carameng-inject-nyasamapersisdenganvalue,perhatikankodedibawahinisebagai

referensi.

app.controller('MainController',['$scope','myFactory',function($scope, myFactory){ console.log(myFactory); }]);

SamadenganValue,namayangdi-injectjugasamadengannamafactoryyangkita

definisikansaatpembuatannya.Cekhasilnyapadaconsolebrowser.

Kurangaplikatifyacontohnya?.Okeyangagakmendingansayaberikancontohfactory

untukaplikasikalkulator.

Kalkulatormemiliki4operasidasar:tambah,kurang,kali,bagi.Tentusudahterpikirkan

bahwanilaiinputanharusbersifatdinamisyangartinyaberartikitamemerlukanparameter

untukmenanganihalyangbersifatdinamistersebut.Pertanyaanya,bisakahfactory

menerimaparameter?.

Jawabandaripertanyaandiatasadalahbisa,denganmemahamibahwayangdi-inject

adalahnilaikembaliandarifactory,bukanfactoryitusendirimakakitabisamembuatsebuah

factorysepertidibawahini.

AngularJsUntukPemula

var app=angular.module('MyApp',[]);

app.factory('KalkulatorFactory', function(){ var kalkulator={};

kalkulator.tambah=function(angkaA, angkaB){ return parseInt(angkaA)+parseInt(angkaB);

};

kalkulator.kurang=function(angkaA, angkaB){ return angkaA-angkaB;

};

kalkulator.kali=function(angkaA, angkaB){ return angkaA*angkaB;

};

kalkulator.bagi=function(angkaA, angkaB){ return angkaA/angkaB;

};

return kalkulator;

});

Padabagianpalingawaldarifactoryterdapatkode

digunakanuntukmembuatsebuahobjekyangbernama

berturut-turutadalahke-4operasidasarkalkulatoryangberupafungsiyangdimilikioleh

objekkalkulatortadi.Padabagianakhirobjekkalkulatordijadikannilaikembalianoleh factory.Denganobjekkalkulatordijadikansebagainilaikembalianmakanantikitabisa

menggunakaannyauntukmelakukanke-4operasidasar.Itulahmengapasayatekankan

dariawaluntukmemahamibahwapadafactoryyangdi-injectadalahnilaikembaliannya.

var kalkulator={};

kalkulator

.Kodeini

.Kodeberikutnya

Halamanviewkitabuatsebagaijalanbagipenggunauntukmemasukkanangkadan

memilihoperasimatematikaapayangakandigunakan.

AngularJsUntukPemula

<div ng-controller="MainController"> {{title}} <hr/>

Angka 1 :<input type="text" ng-model="angkaA"> </br> Angka 2 :<input type="text" ng-model="angkaB"> </br> Hasil : {{hasil}} </br> </br> <button ng-click="penambahan()">+</button> <button ng-click="pengurangan()">-</button> <button ng-click="perkalian()">*</button> <button ng-click="pembagian()">/</button> </div>

Danterakhir,bagianyangpentingadalahdi-controller,bagaimanacarakitamenggunakan

factoryuntukmelakukanoperasimatematika.

 

app.controller('MainController',['$scope','KalkulatorFactory',function($scope,KalkulatorF

$scope.title='Kalkulator Factory';

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

}

}]);

} $scope.pembagian=function(){ $scope.hasil=KalkulatorFactory.bagi($scope.angkaA,$scope.angkaB); } }]);
} $scope.pembagian=function(){ $scope.hasil=KalkulatorFactory.bagi($scope.angkaA,$scope.angkaB); } }]);

Sepertisudahselazimnya,kitameng-injectfactorykedalamcontrollerdengancaramem-

passingnamafactorydidalamparameterfungsi.Selanjutnya,karenanilaikembaliandari

factoryadalahobjekkalkulatoryangmemiliki4buahmethod,makakitabisamemanggil4

buahmethodtersebutdidalamcontroller.

Cobajalankandibrowser,masukkanangkapadatextboxdantekansalahsatutombol

operasi.Pastikankodepembacasudahberjalandenganbenar.

AngularJsUntukPemula

AngularJsUntukPemula 3.3Service Pendekarketigakitaadalah service .Kalausayabilang, service inimiripdengan factory .

3.3Service

Pendekarketigakitaadalahservice.Kalausayabilang,serviceinimiripdenganfactory.

Perbedaanantarakeduanyaadalah,jikapadafactoryyangdi-injectadalahnilaikembalian

darifactorymakapadaserviceyangdi-injectadalahserviceitusendiri.

Servicebekerjapadamoduledenganmenggunakanmethodservice.

var app=angular.module('MyApp',[]);

app.service('myService', function(){ this.methodA=function(){

}

this.methodB=function(){

}

});

AngularJsUntukPemula

Denganmasihmenggunakanaplikasikalkulatorsebagaicontoh,makakitaubahoperasi

matematikayangtadinyamenggunakanfactorymenjadimenggunakanservice.

var app=angular.module('MyApp',[]);

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

this.tambah=function(angkaA, angkaB){ return parseInt(angkaA)+parseInt(angkaB);

};

this.kurang=function(angkaA, angkaB){ return angkaA-angkaB;

};

this.kali=function(angkaA, angkaB){ return angkaA*angkaB;

};

this.bagi=function(angkaA, angkaB){ return angkaA/angkaB;

};

});

Padabagianviewsamasekalitidakadaperubahan.Padacontrollertinggalubahyang

tadinyanamafactorykitamenjadinamaservicekita,sebagaiberikutkodenya.

app.controller('MainController',['$scope','KalkulatorService',function($scope,KalkulatorS
app.controller('MainController',['$scope','KalkulatorService',function($scope,KalkulatorS
$scope.title='Kalkulator Service';
$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

Padakodediataskitayangpertamakitalakukanadalahmeng-injectKalkulatorService.

Karenaservicekitainimemangsudahberupaobjekdarisananyamakakitabisa

menggunakannyauntukmemanggilmethod-methodyangdimiliki.

Padabagianbelakang,yangdilakukanolehAngularJsadalahmelakukaninstantiasidari

KalkulatorService.

var theService = new KalkulatorService();

Jalankanpadabrowserdanpastikankalkulatorberjalandenganbenar,tidakadaerroryang

terjadi.

3.4ContohServiceHttp

Bagianinimemuatcontohpenggunaanserviceyangmemanfaatkankomponen

padaAngularJsuntukmengambildatajsonyangberasaldariWebAPI.Nilaibalikanjson

tersebutakankitatampilkanmelaluiAngularJs.

$http
$http

Kalaurasanyadaritadicontohserviceyangsayaberikanterkesankurangaplikatifmaka

contohkaliinisayajaminpastidigunakandidunianyata.Penggunaan

berkomunikasidenganWebAPIdigunakanjikakitamembangunaplikasiyangberhubungan

dengandata.

$http
$http

untuk

Langkahpertamapastisudahhafalya,membuatmoduldancontrollerkemudianpasang

padafileview.Janganlupauntukmemasukkanfile

padahalamanHtml.kemudianpasang padafile view .Janganlupauntukmemasukkanfile var app=angular.module('MyApp',[]);

var app=angular.module('MyApp',[]);

app.controller('MainController',['$scope',function($scope){ $scope.title="AngularJs Http Service"; }]);

<body ng-app="MyApp"> <div ng-controller="MainController"> {{title}} <hr/>

</div>

</body>

Selanjutnyakitabuatserviceyangmenggunakan

.Ketikkankodedibawahini.{{title}} <hr/> </div> </body> Selanjutnyakitabuat service yangmenggunakan Bab3Service 51

AngularJsUntukPemula

app.service('UsersService', ['$http',function($http){

this.index=function(){ return $http.get('http://jsonplaceholder.typicode.com/users');

}

}]);

Padaservicediatas,kitamelakukaninjeksikomponen $http sehinggabisadigunakandi
Padaservicediatas,kitamelakukaninjeksikomponen
$http
sehinggabisadigunakandi
dalamservice.Salahsatumethodyangdimilikioleh
$http
adalah
get
,digunakanuntuk

mengambildatayangterletakpadaendpointtertentu,dalamcontohdiatasadalah

http://jsonplaceholder.typicode.com/users

.

Kembalikebagiancontroller.Ubahcontrollersupayaservicediatasbisadigunakandan

panggilmethod

index
index

untukmengambildatayangberadapadaresourceserver.

app.controller('MainController',['$scope','UsersService', function($scope,UsersService){

$scope.title="AngularJs Http Service";

UsersService.index().success(function(data){

$scope.users=data;

});

}]);

$scope.title="AngularJs Http Service"; UsersService.index().success(function(data){ $scope.users=data; }); }]);
$scope.title="AngularJs Http Service"; UsersService.index().success(function(data){ $scope.users=data; }); }]);
$scope.title="AngularJs Http Service"; UsersService.index().success(function(data){ $scope.users=data; }); }]);

Apayangterjadidiatasadalahkitamelakukaninjeksiservicekedalamcontroller.

Selanjutnyaservicememanggilmethodyangdimilikiyaitu

dariWebAPI.Ketikaberhasil/success,datayangdiperolehdimasukkankedalamvariabel

yangbernama

index
index

untukmengambildata

users .
users
.

Kalausudahsampaisinisihsayarasapembacasudahtahubagaimanacaramenampilkan

datadariWebAPItadike

view
view

-nya.

AngularJsUntukPemula

<div ng-controller="MainController"> {{title}} <hr/>

<table>

<tr>

<th>Name</th>

<th>Username</th>

<th>Email</th>

<th>Website</th>

<th>Company</th>

</tr>

<tr ng-repeat="u in users"> <td>{{u.name}}</td> <td>{{u.username}}</td> <td>{{u.email}}</td> <td>{{u.website}}</td> <td>{{u.company.name}}</td> </tr> </table>

</div>

UntukHttpmethodyanglainseperti POST , DELETE dan PUT penggunaannyahampir
UntukHttpmethodyanglainseperti
POST
, DELETE
dan
PUT
penggunaannyahampir

sama,nantiakansayaperlihatkancontohnyapadababyangmembahasstudikasus.

AngularJsUntukPemula

Bab4Route

Materiyangdipelajaripadababini:

RouteProviderBab4Route Materiyangdipelajaripadababini: RouteParam

RouteParamBab4Route Materiyangdipelajaripadababini: RouteProvider

Suatuaplikasiyangbergunasangatjarangataubahkantidakadayanghanyamemilikisatu

halamantanpaadanyahalamanyanglain.Khususuntukaplikasiweb,halaman–halaman

yangsatuberkolaborasidenganhalamanmelaluiperantarasebuahlink.

Berbedadenganaplikasiwebpadaumumnyadimanaketikasebuahlinkdiklikdan

berpindahkehalamanlainyangterjadiadalahadanyaprosesreload,makajika

menggunakanAngularJs,transisiakanterasasmoothtanpaadanyaprosesreload.

4.1RouteProvider

RouteprovideradalahkomponenpadaAngularJsyangdigunakanuntukmengkonfigurasi

routeyangadapadaaplikasikita.Apasajayangdikonfigurasi?Sebelumsaya

menjawabnyasayaperlumemperlihatkankepadapembacacontohurldariaplikasi

AngularJsyangmemilikiroute.

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

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

Url–urldiatasmengaksesaplikasiyangsamatetapimemilikirouteyangberbeda.Route

ditandaidenganadanyatanda

#
#

.Dibelakangtanda#tersebutadalahroute-nya.

Balikkepertanyaantadi,apasajayangdikonfigurasimenggunakanrouteprovider?.Ada2

halyangdikonfigurasi,yaitu:

1. Templateyangakanditampikan

2. Controlleryangbekerjapadatemplateyangditampilkan

Langsungkecontohsajayabiarpahammaksudnyabagaimanadancaramenggunakannya

sepertiapa.Kasusnyamisalkitainginmembuat3buahhalamanyaitu

home , about
home
, about

dan

contact
contact

.Masing–masinghalamanmemilikikontenyangberbedasatusamalain.Mari

langsungkitaterjunkekoding.

AngularJsUntukPemula

Dibawahiniadalahstrukturakhirdarifolderdanfiledaricontohyangakankitakerjakan.

Jikaditengahjalannantipembacamerasabingungdenganpeletakanfoldersertafilemaka

bisamerujukkegambarini.

bisamerujukkegambarini. Buatsebuahmoduldidalamfile

Buatsebuahmoduldidalamfile

sedikitperbedaan,cobalihatperbedaannyadimana.

app.js
app.js

sepertiyangsudah-sudah.Akantetapi,kaliiniada

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

Perbedaannyaterletakpadaapayangadadidalamtandakurungkurawal,yaituadanya

ngRoute
ngRoute

yangmerupakanmoduluntukrouteyangmemangdibuatterpisahdarimodul

utamaAngularJs.Untukbisamenggunakanroutekitaharusmemuatnyakedalammodul

yangkitabuat.

Selanjutnyabuat3buahcontrolleryangterletakdidalamfoldercontrollers,masing-masing

adalah

HomeController

,

AboutController

,dan

ContactController

.

AngularJsUntukPemula

app.controller('HomeController',['$scope', function($scope){ $scope.title = 'Home'; $scope.message = 'My name is Agung Setiawan and I am a Software Engineer'; }]);

app.controller('AboutController',['$scope', function($scope){ $scope.title = 'About';
app.controller('AboutController',['$scope', function($scope){
$scope.title = 'About';
$scope.message = 'MI have various kind of experience developing software';
$scope.technologies = ['C#','ASP.NET MVC','LINQ','Entity Framework','SQL','GIT','Ruby'
}]);
app.controller('ContactController',['$scope', function($scope){ $scope.title = 'Contact';
app.controller('ContactController',['$scope', function($scope){
$scope.title = 'Contact';
$scope.contacts = ['com.agungsetiawan@gmail.com','@agungsetiawanmu','http://agung-setia
}]);

Darimasing-masingcontrollerdiataskitabuatkanhalamanhtml-nyayangterletakdidalam

folderpages.Pertamaadalahhalamanatautemplateuntuk

HomeController

.

<h3>{{title}}</h3>

{{message}}

Kemudiantemplateuntuk

AboutController

<h3>{{title}}</h3>

{{message}}

<ul ng-repeat='t in technologies'> <li>{{t}}</li> <ul>

Danterakhiradalahtemplateuntuk

ContactController

.

<h3>{{title}}</h3>

<ul ng-repeat='c in contacts'> <li>{{c}}</li> <ul>

AngularJsUntukPemula

Nahkarenacontrollersudahsiapdantemplatejugasudahsiapmakasekarangsaatnyakita

melakukankonfigurasiuntukroute.Sepertiyangsudahsayakatakandiawalbabbahwa

yangperludikonfigurasiadalahcontrolleryangmanadantemplateyangmanayangakan

dipilihketikarouteyangsedangdiaksesadalahyangini.

Karenakitasudahmemuatmodul

memilikiaksesuntukmenggunakan

untukmelakukankonfigurasi.

ngRoute
ngRoute

kedalammoduldariaplikasikitamakakita

$routeProvider

.Komponeninilahyangkitagunakan

Padafile

Angularkita.

route.js

ketikkankodedibawahiniyangberperanmengaturroutepadaaplikasi

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

sendiri,istilahkerennyaselfexplanatory.

Method

controllerdantemplateyangdigunakanadalahydanz.Sudahhanyasesederhanaitu.

Padakodediatasberartiketikaurlyangdiaksesadalah

controlleryangbekerjaadalah

when
when

digunakanuntukmengaturketikarouteyangadapadaurlbernilaixmaka

AboutController

http://xxx/#/about

maka

dantemplateyangdigunakanadalah

about.html . Selain when
about.html
.
Selain
when

adasatulagipadakodediatasyaitu

otherwise

yangdigunakanuntuk

menanganiroute-routeyangtidakdikenal.Jikaadarouteyangtidakdikenalmakamethod

iniyangdigunakan.Padakodediatasjikaadaroutetidakdikenalmakaakandialihkanke

rooturl.

Baginterakhiradalahmembuathalamanutamayangakanmemuatsemuacontrollerserta

templateketikaroutebernilaisesuai.Padafile

index.html

ketikkankodehtmlberikutini.

AngularJsUntukPemula

 

<!DOCTYPE html> <html> <head> <title>AngularJs Route</title> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></sc <script src='https://code.angularjs.org/1.4.7/angular-route.min.js'></script> </head>

<body ng-app='AngularRouteApp'>

<a href='#/'/>Home</a> <a href='#/about'/>About</a> <a href='#/contact'/>Contact</a>

<div> <div ng-view></div> </div>

<script src='js/app.js'></script> <script src='js/route.js'></script> <script src='js/controllers/HomeController.js'></script> <script src='js/controllers/AboutController.js'></script> <script src='js/controllers/ContactController.js'></script>

</body>

</html>

<script src='js/controllers/ContactController.js'></script> </body> </html>
<script src='js/controllers/ContactController.js'></script> </body> </html>

Bentukhtml-nyamasihmiripdenganyangsebelum–sebelumnya,hanyaada2tambahan

yangbaru.Tambahanpertamaadalahkitamemuatfile

yangdidalamnyaterdapatmodul

yangdigunakansebagaiplaceholder untuktemplateyangakandimuatsesuai placeholderuntuktemplateyangakandimuatsesuai

denganroute.

angular-route.min.js

.Fileinilah

ngRoute
ngRoute

.Tambahankeduaadalahpenggunaandirective

Pentinguntukdiperhatikan.Pembacaharusmenjalankankode-kodediataspadasebuah

webserversepertisebelumnyapadababyangmembahasdirective.Jikatidak,makanakan

terjadierror.

Setelahbisadijalankansilahkannikmatiperpindahanantarhalamanyangterasasangat

smooth.

Berikutdibawahadalahscreenshot-nya.

AngularJsUntukPemula

AngularJsUntukPemula Bab4Route 59

AngularJsUntukPemula

AngularJsUntukPemula Bab4Route 60

AngularJsUntukPemula

AngularJsUntukPemula 4.2RouteParams Komponenyangsatuinidigunakanuntukmenangkapparameteryangadadiurl.Kalau

4.2RouteParams

Komponenyangsatuinidigunakanuntukmenangkapparameteryangadadiurl.Kalau

pembacasudahpernahmenggunakanbahasapemrogramanyangbekerjadisisiserver

pastitidakasingdenganyangdimaksudurlparameter.

Padacontohurl-urlyangmemilikiroutepadasubbab4.1sebelumnyasayamenyertakan

satuyangmemilikiparameteryaitu

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

Angka123adalahparameter.Denganadanyaparameterinikitabisamengambilnilai123

untukkemudianmenggunakannyauntukkepentinganaplikasikita,misalnyamengambil

databukuyangmemilikiidsamadengan123.Sekalilagi,jikapembacasudahpernah

ngodingaplikasiwebpastisangatpahamdengankonsepini.

Kembalikitaterjunkekodingsupayapahamcaramengambilnilaiparameteryangadapada

url.Contohkodeyangakandikerjakanlanjutandarikodesebelumnyasajaya.

Buatsebuahcontrollerbarudengannama

kodenya.

ParamControlle

rdandibawahiniadalah

AngularJsUntukPemula

app.controller('ParamController',['$scope','$routeParams', function($scope,$routeParams){ $scope.title = 'Parametes'; $scope.param = $routeParams.theparam; }]);

function($scope,$routeParams){ $scope.title = 'Parametes'; $scope.param = $routeParams.theparam; }]);
function($scope,$routeParams){ $scope.title = 'Parametes'; $scope.param = $routeParams.theparam; }]);

Dibagiancontrolleriniadasebuahkomponenbaruyangdi-injectyaitu

digunakanuntukmengambilnilaiparameteryangadadiurl.Padabagianisiadakode

sepertiini

$routeParams

yang

$scope.param = $routeParams.theparam;

Darimanabagian

route.Padakonfigurasiyangsudahadatambahkanroutebarusebagaiberikut.

theparam

didapatkan?Jawabannyaadalahadapadabagiankonfigurasi

when('/param/:theparam',{ templateUrl : 'pages/param.html', controller : 'ParamController'

})

Padakonfigruasiroutekitamendefiniskannamaparameteryangakandiambilmelalui

controller,padakodediatasnamaparameternyaadalah

namaharussama,jikadikonfigurasinamanyaadalah

jugaharus

theparam paramsay
theparam
paramsay

.Padakeduabagianitu

amakapadacontroller

paramsaya

.Sudahjelasbukansekarang?

Selanjutnyamembuattemplateyangakanditampilkan.

<h3>{{title}}</h3>

The parameter is {{param}}

Danlangkahterakhiradalahmenambahkanlinkuntukmenujuhalamanparameterdan

menambahkanfilecontrollerbarupadafile

index.html

.

<a href='#/param/agung'>Param</a>

<script src='js/controllers/ParamController.js'></script>

Cobaakseslinkbarutersebutdandibawahiniadalahhasilnya.

AngularJsUntukPemula

AngularJsUntukPemula Bab4Route 63

AngularJsUntukPemula

Bab5$watch,$digestdan$apply

Sudahkitapelajaribersamapadabab–babawalbahwaketikaadaperubahannilaipada

viewmakaperubahanjugaakanterjadipadascopeyangadadicontrollerdanbegitujuga

sebaliknyaketikanilaiscopedicontrollerberubahmakaperubahanpadaviewpunakan

terjadijuga.

KemampuanAngularuntukmelakukanhal–haltersebutberhubungandenganmethod–

dan

akandijalankansecaraautomatisolehAngularuntukmemperbaharuinilaitetapidan methodyangdimiliknyayaitu $watch , $digest dan $apply

methodyangdimiliknyayaitu

$watch , $digest
$watch
, $digest

dan

$apply
$apply

.Secaraumum,

$watch
$watch

adakondisidimanakitaharusmenggunakannyasecaramanualuntukmengupdatenilai.

5.1$watch

berfungsiuntukmengawasiperubahannilaiyangterjadipadasebuahvariabeldi5.1$watch scope

scope.Parameterpertamadarimethodiniadalahstringdarinamavariabelyangakan

diawasikemudianparameterkeduaadalahberupafungsiyangakandijalankan(listener)

ketikanilaiyangdiawasiberubah.

Sayasertakanpotongankodecontohdibawahiniuntukmemahamicarakerja

$watch .
$watch
.

<body ng-app='AngularWatchApp' ng-controller='MainController'> <input type='text' ng-model='book'/>

<div>

{{book}}

</div>

<div> Book has been changed {{count}} times. </div>

<!-- include .js here -–!> </body>

Halamandiatasakanmemunculkanteksmasukanyangnilainyalangsungdimunculkandi

bawahnya.Kitaakanmemunculkanangkaberapakalinilaisudahdiubahdengan

menggunakan

$watch
$watch

.Padacontrollerberikutadalahkodenya.

AngularJsUntukPemula

app.controller('MainController', function($scope){ $scope.book = 'Zero to One'; $scope.count = 0;

$scope.$watch('book', function(newValue, oldValue){ $scope.count = $scope.count + 1;

})

});

Cobajalankandanubahnilaiyangadapadateksmasukanmakasetiapperubahanyang

terjadiakanmembuatnilaidaricounterbertambah.

5.2$digest

Methodinibekerjadengancaraberkelilingkesemuawatchyangada.Ketikaberkeliling

nyamperintiapwatch,diangecekapakahnilaiyangdiawasisiwatchiniberubahatautidak,

jikaberubahmakadiamanggilfungsiyangjadiparameterkeduadarisiwatch(fungsi

listener).

Adasuatukasusdimanakitaharusmemanggil

terupdate.Padakasustertentusaatmelakukanprosesdatabindingadadataterbaruyang

tidakterupdatemakakondisisepertiinibiasanyakarena

automatisdankitaharusmenjalankannyasecaramanual.

$digest
$digest

supayanilaidarivariabelbisa

$digest
$digest

tidakjalansecara

link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.dunia='Saya diklik'; scope.$digest(); });

}

Contohkodediatassayaambildarikodesaatkitabelajarbersamamateridirective.Coba

jalankankodeyangadapadamateritersebuttetapidenganmenghilangkanbaris

scope.$digest() makavariabel dunia yangberisi saya diklik tidakakanmunculdi-view. Haliniterjadikarena $digest
scope.$digest()
makavariabel
dunia
yangberisi
saya diklik
tidakakanmunculdi-view.
Haliniterjadikarena
$digest
tidakjalankarenakodeiniberadadiluarjangkauanlangsung
dari
$scope
yangadadicontroller.

5.3$apply

AngularJsUntukPemula

Kalausayabilangmethodinimerupakanpenyederhanaandaripenggunaan

$digest .
$digest
.
$apply
$apply

menjalankanfungsiyangmenjadiparameternyakemudiansecaraautomatisdia

akanmenjalankan

menjadisepertiini.

$digest
$digest

.Denganpengertianinimakakodesebelumnyabisadiubah

link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.$apply(function(){ scope.dunia='Saya diklik'; }); });

}

AngularJsUntukPemula

Bab6ContohAplikasiCRUD

MenggunakanWebAPI

Comingsoonya,staytuned;)

Aplikasicontohnyasudahjadi,webapi-nyapunsudahjadi.Masihperluwaktuuntuk

menuliskannyadibukuinijadikalimatyangenakdipahami.

Sebagaiiming-imingmakasayasertakanbeberapascreenshotcontohaplikasinya.

Sebagaiiming-imingmakasayasertakanbeberapa screenshot contohaplikasinya. Bab6ContohAplikasiCRUDMenggunakanWebAPI 67

AngularJsUntukPemula

AngularJsUntukPemula Bab6ContohAplikasiCRUDMenggunakanWebAPI 68
AngularJsUntukPemula Bab6ContohAplikasiCRUDMenggunakanWebAPI 68

AngularJsUntukPemula

AngularJsUntukPemula Bab6ContohAplikasiCRUDMenggunakanWebAPI 69