Tutorial AngularJS Untuk Pemula

Pada pembahasan kali ini kita akan mempelajari tentang AngularJS.Sebelum kita mempelajari AngularJS apa sih AngularJS itu ?? Okay langsung saja kita masuk dalam pembahasan materi .
alt AngularJS merupakan front-end framework untuk javascript yang dikembangkan oleh Google.AngularJs memiliki fitur fitur powerfull yang dapat mempermudah dalam proses development dan menjadi lebih singkat.

Pengggunaan Angular JS cukup mudah kita hanya perlu
meng-include file AngularJs di dalam file HTML . Sebagai Berikut :

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

Atau kita bisa mendownload file AngularJs di https://angularjs.org/. Kemudian file angularJs dideklarasikan dalam folder js . sebagai contoh berikut ..

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

Selanjutnya kita akan belajar tentang Module Pada AngularJS. Modul AngularJS mendefinisikan sebuah aplikasi.
Modul ini adalah menampung data untuk bagian-bagian yang berbeda dari sebuah aplikasi.
Modul merupakan wadah untuk Controller aplikasi dan Controller selalu mempunyai modul. Berikut penulisan Syntax Module

<div ng-app="myApp">...</div>  
     <script>
          var app = angular.module("myApp", []); 
     </script>

Syntax berikut merupakan mendeklarasikan sebuah modul
var app = angular.module("myApp", []);

Contoh Penggunakan Module

<!DOCTYPE html>  
<html>  
    <script src="js/angular.min.js"></script>  
        <body>
                <div ng-app="myApp" ng-controller="myCtrl">  
                        <table border="1" cellpadding="4" cellspacing="5" width="200px">  
                            <tr>  
                                <td>Nama Anda     : {{nama}} </td><br>  
                            </tr>  
                            <tr>  
                                <td>Jenis Kelamin : {{jenis_kelamin}} </td><br>  
                            </tr>  
                            <tr>  
                                <td>Alamat        : {{alamat}} </td><br>  
                            </tr>  
                        </table>  
                </div>

                        <script>  
                            var app = angular.module("myApp", []);  
                                            app.controller("myCtrl", function($scope) 
                                            {  
                                            $scope.nama = "Marfi Saputra";
                                            $scope.jenis_kelamin = "Laki - Laki";
                                            $scope.alamat = "Cipayung";
                                            });
                        </script>

        </body>  
</html>  

Berikut Tampilan Output :

alt

Penjelasan Syntax

<script>  
        var app = angular.module("myApp", []);
                        app.controller("myCtrl", function($scope)
                            {
                            $scope.nama = "Marfi Saputra";
                            $scope.jenis_kelamin = "Laki - Laki";
                            $scope.alamat = "Cipayung";
                            });
</script>  

Memberikan nilai data pada variabel $scope.nama
$scope.nama = "Marfi Saputra";

<div ng-app="myApp" ng-controller="myCtrl">

ng-app="myApp" merupakan definisi dari AngularJS.
ng-controller="myCtrl" merupakan atribut direktif AngularJS.
myCtrl mendefinisikan controller Angular.

Nama Anda : {{nama}}
{{nama}} digunakan untuk menampilkan data nama dari controller

Source code module dengan AngularJS bisa didownload di
https://github.com/era-belajar/Module-AngularJS

Selanjutnya Kita akan mempelajari Controller Pada AngularJS. Controller digunakan untuk pengendalian control data pada aplikasi AngularJS. Contoh Controller pada AngularJS.Kita akan membuat contoh form data diri

alt

Berikut Source Code lengkapnya :

<!DOCTYPE html>  
<html>  
    <head>
        <title>Angular Js</title>
            <script type="text/javascript" src="js/angular.min.js"> </script>
    </head>
            <body>
                <div ng-app="myapp" ng-controller="biodata" >
                        <table align="center" cellspacing="4" cellpadding="5" border="1">
                            <tr>
                                <td align="center">Nama</td>
                                <td><input type="text" ng-model="nama"></td></br>
                            </tr>
                            <tr>
                                <td align="center">Alamat</td>
                                <td><input type="text" ng-model="alamat"></td></br>
                            </tr>
                            <tr>
                                <td align="center">Umur</td>
                                <td><input type="text" ng-model="umur"></td></br>
                            </tr>
                        </table>
                            <br>
                                <div align="center">
                                    Nama Anda   : {{nama}}<br>
                                    Alamat      : {{alamat}}<br>
                                    Umur        : {{umur}}<br>
                                </div>
                </div>
<script>  
    var app = angular.module('myapp',[]);
            app.controller('biodata',function($scope)
            {
                $scope.nama="";
                $scope.alamat="";
                $scope.umur="";
            }
            );
