Pemrograman Web #11 - Angular JS

Mengenal ANGULAR JS

Angular Js merupakan salah satu frame work MVC yang dapat digunakan dalam membangun aplikasi web berbasis javascript. Untuk mempelajari angular js dapat mengakses dokumentasi dari angular js di https://angularjs.org
Angular js memperluas atribut HTML dengan directives dan mengikat data ke HTML dengan Expression
Ada 3 macam ng-directives:

• Ng-app: directive yang mendefinisikan sebuah aplilasi angular js
• Ng-model: directive yang mengikat nilai dari HTML control (input, select, text area dll) ke data application
• Ng-bind: directive yang mengikat data application ke HTML view

Prefix ng- menunjukkan directive sebuah variable di dalam aplikasi angular.

Instalasi Angular JS

Untuk menggunakan angular dapat dilakukan dengan beberapa cara:

1. Mendownload File angular dari situs resmi.
   Silakan masuk ke situs: https://code.angularjs.org/1.6.10
   Dan langsung download file angular; yang terpenting adalah file angular-1.6.10.zip dan angular-animate.min.js;
2. Menggunakan file yang tersedia di CDN
   Link File ANGULAR:
   

   https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js

Angular JS Directive

AngularJS directives memperluas atribut HTML dengan prefik ng-

• Ng-app merupakan directive menginisialisasi sebuah aplikasi angular js
• Ng-init merupakan directive menginisalisasi data aplikasi
• Ng-model merupakan directive yang mengikat nilai dari HTML control(input,select,textarea) ke data aplikasi

Contoh:

<div ng-app="nama" ng-init="" username="artterror">
 <p>Username : <input type="text" ng-model="username"></p>
 <p>{{ username }}</p>
</div>

Data Binding

{{ variable }} merupakan data binding dalam aplikasi angular JS
Data binding di dalam angular js mengikat ekspresi angular js dengan angular data.
Contoh:

<div ng-app="" ng-init="">
 <p>Panjang : <input type="text" ng-model="panjang"></p>
 <p>Lebar : <input type="text" ng-model="lebar"></p>
 <p>Luas persegi pangjang  : {{ panjang * lebar }}</p>
</div>

Repeating HTML Element

Ng-repeate merupakan directive yang mengulang elemen HTML
Contoh:

<div ng-app="" ng-init="cars=['BMW','Ferrari','Alphard'];username='artterror'">
 <ul>
  <li ng-repeat='car in cars'>
   {{ car }}
  </li>
 </ul>
 <div>
  {{ username }}
 </div>
</div>

Angular JS Scope

Angular JS Scope mengikat data antara HTML(view) dan Javascript (controller). Scope merupakan objek dengan property & method yang tersedia. Cara menggunakan scope adalalah dengan melewatkan object $scope sebagai sebuah argument.

<div ng-app="cars" ng-controller="myController">
 <h1>{{ carname }}</h1>
 <h1>{{ carprice }}</h1>
</div>

<script>
 var app = angular.module('cars', []);

 app.controller('myController', function($scope){
  $scope.carname = "GT86";
  $scope.carprice = "Rp 700 M";
 });
</script>

Jika kita mempertimbangkan aplikasi angular js yang terdiri dari:
View : yang merupakan HTML
Model : yang merupakan data yang tersedia untuk tampilan saat ini
Controller : yang merupakan fungsi jawascript yang membuat, mengubah, mengontrol, menghapus data. Maka scope merupakan model.
Scope merupakan object javascript dengan property & method yang tersedia untuk view dan controller
Contoh:

<div ng-app="myApp" ng-controller="myCtrl">
 Name  : <input ng-model="name" name=""><br>
 Email  : <input ng-model="email" name=""><br>
 Address  : <input ng-model="address" name="">

 <h1>My name is {{ name }}</h1>
 <h1>My email is {{ email }}</h1>
 <h1>My address is {{ address }}</h1>
</div>

<script>
 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {
  $scope.name = "artterror";
  $scope.email = "artterror23@gmail.com";
  $scope.address = "Yogyakarta";
 });
</script>

Angular JS Event

Angular JS punya HTML event directivenya sendiri. Kita dapat menambahkan Angular JS event listener ke element HTML menggunakan salah satu atau lebih dari beberapa directive berikut ini:

ng-blur	ng-focus	ng-mouseenter
ng-change	ng-keydown	ng-mouseleave
ng-click	ng-keypress	ng-mousemove
ng-cut	ng-keyup	ng-mouseover
ng-dblclick	ng-mousedown	ng-paste

Contoh :

<div ng-app="myApp" ng-controller="myController">
 <button ng-click="count = count+1">Click Me</button>
 <h2>{{ count }}</h2>
</div>
<script>
 var app = angular.module('myApp', []);
 app.controller('myController', function($scope){
  $scope.count = 0;
 });
</script>

Angular JS Animation

Angular JS menyediakan animasi transisi, dengan bantuan CSS. Sebuah animasi merupakan transformasi dari elemen HTML yang diberikan ilusi dari perpindahannya.
Cara penggunanaan:

1. Tambahkan library angular-animate.js
2. Refer ngAnimate di aplikasi
   

   <body ng-app="ngAnimate">

3. Atau jika sudah punya nama di aplikasi angularnya maka tambahkan ngAnimate sebagai dependency di dalam modul aplikasi

Directive ng-if di AngularJS digunakan untuk menambahkan atau menghapus elemen dari basis DOM pada nilai ekspresi yang diberikan. Apabila ekspresinya mengevaluasi false, maka elemen tersebut dihapus dari DOM. Apabila ekspresinya mengevaluasi true, suatu kloning elemen dimasukkan kembali ke DOM.
Contoh :

<!DOCTYPE html>
<html>
<head>
 <title>Angular JS</title>
 <script type="text/javascript" src="assets/js/angular.min.js"></script>
 <script type="text/javascript" src="assets/js/angular-animate.js"></script>
 <style type="text/css">
  .show {
   background-color: lime;
   height: 100px
  }
  .show.ng-enter {
   transition: all ease-in .25s;
   height: 0
  }
  .show.ng-enter.ng-enter-active {
   height: 30px
  }
 </style>
</head>
<body ng-app="myApp">
 <button ng-click="showText=true">Show the text</button>
 <button ng-click="showText=false">Hide the text</button>
 <div ng-if="showText" class="show">Praktikum Pemro Web</div>
 <script type="text/javascript">
  var app = angular.module('myApp', ['ngAnimate']);
 </script>
</body>
</html>

Bagikan Artikel ini