Angular JS - Fungsi Lanjutan Angular JS

MODUL 3 FUNGSI LANJUTAN ANGULAR JS TRANSFER OF KNOWLEDGE | AULIA OKTAVELLA P DAFTAR ISI I. ANGULAR JS MODEL ....................................................................................................................... 1 1.1 Directive ng-model.................................................................................................................. 1 1.2 Two-Way Binding .................................................................................................................... 1 1.3 Validate User Input ................................................................................................................. 1 1.4 Application Status ................................................................................................................... 1 1.5 CSS Classes .............................................................................................................................. 1 II. ANGULAR JS CONTROLLERS ............................................................................................................ 2 2.1 Penerapan Controller .............................................................................................................. 2 2.2 Controller Methods................................................................................................................. 2 2.3 Controller pada External Files ................................................................................................. 3 III. ANGULAR JS SCOPES ....................................................................................................................... 3 3.1 Penggunaan Scope .................................................................................................................. 3 3.2 Pemahaman tentang Scope .................................................................................................... 4 3.3 Root Scope .............................................................................................................................. 4 IV. ANGULAR JS FILTERS ....................................................................................................................... 5 4.1 Filter pada Expression ............................................................................................................. 5 4.2 Filter pada Directive ................................................................................................................ 5 4.3 Filter pada Array berdasarkan Inputan ................................................................................... 6 4.4 Custom Filter ........................................................................................................................... 6 V. ANGULAR JS SERVICES .................................................................................................................... 7 5.1 Penggunaan Services .............................................................................................................. 7 5.2 The $http Service .................................................................................................................... 7 5.3 The $timeout Service .............................................................................................................. 7 5.4 The $interval Service ............................................................................................................... 8 5.5 Custom Service........................................................................................................................ 8 VI. ANGULAR JS EVENTS ....................................................................................................................... 8 6.1 Mouse Events .......................................................................................................................... 8 6.2 The ng-click Directive .............................................................................................................. 9 6.3 Toggle, True/False ................................................................................................................... 9 6.4 $event Object........................................................................................................................ 10 VII. ANGULAR JS FORMS...................................................................................................................... 10 7.1 Input Control ......................................................................................................................... 10 7.2 Data Binding .......................................................................................................................... 10 7.3 Checkbox ............................................................................................................................... 11 7.4 Radiobuttons ......................................................................................................................... 11 7.5 Selectbox ............................................................................................................................... 11 VIII. REFERENSI ..................................................................................................................................... 11 L I. ANGULAR JS MODEL Directive ng-model berfungsi untuk mengambil nilai pada tag HTML (input , select , textarea ) pada Aplikasi Angular JS 1.1 Directive ng-model Dengan directive ng-model Anda dapat mengikat nilai dari input field ke variable yang dibuat di Angular JS <div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="name"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script> 1.2 Two-Way Binding Binding berlangsung di dua arah. JIka pengguna mengubah nilai di dalam input field, maka properti Angular JS juga akan mengubah nilainya. <div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model="name"> <h1>You entered: {{name}}</h1> </div> 1.3 Validate User Input Directive ng-model dapat menyediakan validasi tipe untuk data aplikasi (number, email, required). Pada contoh dibawah, <span> hanya akan ditampilkan jika expression dalam attribute ngshow menghasilkan nilai true. <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span> </form> 1.4 Application Status Directive ng-model dapat memberikan status untuk data aplikasi (invalid, dirty, touched, error): <form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required> <h1>Status</h1> {{myForm.myAddress.$valid}} {{myForm.myAddress.$dirty}} {{myForm.myAddress.$touched}} </form> 1.5 CSS Classes Directive ng-model menyediakan class CSS untuk elemen HTML, tergantung pada statusnya. Directive ng-model menambahkan / menghapus kelas-kelas berikut, sesuai dengan status kolom form: ➢ ng-empty ➢ ng-untouched ➢ ng-dirty ➢ ng-not-empty ➢ ng-valid ➢ ng-pending ➢ ng-touched ➢ ng-invalid ➢ ng-pristine MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 1 L II. ANGULAR JS CONTROLLERS Aplikasi AngularJS bergantung pada controller untuk mengontrol aliran data dalam aplikasi. Sebuah controller didefinisikan menggunakan direktif ng-controller. Sebuah controller adalah Objek JavaScript yang berisi atribut / sifat, dan fungsi. Setiap controller menerima $scope sebagai parameter, yang mengacu pada aplikasi / modul bahwa controller perlu untuk ditangani. 2.1 Penerapan Controller Berikut ini adalah contoh penerapan controller pada Aplikasi Angular JS. <div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> Dari kode program diatas, berikut adalah penjelasannya : ➢ Aplikasi Angular JS di definisikan oleh ng-app = “myApp”. Aplikasi ini berjalan di dalam sebuah tag <div> ➢ Atribute ng-controller = “myCtrl” adalah directive Angular JS yang didefinisikan sebagai controller. ➢ Function myCtrl adalah fungsi JavaScript ➢ Pada kode program diatas, controller dipanggil dengan objek $scope. Di Angular JS $scope merupakan application object (sebagai pemilik dari variable dan fungsi yang ada di aplikasi). ➢ Controller yang telah didefinisikan diatas, membuat dua properties/variable di dalam scope dengan nama firstName dan lastName ➢ Directive ng-model melakukan bind pada input fields ke controller properties (firstName dan lastName) 2.2 Controller Methods Controller juga dapat memiliki method ((variables as functions) : <div ng-app="myApp" ng-controller="personCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{fullName()}} </div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; }; }); </script> MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 2 L 2.3 Controller pada External Files Dalam pengembangan Aplikasi yang lebih besar, biasanya controller disimpan pada file external. Hal itu dapat dilakukan dengan meletakkan nama file controller diantara tag <script>, seperti yang terlihat pada kode dibawah ini : <div ng-app="myApp" ng-controller="personCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{fullName()}} </div> <script src="personController.js"></script> Contoh lainnya : Pada contoh ini , kita membuat sebuah file controller kemudian simpan dengan nama namesController.js angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; }); Kemudian memanggil file controller yang telah kita buat ke dalam aplikasi <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script src="namesController.js"></script> III. ANGULAR JS SCOPES Scope diibaratkan sebagai sebuah objek yang menjadi penghubung antara View dan Controller. Scope memegang data yang dibutuhkan untuk kemudian ditampilkan. Controller bertanggung jawab untuk menginisialisasi data dan kemudian View membutuhkannya untuk ditampilkan. Hal ini dilakukan dengan membuat perubahan pada Scope. 3.1 Penggunaan Scope Kapankah kita dapat menggunakan scope ?? Ketika kita membuat sebuah controller di Angular JS, dengan mengirimkan objek $scope sebagai argument. Contoh : Properties yang dibuat di controller, dapat di panggil dalam view. Ketika menambahkan properti ke objek $scope di controller, view (HTML) akan mendapatkan akses ke properti tersebut. Di dalam view kita tidak memanggilnya menggunakan “$scope”, melainkan hanya merujuk pada nama properti seperti {{carname}} <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 3 L $scope.carname = "Volvo"; }); </script> 3.2 Pemahaman tentang Scope Jika dipahami lebih lanjut, aplikasi Angular JS terdiri dari : ➢ View, merupakan HTML. ➢ Model, merupakan data yang tersedia untuk view. ➢ Controller, merupakan fungsi JavaScript yang membuat/mengubah/menghapus/mengontrol data. Scope merupakan objek JavaScript yang memiliki properti dan method, yang dapat digunakan di view maupun controller. Contoh : Ketika kita melakukan perubahan pada view, maka model dan controller juga akan ikut mengalami perubahan <div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>My name is {{name}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script> 3.3 Root Scope Semua aplikasi memiliki $rootScope, merupakan scope yang dibuat pada elemen HTML yang berisi directive ng-app. Jika sebuah variable memiliki nama yang sama pada current scope dan di rootScope, maka aplikasi akan membaca variable yang ada pada current scope. Contoh : Sebuah variable dengan nama “color” yang berada di kedua controller scope dan rootScope <body ng-app="myApp"> <p>The rootScope's favorite color:</p> <h1>{{color}}</h1> <div ng-controller="myCtrl"> <p>The scope of the controller's favorite color:</p> <h1>{{color}}</h1> </div> <p>The rootScope's favorite color is still:</p> <h1>{{color}}</h1> <script> var app = angular.module('myApp', []); app.run(function($rootScope) { $rootScope.color = 'blue'; }); app.controller('myCtrl', function($scope) { $scope.color = "red"; }); </script> </body> MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 4 L IV. ANGULAR JS FILTERS Di dalam membangun sebuah aplikasi, kita pasti akan dihadapkan pada bagaimana cara untuk memanipulasi data. Dengan tujuan untuk memudahkan user dalam membaca dan menggunakan data. AngularJS memiliki filter untuk membantu Anda melakukannya, filter sangat baik untuk memanipulasi teks dalam tampilan HTML Anda. Filter bisa digunakan di dalam controller menggunakan tanda pipeline atau karakter | . Filter dalam AngularJS adalah case sensitive, jadi Anda mesti berhati-hati di dalam menggunakannya. Di bawah ini adalah beberapa filter yang umum digunakan. Nama Filter Fungsi currency Format a number to a currency format. date Format a date to a specified format. filter Select a subset of items from an array. json Format an object to a JSON string limitTo Limits an array/string, into a specified number of elements/characters. lowercase Format a string to lower case. number Format a number to a string. orderBy Orders an array by an expression. uppercase Format a string to upper case. 4.1 Filter pada Expression Filter dapat ditambahkan kedalam expression dengan menggunakan karakter “|”, kemudian diikuti dengan filter. Contoh : Melakukan filter dengan mengubah ke uppercase <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> </div> Contoh : Melakukan filter dengan mengubah ke lowercase <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | lowercase }}</p> </div> 4.2 Filter pada Directive Filter juga dapat ditambahkan ke dalam directive, dengan menggunakan karakter pipa “|” dan diikuti dengan filter, seperti pada ng-repeat dibawah ini : MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 5 L <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div> 4.3 Filter pada Array berdasarkan Inputan Untuk dapat melakukan filter pada array dengan menggunakan inputan, kita bisa melakukannya dengan memasukkan directive ng-model kedalam form <input>, sehingga nilai yang dimasukkan pada form inputan akan digunakan expression dalam filter. Ketika kita memasukkan nilai ke dalam form inputan tersebut, maka yang tampil dari array tersebut adalah yang sesuai dengan nilai yang dimasukkan. <div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter : test"> {{ x }} </li> </ul> </div> 4.4 Custom Filter Selain menggunakan filter yang telah disediakan, kita juga bisa membuat filter sendiri dengan mendaftarkan fungsi filter baru dengan module anda. Seperti contoh kode dibawah ini, kita membuat custom filter dengan nama “myFormat”. Filter myFormat dibawah ini akan mengubah setiap karakter menjadi uppercase (huruf kapital). <ul ng-app="myApp" ng-controller="namesCtrl"> <li ng-repeat="x in names"> {{x | myFormat}} </li> </ul> <script> var app = angular.module('myApp', []); app.filter('myFormat', function() { return function(x) { var i, c, txt = ""; for (i = 0; i < x.length; i++) { c = x[i]; if (i % 2 == 0) { c = c.toUpperCase(); MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 6 L } txt += c; } return txt; }; }); app.controller('namesCtrl', function($scope) { $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai']; }); </script> V. ANGULAR JS SERVICES Pada Angular JS, service adalah fungsi atau objek yang tersedia dan terbatas hanya untuk aplikasi Angular JS yang dikembangkan. Pada Angular JS, kita dapat menggunakan salah satu dari banyak service yang telah di sediakan oleh Angular JS, maupun membuat service sendiri. Angular JS memiliki sekitar 30 service built-in, salah satunya adalah $location service. $location service memiliki method yang dapat mengembalikan informasi tentang lokasi halaman web saat ini. Contoh : Kode program dibawah ini menggunakan service $location built-in untuk mendapatkan url dari halaman web yang sedang dibuka. Service $location diteruskan ke controller sebagai argument. Dalam penggunaan service di controller, maka harus di definisikan sebagai dependency. var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); 5.1 Penggunaan Services Terdapat banyak service dalam Angular JS, seperti service $location, kegunaan nya hampir sama seperti ketika menggunakan objek yang sudah ada di DOM, seperti window.location object. Namun penggunaan object yang ada di DOM memiliki beberapa keterbatasan di Angular JS. Pada Angular JS proses handle changes dan event properly, lebih baik jika menggunakan service $location daripada window.location object. 5.2 The $http Service $http Service merupakan salah satu service yang paling umum atau bahkan sering digunakan dalam aplikasi Angular JS. Service ini digunakan untuk melakukan request ke server, dan memungkinkan aplikasi dalam menangani response. Service ini digunakan untuk meminta data dari server. Berikut ini adalah contoh penggunaan sederhana dari $http service : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); 5.3 The $timeout Service $timeout Service merupakan fungsi dari window.setTimeOut versi Angular JS. Berikut adalah contoh penggunaan nya (menampilkan pesan baru setelah 2 detik) : app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 7 L $scope.myHeader = "How are you today?"; }, 2000); }); 5.4 The $interval Service $internal Service merupakan fungsi window.setInterval versi Angular JS. Berikut ini adalah contoh penggunaan nya dengan menampilkan waktu setiap detik : var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); }); 5.5 Custom Service Selain penggunaan service yang telah disediakan oleh Angular JS, kita juga bisa membuat service kita sendiri. Untuk membuat custom service, maka hubungkan service yang telah dibuat ke module. Contoh : Membuat service dengan nama hexafy app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); Untuk menggunakan atau memanggil service yang telah dibuat maka tambahkan dependency saat mendefinisikan controller. Service yang telah dibuat khusus dengan nama hexagy ini digunakan untuk mengubah angka menjadi heksadesimal. app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255); }); VI. ANGULAR JS EVENTS Pada Angular JS, kita dapat menambahkan event listeners ke elemen HTML dengan menggunakan beberapa directive berikut ini : ➢ ng-mouseleave ➢ ng-focus ➢ ng-blur ➢ ng-mousemove ➢ ng-keydown ➢ ng-change ➢ ng-mouseover ➢ ng-keypress ➢ ng-click ➢ ng-mouseup ➢ ng-keyup ➢ ng-copy ➢ ng-paste ➢ ng-mousedown ➢ ng-cut ➢ ng-mouseenter ➢ ng-dblclick Event Directive dapat memungkinkan kita untuk menjalankan fungsi Angular JS pada penggunaan tertentu. Angular JS event tidak akan menimpa (overwrite) HTML event, ketika keduanya dieksekusi secara bersamaan. 6.1 Mouse Events Mouse Event dapat terjadi ketika kursor bergerak diatas elemen berikut ini : ➢ ng-mouseover ➢ ng-mouseenter ➢ ng-mousemove MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 8 L ➢ ng-mouseleave Atau ketika tombol mouse diklik pada elemen berikut ini : ➢ ng-mousedown ➢ ng-mouseup ➢ ng-click Contoh : Meningkatkan jumlah variabelketika mouse bergerak pada elemen <h1> <div ng-app="myApp" ng-controller="myCtrl"> <h1 ng-mousemove="count = count + 1">Mouse over me!</h1> <h2>{{ count }}</h2> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script> 6.2 The ng-click Directive Perintah ng-click mendefinisikan kode Angular JS yang akan dijalankan ketika elemen tersebut sedang di klik. <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">Click me!</button> <p>{{ count }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script> 6.3 Toggle, True/False Ketika kita ingin menampilkan sebagian dari kode HTML ketika di klik, dan menyembunyikannya ketika tombol tersebut di klik lagi, seperti dropdown menu atau membuat tombol yang tampak seperti toogle switch. Perhatikan contoh berikut : ➢ Variabel showMe di insialisasi awal dengan nilai Boolean = false ➢ Fungsi myFunc digunakan untuk menetapkan variable showMe ke arah kebalikannya dengan menggunakan “!” (not operator) <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="myFunc()">Click Me!</button> <div ng-show="showMe"> <h1>Menu:</h1> <div>Pizza</div> <div>Pasta</div> <div>Pesce</div> </div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.showMe = false; MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 9 L $scope.myFunc = function() { $scope.showMe = !$scope.showMe; } }); </script> 6.4 $event Object Pada Angular JS, kita dapat mengirimkan $event object sebagai argument ketika memanggil sebuah fungsi. Perhatikan contoh berikut ($event object berisi browser’s event object) : <div ng-app="myApp" ng-controller="myCtrl"> <h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1> <p>Coordinates: {{x + ', ' + y}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.myFunc = function(myE) { $scope.x = myE.clientX; $scope.y = myE.clientY; } }); </script> VII. ANGULAR JS FORMS Form pada Angular JS menyediakan data binding dan validasi dari input control. 7.1 Input Control Input control adalah HTML input element, seperti : ➢ input elements ➢ select elements ➢ button elements ➢ textarea elements 7.2 Data Binding Input control menyediakan data binding dengan menggunakan directive ng-model <input type="text" ng-model="firstname"> Sekarang aplikasi ini memiliki properti dengan nama fisrtname. Directive ng-model binding (mengikat) input controller ke seluruh aplikasi. Properti bernama firstname, dapat langsung dirujuk dalam controller, seperti yang terlihat pada kode dibawah ini : <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.firstname = "John"; }); </script> Properti bernama firstname juga dapat dirujuk ke tempat lain yang berada dalam aplikasi, perhatikan kode program dibawah ini : <form> First Name: <input type="text" ng-model="firstname"> </form> <h1>You entered: {{firstname}}</h1> MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 10 L 7.3 Checkbox Checkbox memiliki dua nilai yaitu true atau false. Untuk penerapan checkbox, gunakan directive ng-model , dan gunakan nilai nya pada aplikasi yang dibuat. Berikut ini adalah contoh (menampilkan header, ketika checkbox di centang) : <form> Check to show a header: <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">My Header</h1> 7.4 Radiobuttons Melakukan binding pada radio buttons ke aplikasi dengan menggunakan directive ng-model. Radio buttons dengan ng-model yang sama dapat memiliki nilai yang berbeda, tetapi hanya yang terpiih yang akan digunakan. Berikut ini adalah contoh (menampilkan beberapa teks berdasarkan nilai yang dipilih pada radio button : <form> Pick a <input <input <input </form> topic: type="radio" ng-model="myVar" value="dogs">Dogs type="radio" ng-model="myVar" value="tuts">Tutorials type="radio" ng-model="myVar" value="cars">Cars 7.5 Selectbox Melakukan binding pada selectbox ke aplikasi dengan menggunakan directive ng-model. Properti yang didefinisikan dalam atribut ng-model akan memiliki nilai yang sama dengan opsi yang dipilih pada selectbox. <form> Select a topic: <select ng-model="myVar"> <option value=""> <option value="dogs">Dogs <option value="tuts">Tutorials <option value="cars">Cars </select> </form> VIII. REFERENSI 1. 2. 3. https://www.yudana.id/expressions-dan-controllers-pada-angular-js/ https://kursuswebdesign.org/pengenalan-serta-fungsi-ng-app-ng-model-ng-bind-padaangular-js/ https://www.w3schools.com/angular/ MODUL 3 – FUNGSI LANJUTAN ANGULAR JS 11