AngularJS

AngularJS

Assalamualaikum Wr.Wb

Kembali lagi bersama saya Diky Setiadi dalam blog ini.Disini saya kembali posting mengenai pembelajaran yang berkaitan dengan Software Engineering,mangga mampir dan baca ,semoga bermanfaat :)

Pengertian AngularJS

AngularJS adalah sebuah framework Javascript yang di kembangkan atau di bangun oleh tim Google. angularjs menggunakan metode MVC yang membuat source code aplikasi kita menjadi bersih dan mudah di kembangkan.Sampai saat ini angularjs sudah menjadi salah satu framework javascript yang paling populer dan sangat banyak di gunakan oleh para developer di seluruh dunia untuk membangun aplikasi. Kehandalan dari angularjs sendiri tidak bisa di ragukan lagi, salah satu faktor nya karena di kembangkan oleh para tim ahli dari google. AngularJS juga menyediakan panduan cara penggunaannya pada situs resmi angularJS,dan angularJS juga di gunakan untuk membangun aplikasi yang bersifat single page application. Tutorial AngularJS Pengertian Dan Cara Menggunakan AngularJS.

AngularJS, sebuah front-end framework untuk JavaScript yang dikembangkan oleh Google, belakangan ini sedang sering dibicarakan di kalangan developer. Tutorial AngularJS di artikel ini akan membantumu dalam memahami seputar AngularJS.

AngularJS mempunyai fitur-fitur yang sangat kuat sehingga proses pengembangan aplikasi bisa menjadi jauh lebih singkat dan juga sangat mudah dipelajari. Framework AngularJS ini menjadikan kode Javascript lebih terstruktur karena AngularJS menerapkan pola MVC pada aplikasi yang akan kita kembangkan.

Beberapa contoh situs atau aplikasi yang dibuat menggunakan AngularJS di antaranya adalah Youtube for PS3, Netflix, Weather.com dan lainnya.

Untuk mengimplementasikan AngularJS, kita perlu menggunakan directive pada aplikasi web kita. Bagi yang belum tahu, directive merupakan penanda pada elemen DOM (Document Object Model) seperti atribut, nama elemen, atau kelas CSS (Cascading Style Sheet).

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

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 belajarAngularJS

• ·        AngularJS dikembangkan oleh Google. Mungkin alasan awal ini jadi motivasi yang tinggi terlebih dahulu. Kita semua kenal siapa itu Google ,sebuah raksasa mesin pencari. Googlejuga 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-Endyang 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 denganServer 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:

1.     Pertama kali kita harus mendownload dulu file angularJS.

2.    Cantumkan di file HTML pada tag <body> path tempat kamu menyimpan file angular.js yang sudah didownload.

3.    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:

?

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

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>

?

Berikut Hasil run di Browser:

Run File Via Browser..

Sekian Pembahasan mengenai ANGULAR JS,semoga bermanfaat,dan tunggu postingan yang lainnya.Terimakasih...Wassalamualaikum Wr.Wb

Sumber :

https://www.codepolitan.com/tutorial/membangun-aplikasi-web-sederhana-angular-js-dan-rest-bagian-1

https://www.codepolitan.com/yuk-belajar-angular-js-bareng-learn-angular

http://www.dumetschool.com/blog/Apa-itu-Angular