Belajar Angular JS Dasar

Belajar AngularJS

Kenapa AngularJS Mudah dipelajari Cepat Sekalian belajar Ionic

Contoh: Busintime.id

Apa itu AngularJS ? • Framework Javascript dari google •
Menggunakan HTML sebagai template • Didesain untuk SPA (single page application) • Dibuat 2009 , dimaintain oleh Google

Model View Controller Model (Data) View (Penampilan) Controller (How)

Showcase !

Website-webiste yang make angularjs sumber : https://wappalyzer.com/applications/angularjs

Topik Hari ini • Module • Controller • Directive •
Service • Simulasi app (jika sempat)

Instalasi

Playground (Minimum) Bower Components: Menyimpan komponen- komponen bower (package css
/ javascript) CSS Menyimpan File CSS buatan sendiri Script Menyimpan file JS buatan sendiri Index.html This is our Playground !

Intro Include AngularJS ke dalam index.html

Intro Tambahkan ng-app di tag <html>

Modul Modul: Mengelompokan file javascript yang fungsinya dekat dalam kelompok-kelompok
yang sama. Sintaks Module:

Modul Nama Modul: Memberikan nama modul yang ingin dibuat. Dijadikan
acuan ketika menjadi dependensi untuk modul lain. Dependency Array (Dependency Injection) Menjelaskan kepada angular modul-modul apa saja yang dibutuhkan karena digunakan dalam modul yang ingin dibuat. (Dalam Array Javascript)

Lets Play ! Tambahkan modul yang namanya sama dengan nilai
pada ng-app, tanpa dependency(masih simpel)

Controller

Controller Controller Bagian yang “berpikir” dalam aplikasi. Sintaks Controller:

Controller Nama Controller Nama yang diacu pada directive (akan dijelaskan
nanti) Dependency Array Dependensi apa yang dibutuhkan dalam Controller. Elemen terakhir pasti fungsi. Note : Kadang gak wajib ada dependensi. Parameter fungsi Map berurutan sesuai dengan dependensi array. Namanya udah reserve, gak usah “kreatif” dulu. Note: Nanti bisa ditambahin (advance) Biasanya yang ada $ sign itu udah reserved sama angular  kenapa kalau make jquery bisa “rusak”

Lets Play! Tambahkan directive ng-controller di html yg sama dengan
nama controller pada javascript

Directive apaan tuh? Directive Atribut tambahan dalam HTML Fungsi memodifikasi
perilaku html Contoh directive ng-app, ng-controller, ng-model dst.. Note : Ada beberapa directive yang umum (nanti juga sambil jalan tau sendiri)

Lihat lagi #kode nya Directive “ng-app” & “ng-controller”

Capek nulis “angular” melulu ? Angular menggunakan “design pattern” sehingga
bisa di chain ! (Hilangkan titik koma di akhir module)

Data Binding

Data Binding (Template) Data binding Memetakan bagian di html dengan
bagian di controller. Menggunakan Template, berkaitan juga dengan Model Sintaks template :

Lets Play ! Buat nama variabel di dalam html yang
sama dengan namavariabel di controller javascript

(Akhirnya Hello World !)

Model Model Potongan data yang ditampilkan pada website. Bisa dianggap
sebagai variabel dalam pemrograman. Sintaks Model :

Lets Play ! Tambahkan directive ng-model

What Happens ? Coba “usil” ganti tulisan teks di dalam
input !

Lets Practice ! Tugas 01 : Membuat model Silahkan dicoba,
buat sendiri, tambahkan variabel sendiri. Buat beberapa variabel, buat beberapa input, perhatikan bagaimana data binding bekerja

Kayaknya tadi bilang scope, apaan tuh ? Scope Mengelompokan variabel.
Variabel yang scopenya sama, diakses dalam controller yang sama .

Lets Practice ! Tugas 02 : Membuat beberapa controller Silahkan
dicoba, buat sendiri, buat beberapa controller, dengan namavariabel yang sama, perhatikan, meskipun namavariabelnya sama, jika scopenya(controller) berbeda, nilainya juga akan berbeda.

Directive (lagi) Prinsip kerja AngularJS menambahkan directive, karena AngularJS memodifikasi
perilaku HTML biasa dengan directive. – (Kata Orang , Tanpa Tahun) Note: Kita bahkan bisa membuat directive sendiri (advance)

