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 ), kok bisa? silahkan saja anda buktikan sendiri setelah mempelajari tutorial ini, silahkan bandingkan.
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.
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:
silahkan buka browser dan masukkan alamat 127.0.0.1:3000 dan pastikan anda melihat tulisan Hello world, seperti yang terlihat pada gambar berikut:
Dan aplikasi sederhana kita pun telah jadi, selanjutnya terserah anda, silahkan anda kembangkan sendiri aplikasi tersebut
Jika anda mempunyai pertanyaan atau ada yang kurang di mengerti, silahkan anda bertanya pada kolom komentar di bawah!
Sekian terima kasih, semoga bermanfaat.