Belajar Dasar-dasar AngularJS untuk pemula [PART-1]
AngularJS adalah framework Javascript yang dikembangkan oleh Google. Menurut saya belajar AngularJS itu susah. Itu artinya kalau kamu berhasil menguasainya, berarti kamu jago. Dan disini saya tidak akan membuatnya menjadi lebih mudah. Dan sebaiknya, kamu sudah memahami konsep MVC sebelum melanjutkan.
Langsung saja!
Include file angular.js di file HTML kamu
download file nya di angularjs.org lalu agar bisa digunakan cantumkan di file HTML pada tag <body> path tempat kamu menyimpan file angular.js yang sudah kamu download. misal : <html lang="en">
<head>
<title>Jagoan Angular</title>
</head>
<body>
<script src="vendor/angular/angular.js"></script>
</body>
</html>
atau agar lebih mudah dalam proses belajar kamu bisa menggunakan CDN dengan mengisi srcript source nya sebagai berikut :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
dengan catatan kamu harus dalam keadaan terkoneksi ke internet.
Selalu cantumkan ng-app di tag yang akan menggunakan angularjs
Masukkanng-app di tag <html> <html lang="en" ng-app>
<head>
<title>Jagoan Angular</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
Kamu juga bisa menempatkan
ng-app di tag <body> atau <div>. 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.Ingat, jika
ng-app telah dicantumkan di tag tertentu, kamu tidak boleh mencantumkannya lagi di tag yang dicakup oleh tag tersebut. Misal saat kamu telah mencantumkannya di tag <html> kamu tidak perlu mencantumkannya lagi di tag <body> atau <div>ng-bind dan ng-model
ng-bind digunakan untuk menampilkan text dari suatu expression tertentu pada komponen HTML dan juga langsung mengupdate text-nya saat isi expression tersebut berubah.ng-model juga digunakan untuk data binding mirip dengan ng-bind, hanya saja ng-model mengikat bagian model-nya. untuk lebih mudahnya perhatikan contoh code HTML berikut
<div ng-app>
Masukkan kata: <input ng-model="kata" type="text" /><br />
Kata yang kamu masukkan adalah : <ng-bind="kata"></a>
</div>
Berikut adalah hasil dari code di atas
Kata yang ditampilkan akan selalu berubah seiring dengan kata yang kamu ketikkan di text box.
Kamu bisa menggunakan
{{ }} untuk mendapatkan hasil yang sama dengan ng-bind. <div ng-app>
Masukkan kata: <input ng-model="kata" type="text" /><br />
Kata yang kamu masukkan adalah : {{ kata }}
</div>
ng-bind juga bisa digunakan sebagai pengolah operator matematika, misal saat kamu memasukkan <a ng-bind="5 + 5"></a> atau {{5 + 5}} maka pada saat di-compile, akan menampilkan nilai 10.ng-init
ng-init digunakan untuk menginisiasi nilai dari sebuah expression langsung di HTML nya, contoh : <div ng-app ng-init="panjang=2; lebar=6">
Luas = {{ panjang * lebar }}
</div>
Kode diatas akan menghasilkan Luas = 12
data binding expression dengan object
Misal kamu menginisiasi sebuah object "seseorang" yang memiliki atribut "nama" dan "umur". <div ng-app ng-init="seseorang={nama:'Bogel',umur:'12'}">
Seseorang bernama {{ seseorang.nama }} berumur {{seseorang.umur}}
</div>
Kode di atas akan menghasilkan :
data binding expression dengan array
Misal kamu menginisiasi array dengan nama "titik" yang berisi angka ganjil dari 1 sampai 10 <div ng-app ng-init="titik=[1,3,5,7,9]">
<p>Isi array elemen ketiga adalah {{ titik[2] }}</p>
</div>
Kode di atas akan menghasilkan :
*elemen array dimlai dari angka 0
Posting Komentar
5 Komentar
Udah ada tutorial baru lagi :D , thanks gan angular js emang lagi musim dan banyak di pake ...
BalasHapuskalo mas masih bingung dengan pembahasan diatas ga ada salahnya mampir di artikel saya yang membahas belajar angularjs juga kali aja makin paham :)
HapusTerima kasih gan tutorialnya
BalasHapusKeren, thanks bro
BalasHapusCasino - Bracket betting guide for your chance to win
BalasHapusThe Casino is a unique casino that has been https://septcasino.com/review/merit-casino/ around https://jancasino.com/review/merit-casino/ for over a decade. It has managed to communitykhabar offer great games such as Blackjack, Roulette and bsjeon.net Video 토토사이트 Poker,