Directive (lagi) Ng-show dan ng-hide : Menampilkan & menyembunyikan elemen.
(Trik primitif)

Hasilnya ?

Tugas 03 Ganti directive ng-show dengan ng-hide. Lihat efeknya apa
?

Hasilnya

(Masih) Directive Directive paling sering dipake : ng-repeat (iterasi terhadap
array)

Whats happen ?

(Masih) Directive Iterasi terhadap array of object

What ? Raw string object javascript !

True Code

It Works !

Filter

Filter Filter: Pemrosesan akhir sebelum data ditampilkan.Filter bisa dikombinasikan Salah
satu contoh filter : “filter”  membatasi Ada lagi filter-filter yang lain

Filter Tambahkan | filter:<namavariabel> di dalam ng-repeat

What happen?

(Masih) Directive Ng-click : mentrigger fungsi jika elemen diklik

Fungsi Fungsi Bagian yang “berpikir” Terdiri dari : - Nama
fungsi - Parameter Fungsi (bisa tanpa komponen

(Masih) Ng-Click Tambahkan fungsi di dalam controller, panggil melalui ng-click

What happens

Tugas 04 Membuat kalkulator sederhana dengan fungsi, operator tambah, kali,
kurang dan bagi. 3 input text.

Jawaban

Jawaban (Bagian controller , Gak muat satu slide)

Provider Provider: Object tertentu yang tersedia selama aplikasi berjalan, dapat
digunakan untuk memanipulasi. Harus baca dokumentasi, ada banyak. Salah satu contohnya $index dalam ng-repeat

Review lagi contoh ng-repeat Tambahkan $index, di dalam blok ng-repeat

What Happens Masih banyak provider lain, dicari aja gak perlu
dihafal. Cukup dipake ketika butuh.

Masih directive Ng-options = ng-repeat untuk dropdown atau select box

Hasilnya

Single Page Application

Routing

Routing Routing • Membuat aplikasi seolah-olah punya beberapa halaman, padahal
hanya satu halaman. • Menggunakan state • Membutuhkan dependensi ng-route atau ui- router, modifikasi provider $routerProvider • Diatur dalam blok config

Config Config Melakukan konfigurasi aplikasi di awal berjalan. Hanya di
run sekali saat pertamakali. Menerima fungsi dengan parameter provider/injectables dalam array, berurutan.

Persiapan lagi Biar kebayang .. Install Angular-ui-router menggunakan Bower

Persiapan lagi Biar kebayang... Include file angular-ui-router ke index.html

Lakukan Dependency Injection ! Tambahkan dependensi “ui.router” pada blok module
dalam array dan blok configurasi yang menerima $state provider

Tentang $stateProvider & $urlPRovider $urlProvider punya fungsi otherwise sejenis redirect
jika url tidak ditemukan $stateProvider Punya fungsi state, menerima input - String nama state - Object parameter - url : yang terlihat di browser - Templateurl: file html yang diinclude ke dalam pages - Controller: Controller yang digunakan untuk state tersebut

Persiapan lagi Buat folder Views, buat file about.html dan home.html
didalamnya isi ala kadarnya saja dulu.

Persiapan lagi Buat controller lagi, biarkan kosong dahulu

(Akhirnya) Lakukan configurasi !

Terakhir ... Jangan lupa Ubah isi body, tambahkan directive ui-sref.
Isi nilainya dengan nama state yang diacu pada $stateProvider

Hasilnya .. Topik routing yang advance seperti parameter dll.. akan
dijelaskan kemudian (kalau ada waktu)

Service Service Komponen dalam angular yang dapat digunakan ulang (reusable
object). Biasanya digunakan untuk komunikasi antar controller. Note :Contoh penggunaan service akan dibahas selanjutnya

Integrasi seluruh konsep : Pembuatan Aplikasi Chat Real time menggunakan
AngularJS dan Firebase Langsung diketik aja ya, males dibuat lagi slidenya ...

Inkubatorit.com

Email: [email protected] Facebook: Facebook.com/fawwazmuhammad Medium: @Fawwaz_muhammad Web: http://Fawwaz Muhammad.com

Resource • Sonnylab.com  Blog temen • Bootsnipp.com • Egghead.io
• Thinkster.io  advanced

Belajar Angular JS Dasar

Belajar Angular JS Dasar

Other Decks in Technology

Featured

Transcript