Getting Started With AngularJS

getting-started-with-angularjs

Pada tulisan kali ini kita akan membahas Getting Started With AngularJS. AngularJS adalah sebuah framework yang dimaintain oleh Google dan komunittas lainnya untuk membuat sebuah single-page application. AngularJS ini memiliki tujuan untuk mempermudah proses development dan testing dari sebuah application yang di buat untuk client-side model-view-controller (MVC) dan model-view-viewmodel (MVVM).

Pada AngularJS ini kita hanya akan fokus kepada frontend framework (dalam hal ini menggunakan JavaScript), dan sekali lagi hanya fokus kepada frontend framework. Karena pada pembuatan aplikasi yang berskala besar biasanya untuk tim development antara frontend dan backend menjadi tim yang terpisah.

Terdapat beberapa kelebihan jika kita menggunakan AngularJS pada frontend website kita, yaitu:

  1. Membuat website menjadi lebih dinamis
  2. Mempermudah kita untuk mengelola file JS (JavaScript)
  3. Lebih responsive load dalam load data dari sebuah website
  4. Kompatibel dengan JQuery
  5. Mudah untuk melakukan testing pada framework

Traditional Page Refresh vs Responsive Page Refresh

Beberapa tahun yang lalu sebuah website jika di load menggunakan metode traditional page refresh akan meload keseluruhan file html dan assetsnya dalam satu waktu, namun jika menggunakan responsive page refresh kita hanya akan me-load file html dan assets satu kali di depan dan untuk selanjutnya hanya akan meload data-nya saya (biasanya mempergunakan AJax Request).

Jika kita membuat website mempergunakan responsive page refresh maka website kita akan menjadi lebih “ringan” ketika di load oleh pengguna.

Getting Started With AngularJS

Untuk mulai menggunakan AngularJS pertama kita harus mendownload AngularJS dan meloadnya pada file HTML kita, berikut ini adalah tag HTML yang sudah ada me-load AngularJS didalamnya.

index.html

<!DOCTYPE html>
<html ng-app=“store">
	<head>
		<link rel=“stylesheet” type=“text/css” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
	</head>
<body>
	<script type=“text/javascript” src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js”></script>
	<script type=“text/javascript” src=“app.js”></script>
	<p>{{“hello” + “ you”}}</p>
</body>
</html>

dan selain file html kita membutuhkan file JS yang dipergunakan sebagai controller untuk melakukan manipulasi DOM yang ada di file HTML.

app.js

var app = angular.module(‘store’,[ ]);

Pada file HTML terdapat code ng-app=“store” ini menginstruksikan AngularJS untuk m-load app dengan nama store yang ada di file app.js, sedangkan pada tag

merupakan trigger dimana kita memanggil expression yang ada AngularJS. Sedangkan pada app.js kita membuat sebuah variable dengan nama app yang isinya meload Angular Module dengan nama “store”.

Jika kita eksekusi maka akan muncul seperti dibawah ini.
angular-demo

Kita telah mempelajari tentang Getting started with AngularJS yang membahas tentang directives, modules, and experssion pada AngularJS. Untuk mendownload file pada tulisan ini silahkan buka melalui link berikut ini Download Source Code Getting Started With AngularJS.

Jangan lupa bantu kami dengan me like Facebook Fan Pages BelajarNgodingDotCom dan memfollow akun twitter kami @belajarngoding untuk mendapatkan update atau informasi tentang programming.