Routing dan Templating Pada AngularJS

iqbalhood (61)in #utopian-io • 8 years ago (edited)

Image Source - Sumber Pengambilan Gambar

What Will I Learn (Apa Yang Akan Saya Pelajari)?

Pada tutorial kali ini saya akan memandu anda bagaimana cara yang tepat untuk mengatur arah url atau dikenal dengan routing dan membuat tema dasar website atau aplikasi berbasis web (Templating) menggunakan AngularJS

Requirements (Persiapan / Hal-hal yang diperlukan untuk mengikuti tutorial)

Berikut ini adalah beberapa item yang harus anda persiapkan atau kuasai terlebih dahulu sebelum kita memulai tutorial Routing dan templating. Hal - hal yang perlu anda persiapkan diantaranya.

Kemampuan Dasar HTML dan CSS untuk membuat layout
Kemampuan Dasar Javascript untuk membuat alur program
Kemampuan Mengimplementasikan Bootstrap dan FontAwesome pada aplikasi web maupun website
XAMPP untuk tempat berjalannya aplikasi yang kita buat
Mendownload Versi Terbaru AngularJS pada Link Berikut ini

Difficulty (Tingkat Kesulitan /Kerumitan)

Basic

Tutorial Contents (Isi Tutorial / Pembahasan)

Sebelum memulai pembuatan website / aplikasi pada tutorial kali ini. Saya akan menjelaskan terlebih dahulu struktur file yang akan kita buat pada aplikasi ini.

   - aplikasi.js           
    - index.html        
    - halaman           
    ----- beranda.html
    ----- tentang-kami.html
    ----- kontak.html

Stuktur file yang saya buat pada code blok diatas memiliki fungsi dan tujuan masing - masing diantaranya :

File aplikasi.js adalah file yang akan kita masukkan kode atau program yang kita buat menggunakan framework AngularJS
index.html merupakan file layout utama yang akan kita tambahkan berbagai macam tampilan
halaman beranda, tentang-kami dan kontak merupakan halaman yang akan kita masukkan ke tampilan utama (main layout).

Setelah membuat struktur file langkah berikutnya adalah membuat sebuah tampilan utama (main layout) pada file index.html dan mengintregasikan bootsrap dan font awesome dan AngularJS pada file tersebut. Maka anda harus memperhatikan blok kode berikut ini.

File layout induk index.html

    <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js"></script>
      <script src="aplikasi.js"></script>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Routing dan Templating Pada AngularJS</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Dashboard</a></li>
                    <li><a href="#tentang"><i class="fa fa-shield"></i> Tentang Kami</a></li>
                    <li><a href="#kontak"><i class="fa fa-comment"></i> Kontak</a></li>
                </ul>
            </div>
            </nav>
        </header>
        <div id="main">
        </div>
    </body>
    </html>

Berikut ini adalah penjelasan source code diatas blok berikut ini adalah kode yang berfungsi untuk mengintegrasikan bootsrtap dan font awesome pada aplikasi web kita via CDN

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

Blok berikut ini berguna untuk memasukkan framework AngularJS dan Framework Routing AngularJS yang sering disebut dengan AngularRoute. Kode tersebut juga menggunakan CDN untuk mengitegrasikan kedua hal tersebut ke proyek yang kita buat.

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js"></script>

Potongan kode berikut adalah potongan kode yang berfungsi untuk mengintegrasikan layout utama kita dengan file aplikasi.js dimana nanti kita akan mengimputkan fungsi-fungsi yang kita buat menggunakan AngularJS.

    <script src="aplikasi.js"></script>

Kemudian potongan kode berikut ini merupakan bagian dari main layout atau index.html yang akan kita modifikasi menggunakan AngularJS dan AngularJS Routing

<div id="main"></div>

Langkah selanjutnya adalah membuat Modul dan Controller pada file aplikasi.js. Pertama kali kita akan membuat module bernama utopianApp pada file aplikasi js. Betuk kodenya adalah seperti berikut ini .

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

Kemudian kita akan membuat sebuah controller dan meng-inject / memasukkan Angular Scope ke dalam controllet tersebut seperti berikit ini.

 var utopianApp = angular.module('utopianApp', []);
    // Membuat kontroller dan melakukan inject / memasukkna Angular's $scope
    scotchApp.controller('mainController', function($scope) {
        $scope.message = 'Everyone come and see how good I look!';
    });

