Catatan Belajar AngularJS berbahasa Indonesia


Saya coba mencatatat pengalaman saya belajar AngularJS

Apakah AngularJS itu ?

AngularJS adalah Framework Javascript yang struktural untuk membuat applikasi web yang dinamis, dengan AngularJS maka kita dapat menggunakan HTML sebagai bahasa / notasi untuk membuat template dan kita juga dapat melakukan extend terhadap HTML syntax untuk membuat komponen aplikasi yang jelas dan ringkas, data Binding dan dependecy injection pada AngularJs membuat kode javascript yang perlu kita tulis jadi menjadi sangat sedikit, AngularJS bekerja di Browser dengan baik sehingga AngularJS adalah partner yang ideal bagi teknologi server (Misal servernya Rest APIs pake PHP, client app nya pake AngularJS di Browser).

dengan AngularJS kita menambah kemampuan browser dengan menambah berbagai AngularJS directive seperti :

  • Data binding, as in {{}}.
    • pada angular data binding adalah melakukan sinkronisasi data secara otomatis antara model dan view komponen, jadi bila data di model berubah karena ada tambahan atau ada yang di hapus maka view akan otomatis menyesuakan sendiri (nah itu lah sinkronisasi yang otomatis tadi).contohnya lihat contoh di bawah ini, kalo Input kita ketik berubah viewnya ikut berubah
      Contoh : http://pastebin.com/EtpnxrqJ  dan http://pastebin.com/FKZYk77P (ada inisiasi data)
  • DOM control structures for repeating, showing and hiding DOM fragments.
    • bisa bikin list dari data yang ada, menyembunyikan dan menampilkan bagian tertentu atau semuanya, intinya buat memanipulasi HTML yang pada akhirnya adalah memanipulasi tampilan di browser yang dilihat oleh end user.
  • Support for forms and form validation.
    • untuk mengolah form, hal-hal seputar form seperti validasi di handle juga oleh angularJS
  • Attaching new behavior to DOM elements, such as DOM event handling.
    • Menambah prilaku yang dapat di lakukan oleh si tampilan, misal event handling dan kemampuan lainnya yang dapat dibuat secara custom.
  • Grouping of HTML into reusable components.
    • jadi html yang sering dipake sana sini bisa di re-use tanpa harus di tulis ulang.

https://docs.angularjs.org/guide/introduction

1

Angular directives

– Angular built-in directives

apasih directive di angularJs itu ?

jadi begini ya, directive pada AngularJS itu adalah tanda-tanda pengenal seperti atribute, nama element, comment, element class yang ngasih tau angularJs kemana perilaku (behavior) itu akan di tambahkan.

Nah angular sendiri punya built-in directive  seperti ngBind, ngModel, and ngClass.  seperti ketika bikin controller atau service, kita bisa membuat directive kita sendiri.

contohnya yang built in:

  1. The ng-app directive defines an AngularJS application.
  2. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  3. The ng-bind directive binds application data to the HTML view.
– Creating own directives

nah sekarang kita bisa membuat directive yang custom sendiri, lihat disini untuk contoh nya:

http://pastebin.com/fxPDYdhC

2 Data Handling
– angular filter (currency, date, json, orderBy, etc)
– Form validation
3 Angular service
– communicating with backend
– interceptor
4 Scope
– two-way data binding
– rootScope
– broadcasting the scope
5 Angular module
6 jasmine testing
7 Angular code convention
8 Lazy loading
9 Authentication & Authorization
10 Routing
11 Multiple view
12 Popular Angular Library
– Ng-table
– Angular UI
– ng-file-upload
– angular-translate
– restangular
– angular-loading-bar
– ng-sortable
– angular-ui-tree
– ngStorage

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s