Cara Buat Aplikasi Angular 2 dengan Webpack

Dalam pengembangan aplikasi berbasis angular 2 itu ada berbagai cara yang bisa ditempuh, karena aplikasi yang akan kita buat nantinya berbasis es6 yang mana pada saat ini belum banyak didukung oleh kebanyakan browser pengguna, maka dari itu kita membutuhkan sebuah module yang digunakan untuk mengubah aplikasi yang kita buat memjadi berbasis es5, salah satu module tersebut adalah webpack. Pada pengembangan aplikasi ini kita tidak menggunakan javascript melainkan yang kita gunakan adalah typescript, kenapa typescript? karena selain sesuai dengan anjuran dari pengembang angular itu sendiri, alasan utama kenapa kita mengunakan typescript adalah kerena mudah dalam memahami dan mempelajari sintax-sintaxnya serta lebih mudah dibaca jika di bandingkan dengan vanila javascript (menurut pendapat saya pribadi :smile:), kok bisa? silahkan saja anda buktikan sendiri setelah mempelajari tutorial ini, silahkan bandingkan.

Persiapan

Sebelumnya install dulu beberapa module berikut ini secara global di system kalian, dengan menjalankan perintah berikut di terminal!

$ sudo npm install typescript tds

Setelah terinstall, silahkan anda unduh atau clone dulu repository berikut angular2-minimal-starter, setelah itu, cd atau masuk ke directory angular2-minimal-starter dan pada terminal jalankan perintah berikut!

$ npm install

Berikutnya jalankan pula perintah berikut!

$ tds install

Perintah diatas akan menginstall semua module-module yanng kita butuhkan, sampai tahap ini aplikasi kita sudah bisa di jalankan namun belum menampilkan apa-apa, saatnya ketahapan berikutnya.

Hello world

setelah semua module terinstall, saatnya kita membuat aplikasi sederhana yaitu menampilkan tulisan "Hello World" pada browser.

import {Componen} from 'angular2/core';

@Componen({
    selector: 'main-app',
    template: `
        <h1>Hello world</h1>
        `
})

export class App{

}
import {bootstrap} from 'angular2/platform/browser';


import {App} from './app/app';

document.addEventListener('DOMContentLoaded', function main() {
    bootstrap(App)
        .catch(err => console.error(err));
});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Angular2 Minimal Starter</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <main-app>
    Loading...
  </main-app>

  <!-- Common files to be cached -->
  <script src="/__build__/common.js"></script>
  <!-- Vendor files -->
  <script src="/__build__/vendor.js"></script>
  <!-- App script -->
  <script src="/__build__/app.js"></script>
</body>
</html>
$ npm run server

Jika tak ada yang error, seperti yang terlihat pada gambar berikut:

angular 2

silahkan buka browser dan masukkan alamat 127.0.0.1:3000 dan pastikan anda melihat tulisan Hello world, seperti yang terlihat pada gambar berikut:

angular 2

Dan aplikasi sederhana kita pun telah jadi, selanjutnya terserah anda, silahkan anda kembangkan sendiri aplikasi tersebut :smile:

Jika anda mempunyai pertanyaan atau ada yang kurang di mengerti, silahkan anda bertanya pada kolom komentar di bawah!

Daftar Bacaan

Sekian terima kasih, semoga bermanfaat.


Related Post

Explore