</script>

            </body>
</html>  

Penjelasan Source Code

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

Mendeklarasikan module di AnggularJS

app.controller('biodata',function($scope)  
    {
        $scope.nama="";
        $scope.alamat="";
        $scope.umur="";
    }

Merupakan Deklarasi controller yang diberinama dengan biodata . Controller biodata akan menampilkan hasil dari inputan .

<table align="center" cellspacing="4" cellpadding="5" border="1">  
    <tr>
        <td align="center">Nama</td>
        <td><input type="text" ng-model="nama"></td></br>
    </tr>
    <tr>
        <td align="center">Alamat</td>
        <td><input type="text" ng-model="alamat"></td></br>
    </tr>
    <tr>
        <td align="center">Umur</td>
        <td><input type="text" ng-model="umur"></td></br>
    </tr>
</table>  

Merupakan Form Input data

ng-model Digunakan untuk mengirim nilai dari view ke controller

<div align="center">  
    Nama Anda   : {{nama}}<br>
    Alamat      : {{alamat}}<br>
    Umur        : {{umur}}<br>
</div>  

Menampilkan hasil dari proses inputan

{{nama}} , {{alamat}} ,{{umur}} digunakan untuk menampilkan expression / hasil dari controller biodata

Source code Controller dengan AngularJS bisa didownload di
https://github.com/era-belajar/Controller-AngularJS

Kita telah mempelajari Module dan Controller pada AnggularJS . Selanjutnya kita akan membahas tentang directive pada AngularJS .
Directive merupakan attribute spesial yang diawali dengan awalan ng-.directive digunakan untuk menginisialisasi varibel beriktu contoh dari directive

– ng-app – digunakan untuk memulai aplikasi AngularJS.

– ng-init – digunakan untuk inisialisasi data dari aplikasi.

– ng-repeat – digunakan sebagai perulanggan dari elemen HTML untuk setiap item dalam array.

Sekarang kita akan membuat contoh menampilkan data dengan directive:

alt

Berikut Source Code Lengkapnya :

<!DOCTYPE html>  
<html>  
    <head>
        <script src="js/angular.min.js"></script>  
    </head>
        <body ng-app="myApp">
            <contohdirective></contohdirective>
                <script>  
                    var app = angular.module("myApp", []);  
                            app.directive("contohdirective", function() {  
                            return {
                            template : "<h2>Latihan Menggunakan Directive</h2>"
                                };
                            });
                </script>
        </body>  
</html>  

Penjelasan Source Code

app.directive("contohdirective", function()  
        {
            return {
                template : "<h2>Latihan Menggunakan Directive</h2>"
            };
        });

app.directive("contohdirective", function()

Merupakan deklarasi dari directive.

template : "<h2>Latihan Menggunakan Directive</h2>"

Source code directive dengan AngularJS bisa didownload di

https://github.com/era-belajar/Directive-AngularJs

Pada pembahasan terakhir kita akan membuat controller dan module memiliki file tersendiri . sehingga lebih memudahkan dalam melakukan pengembangan.

Berikut Source code lengkapnya :

<!DOCTYPE html>  
<html>  
    <head>
        <title>Angular Js</title>
            <script type="text/javascript" src="js/angular.min.js"> </script>
            <script src="js/data.js"></script>
            <script src="js/ctrl.js"></script>
    </head>
        <body>
            <div ng-app="myApp" ng-controller="myCtrl">
                        {{ firstName + " " + lastName }}
            </div>
        </body>
</html>  

Berikut Penjelasan Souce Code

<script type="text/javascript" src="js/angular.min.js"> </script>  
<script src="js/data.js"></script>  
<script src="js/ctrl.js"></script>  

<script type="text/javascript" src="js/angular.min.js"> </script> Syntax berikut merupakan file dari angular js yang disimpan di folder js

<script src="js/data.js"></script> merupakan file data module yang ditampung dalam data.js

<script src="js/ctrl.js"></script> merupakan file controller yang ditampung dalam ctrl.js

data.controller("myCtrl", function($scope)  
{
    $scope.firstName    = "Marfi";
    $scope.lastName= "Saputra";
});

Syntax diatas merupakan isi dari file controller yang disimpan dengan ctrl.js dan dipanggil pada file html

var app = angular.module("myApp",[]);  

Syntax diatas merupakan isi dari file data.js
yang digunakan untuk mendeklarasikan module di angularjs

Untuk Source Code berikut bisa didownload di

https://github.com/era-belajar/Struktur-AngularJS

Marfi Saputra

Web Programmer di erabelajar.com (PT Ridaka Indonesia Cerdas) . Mengambil Kosentrasi Informatika Komputer di LP3I JAKARTA Kampus Depok