Sekarang mari kita tambahkan modul dan controller ke File index.html yang telah kita buat sebelumnya. Hal ini diperuntukkan Untuk menguji apakah langkah - langkah yang kita lakukan di atas telah benar, Saya juga telah menambahkan sebuah variabel scope bernama $scope.message . mari kita coba tampilkan ke file index.html yang telah dibuat.

Langkah pertama dalam mengintegrasikan modul dan controller adalah mendefenisikan angular app kita di file html. Lakukan perubahan berikut pada tag pembukan html pada file yang anda buat.

<html ng-app="utopianApp">

Kemudian tambahkan controller utama pada pembuka tag body di aplikasi. Silahkan ikuti conth kode berikut.

 <body ng-controller="mainController">

Kemudian mari kita coba tampilkan data dari variabel $scope.message seperti berikut ini.

 <div id="main">
        {{ message }}
</div>

Jika anda menaruh proyek ini ke folder htdocs pada XAMPP atau MAMPP dengan kondisi web server aktif. maka anda akan melihat data dari $scppe.message yang telah kita kerjakan sebelumnya.

Langkah kita berikutnya adalah memasukkan halaman yang ada pada folder halaman ke MainLayout.

ng-view adalah AngularJs directive akan mencakup template rute saat ini (/ home, / about, or / contact) dalam satu buah proeses.. Dengan kata lain, dibutuhkan file yang kami inginkan berdasarkan rute dan menyuntikkannya ke dalam tata letak utama kami (index.html).

Kemudian mari kita tambahkan kode** ng-view** pada blok div # main untuk meletakkan tampilan halaman secara programatical.

 <div id="main">
        <div ng-view></div>
    </div>

Langkah berikutnya adalah konfigurasi Route dan View. Pertama sekali tambahkan ngRoute pada modul controller, Seperti berikut ini.

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

Kemudian kita akan menggunakan $routeProvider di AngularJS untuk mengatur Routing silahkan modifikasi file aplikasi.js anda menjadi seperti berikut ini.

 var utopianApp = angular.module('utopianApp', ['ngRoute']);
    // konfigurasi semua route
   utopianApp.config(function($routeProvider) {
        $routeProvider
            // route untuk halaman beranda
            .when('/', {
                templateUrl : 'halaman/beranda.html',
                controller  : 'mainController'
            })
            // route untuk halaman tentang kami
            .when('/tetang-kami', {
                templateUrl : 'halamant/tentang-kami.html',
                controller  : 'tentangkamiController'
            })
            // route untuk halaman kontak
            .when('/kontak', {
                templateUrl : 'halaman/kontak.html',
                controller  : 'kontakController'
            });
    });
    // membuat controller dan memasukkan angular scope
    utopianApp.controller('mainController', function($scope) {
        // pesan untuk ditampilkan di view
        $scope.message = 'Halaman  Utama / Beranda!';
    });
    utopianApp.controller('tentangkamiController', function($scope) {
        $scope.message = 'Halaman Tentang Kami';
    });
    utopianApp.controller('kontakController', function($scope) {
        $scope.message = 'Halaman Kontak Kami.';
    });

Sekarang kita telah mendefenisikan alur halaman / arah url halaman aplikasi website menggunakan $routeProvider. Pada kode di atas jika anda menguasai pengetahuan dasar mengenai Javascript maka anda akan dapat melihat degnan jelas route akan mengarah ke file mana dan menggunakan controller apa untuk melakukan fungsi pemrograman javascript.

Untuk layout html pada file tentang kami dan kontak silahkan mengikuti format berikut ini

 <div class="jumbotron text-center">
        <h1>Nama Halaman</h1>

        <p>{{ message }}</p>
    </div>

Silahkan modifikasi sesuai dengan halaman apa yang akan di buat . Kemudian simpan di folder halaman agar dapat dilacak oleh file aplikasi.js

Secara default AngularJs akan melemparkan tanda pagar (#) pada URL . Untuk menyingkirkan tanda ini kita perlu menggunakan $loactionprovider untuk mengaktifkan API Riwayat penelusuran Html. $locationprovider akan membuat url menjadi lebih indah.

Demikianlah tutorial saya kali ini mengenai Routing dan Templating Pada AngularJS. Jika anda memiliki pertanyaan mengenai tutorial ini jangan sungkan menghubungi saya di kolom komentar.

Posted on Utopian.io - Rewarding Open Source Contributors

#programming #angularjs #indonesia #javascript