ANGULAR.JS
1. Pengertian
AngularJS adalah framework
Javascript yang dikembangkan oleh Google,situs resminya silahkan menuju ke link. Disitus resminya
kita akan banyak mendapatkan banyak informasi tentang angular termasuk dokumentasi,Tutorial dan semua hal tentang angularJS.
AngularJS adalah sebuah framework java script. Jika ada pertanyaan apa perbedaan antara Angular JS
dengan jQuery. Sekilas bahwa secara
konsep AngularJS berbeda dimana jQuery merupakan library java
script, sedangkanAngularJS merupakan framework java Script. Dana saya
berharap, semua bisa memahami apa itu beda Framework dan
Library.
Dalam Situs resminya dikatakan, AngularJS
merupakan sebuah framework struktural untuk aplikasi web dinamis dari sisi
Client dengan konsep Model View Whatever (MVW). Motto resmi angularJS
“Superheroic JavaScript MVW Framework“. MVW bertujuan untuk
memisahkan logika presentasi dari logika bisnis, dimana javascript berperan
untuk mengelola model dan logika dan HTML untuk layer presentasi. Banyak para
pengembang web mengenal konsep ini ketika model dan logika bisnis dalam Sisi Server.
- AngularJS dikembangkan oleh Google. Mungkin alasan awal ini jadi motivasi yang tinggi terlebih dahulu. Kita semua kenal siapa ituGoogle ,sebuah raksasa mesin pencari. Google juga yang menciptakan Android. AngularJS dikelola oleh team Google dan banyak digunakan untuk produk-produk Google dan akan menjadi standarisasi struktur aplikasi web dari sisi klien.
- HTML Template. Ketika kita belajar bahasa web pastinya tidak terlepas dari bahasa HTML. Bahasa yang mudah dalam mempelajarinya dan pasti bagi yang sering buat aplikasi web akan terbiasa menggunakan nya. AngularJS menggunakan HTML untuk membangun template.
- Lengkap. AngularJs adalah solusi yang lengkap untuk pengembangan aplikasi Front-End yang cepat, tidak ada plugin atau framework lain yang diperlukan untuk membangun aplikasi. FiturJavaScript yang sangat sederhana yang membuat kecepatan untuk berkomunikasi dari server ke Klien. Dengan satu baris JavaScript kita bisa terhubung dengan Server untuk mendapatkan data yang kita inginkan. Hal ini pastinya akan menarik khususnya untuk menambahkecepatan loading web.
2. Konsep dalam AngularJS
|
KONSEP
|
KETERANGAN
|
|
Template
|
HTML
dengan MarkUp Tambahan
|
|
Directives
|
Menambahkan
Atribut dan Elemen Khusus
|
|
Model
|
Data yang
ditampilkan ke pengguna
|
|
Scope
|
Konteks
dimana model menyimpan, sehingga arahan dan ekspresi dapat mengaksesnya
|
|
Expressions
|
Mengakses Variabel
dalam fungsi scope
|
|
Compiler
|
Mem-Parsing
Template
|
|
Filter
|
Format
nilai ekpresi untuk ditampilkan ke pengguna
|
|
View
|
Apa yang
dilihat pengguna
|
|
Data
Binding
|
Sinkronisasi
antara Model dan Views
|
|
Controller
|
Pengaturan
proses bisnis
|
|
Dependency
Injection
|
Membuat
objek dan memasukkan nya ke fungsi
|
|
Injector
|
Memasukkan
sebuah Injector kedalam Container
|
|
Module
|
Konfigurasi
dari Injector
|
|
Service
|
Fungsi
dapat digunakan kembali tergantung pada Views
|
3. Contoh Koding AngularJS
Sebagai pemanasan awal dalam mempelajari AngularJS
Framework, akan kita lihat sebuah contoh source code awal atau sering
disebut “Hello World”. Untuk Mengetikkan kode ini kita bisa gunakan Editor apa
saja (Notepad, Notepad++ dan lainnya). Berikut langkah awalnya:
- Pertama
kali kita harus mendownload dulu file angularJS.
- Cantumkan
di file HTML pada tag <body> path tempat kamu menyimpan file angular.js yang sudah didownload.
- Terakhir
kita harus simpan file nya dalam format HTML.
Misal :
Buka editor ketikkan source berikut:
|
1
2
3
4
5
6
7
8
|
<html lang="en">
<head>
<title>Belajar
Angular</title>
</head>
<body>
<script src="lib/angular/angular.js"></script>
</body>
</html>
|
Selain memanggil file AngularJS melalui folder nya, kita bisa juga
memanggil nya via CDN, dan pastinya kita
harus terkoneksi Internet, berikut sourcenya:
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
|
Kita harus selalu mencantumkan “ng-app” di tag yang akan menggunakanAngularJS. Masukkan ng-app di dalam tag
<html>. lihat contoh kode awalnya. Kita juga bisa menempatkan “ng-app" di tag <body> atau <div>.
Fungsi ng-app ini adalah salah satu directive di angularjs. Kegunaan ng-app ialah untuk memberitahu pada compiler,
bahwa isi halaman atau isi dari tag itu adalah aplikasi AngularJS, sehingga bisa menggunakan fungsi-fungsi
dan fitur yang disediakan oleh framework angularjs. Namun, jikang-app telah dicantumkan di tag tertentu, tidak
boleh mencantumkannya lagi di tag yang dicakup oleh tag tersebut. Misal, ketika
telah mencantumkannya di tag <html> tidak perlu mencantumkannya lagi di
tag <body> atau <div>.
Script yang telah dibuat dengan AngularJS bisa dijalankan
menggunakan browser. Berikut kita buatkan sebuah contoh script dan hasil run
kita lihat via browser:
file : tes.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<html ng-app>
<head>
<!--<script src="lib/angular/angular.js"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="Mainctrl">
<h1>Belajar AngularJS by. Ridwan, S.ST</h1>
<ul>
<li ng-repeat="Siswa
in Siswas">
{{siswas.nama}}
</li>
</ul>
</body>
</html>
<script type="text/javascript">
function Mainctrl($scope){
$scope.siswas=[
{nama : "Ridwan"},
{nama : "Rasmi"}
]
}
</script>
|
*** Run File Via Browser ***
4. Kesimpulan Belajar dan Pengenalan AngularJS Untuk Pemula
- AngularJS
merupakan sebuah Framework yang dibuat oleh Google dan banyak digunakan
untuk produk Google.
- Hal
awal untuk belajar AngularJS kita harus pahami dan belajar tentang Bahasa
JavaScript.
- Pemanggilan
file AngularJS bisa secara offline dengan cara donwload file nya atau juga
via CDN
- Menggunakan
AngularJS kita juga bisa membanguj aplikasi diperangkat Mobile Android.
