Skip to main content
Pengenalan AngularJS

Belajar dan Pengenalan AngularJS Untuk Pemula

Suatu materi baru yang akan coba kita bahas yaitu tentang Belajar dan Pengenalan AngularJS. Alasan utama saya memasukkan materi belajar AngularJS adalah karena dengan menggunakan AngularJS kita bisa membangun aplikasi mobile. Hal ini juga bisa jadi alternatif bagi yang tidak memahami aplikasi Native. kenapa harus aplikasi mobile dan kenapa harus belajar angularJS. akan terjawab ketika pembahasan materi ini dibaca sampai habis. Seperti kita pahami, Saat ini, pengembangan aplikasi untuk mobile tumbuh sangat cepat, dimana hampir separuh waktu dari pengguna mobile menghabiskan waktunya dengan mobilenya masing-masing, ini menjadikan tren tersendiri dan membuka kesempatan untuk developer mengembangkan aplikasinya ke arah berbasis mobile.Baca :

Daftar Isi Bacaan:

  • Pengenalan AngularJS
  • Konsep dalam AngularJS
  • Kenapa Harus Belajar AngularJS
  • Contoh Koding AngularJS

Untuk tahap awal kita fokus dulu kepada 3 hal tersebut, selanjutnya akan coba kita bahas untuk pengenalan lebih lanjut lagi.

Pengenalan AngularJS

Pengenalan AngularJS
Logo Angular JS

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.

Apa itu AngularJS

Sebelumnya sudah dikatakan bahwa 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, sedangkan AngularJS 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.

Konsep dalam AngularJS

Berikut sekilas konsep dalam AngularJS yang perlu kita kenali dan pahami.

KONSEPKETERANGAN
TemplateHTML dengan MarkUp Tambahan
DirectivesMenambahkan Atribut dan Elemen Khusus
ModelData yang ditampilkan ke pengguna
ScopeKonteks dimana model menyimpan, sehingga arahan dan ekspresi dapat mengaksesnya
ExpressionsMengakses Variabel dalam fungsi scope
CompilerMem-Parsing Template
FilterFormat nilai ekpresi untuk ditampilkan ke pengguna
ViewApa yang dilihat pengguna
Data BindingSinkronisasi antara Model dan Views
ControllerPengaturan proses bisnis
Dependency InjectionMembuat objek dan memasukkan nya ke fungsi
InjectorMemasukkan sebuah Injector kedalam Container
ModuleKonfigurasi dari Injector
ServiceFungsi dapat digunakan kembali tergantung pada Views

Kenapa Harus Belajar AngularJS

Mungkin pertanyaan ini perlu dijawab terlebih dahulu sebelum kita tancapkan hati untuk lebih serius dalam proses belejarnya. Sekilas beberapa hal dan alasan kenapa kita harus belajar AngularJS

  • AngularJS dikembangkan oleh Google. Mungkin alasan awal ini jadi motivasi yang tinggi terlebih dahulu. Kita semua kenal siapa itu Google ,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. Fitur JavaScript 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 menambah kecepatan loading web.

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:

<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 menggunakan AngularJS. 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, jika ng-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

<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>

Berikut Hasil run di Browser:

Pengenalan AngularJS
Run File Via Browser

Selanjutnya akan kita bahas penjelasan setiap codenya, termasuk untuk bagian Directive, Controller, $scope dan ng-repeat.

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.
Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com