lifelong learner — urip iku urup, currently working on accenture.

Installasi dan menjalankan Angular 2

4
Degananda.com -

Ulasan ini merupakan versi angular non-cli, untuk saat ini yang paling populer dan sangat membantu adalah angular-cli. Tutorial mengenai angular cli dapat dilihat di :

https://degananda.com/category/angular-2/pemula-starter-pack/

situs resmi angular JS : https://angular.io/

Angular JS adalah framework javascript dengan model MVC(Model , View , Controller ) untuk mengelola source code aplikasi web yang dikembangkan oleh Google. dengan Angular JS kita dapat membuat single page application. Single page application adalah aplikasi yang hanya perlu diload(pada browser) sekali saja. Angular 2 adalah versi pengembangan dari angular 1. Terdapat banyak sekali perubahan angular JS ke angular 2. Angular 1 dapat ditulis dengan menggunakan javascript sementara Angular 2 (untuk saat ini) sangat dianjurkan untuk ditulis dalam menggunakan typescript.

1. Installasi environment untuk angular 2

untuk memulai sebuah project yang menggunakan angular 2 ada beberapa tools yang harus di install terlebih dahulu. Angular 2 menggunakan typescript untuk melakukan coding. Oleh karena itu dibutuhkan aplikasi yang dapat mensupport proses coding typescript. Sementara untuk menjalankan Angular 2 dibutuhkan web server, google telah membundle lite-web server pada quickstart angular 2 sehingga tidak diperlukan menginstall web server tambahan. Berikut ini adalah tools yang diperlukan untuk membangun aplikasi web dengan angular 2

  • Browser dengan developer addon (disarankan menggunakan firefox developer edition) untuk debugging javascript
  • Visual Studio Code untuk melakukan coding typescript.
  • NodeJS & NPM. untuk melakukan installasi NodeJS dan NPM cukup ikuti wizard installer sesuai dengan sistem operasi maka node dan npm akan secara otomatis terinstall.
  • Git

Requirement

Angular 2 mengharuskan untuk memiliki NodejS versi > 4.0 (keatas)  dan NPM versi > 3.0  (keatas) , versi selain itu tidak disupport oleh angular 2.

untuk memastikan bahwa node JS dan NPM telah memenuhi syarat maka jalankan ini pada terminal/powershell/CMD.


Node -v

screen-shot-2016-12-21-at-12-47-57-pm

npm -v

screen-shot-2016-12-21-at-12-48-49-pm

jika teman-teman memiliki node versi dibawah itu maka dapat mengikuti ulasan ini untuk mengupgrade node js ke versi yang di inginkan  : https://degananda.com/2016/12/14/upgrade-nodejs-ke-versi-mana-saja/ sedangkan untuk mengupgradi NPM maka dapat menjalankan perintah dibawah ini (update ke latest edition) :

sudo npm install npm -g

pastikan pada tahap ini node dan npm telah diminta oleh angular 2.

2. Installasi Angular 2

google telah menyediakan source code default untuk membuat project angular 2.  Sebenarnya terdapat dua buah metode untuk membangun angular 2. yakni tanpa menggunakan cli dan menggunakan CLI (angular-cli). Pada ulasan ini tidak menggunakan angular-cli karena angular-cli masih dalam versi “beta” sehingga menurut kami masih belum saatnya untuk digunakan dan bersabar menunggu versi releasenya. Berikut ini adalah langkah-langkah installasi angular 2 tanpa menggunakan angular-cli.

  1. Clone source code default angular-2 yang disediakan oleh google.
    git clone https://github.com/angular/quickstart.git quickstart

    quickstart dapat diganti dengan nama folder yang dikendaki

  2. masuk ke folder hasil “clone”
    cd /quickstart
  3. Install NPM
    npm install
  4. jalankan angular 2 maka secara otomatis akan menjalankan lite web server (pastikan menjalankan menggunakan perintah sudo) atau menggunakan privilages administrator
    sudo npm start

untuk melakukan editing terhadap source-code dapat menggunakan visual studio code. Source code quickstart dari google telah dilengkapi oleh lite-webserver dan mekanisme untuk melakukan auto reload ketika terjadi perubahan pada file. Sehingga proses compiling dari TS(Typescript) dan JS(Javascript) dapaat dilakukan secara otomatis dan akan terupdate langsung pada browser(tidak perlu melakukan refresh) karena npm melakukan untuk anda 😀 yay ~.

screen-shot-2016-12-21-at-1-08-57-pm

dibawah ini adalah interface saat menggunakan visual studio code sangat memudahkan dalam menulis kode angular 2 dalam bentuk typescript karena memiliki library yang sangat banyak salah satunnya adalah autocomplete typescript dan integrated terminal

screen-shot-2016-12-21-at-1-13-08-pm

ulasan part 2 adalah mengenai komponen pada angular 2. Jadi tetap ikuti blog ini ya~.