AngularJS Expressions
pengenalan angular, dan penerapan angular.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.
Agar kita tau apa itu angular, cara cara penerapan nya.
IV.Penjelasan.
AngularJS Expressions
AngularJS mengikat data ke HTML menggunakan Expressions.
AngularJS Expressions
Ekspresi AngularJS dapat dituliskan di dalam kawat gigi ganda: {{expression}}.
Ekspresi AngularJS juga bisa dituliskan di dalam sebuah perintah: ng-bind = "expression".
AngularJS akan menyelesaikan ungkapan, dan mengembalikan hasilnya persis di mana ungkapan ditulis.
Ekspresi AngularJS sangat mirip dengan ekspresi JavaScript: Mereka dapat berisi literal, operator, dan variabel.
Contoh {{5 + 5}} atau {{firstName + "" + lastName}}
Contoh
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Jika Anda menghapus petunjuk ng-app, HTML akan menampilkan ekspresi seperti apa adanya, tanpa menyelesaikannya:
Contoh
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
Angka AngularJS
Nomor angular seperti nomor JavaScript:
Contoh
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Angka AngularJS
Nomor angular seperti nomor JavaScript:
Contoh
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
Menggunakan ng-init tidak terlalu umum. Anda akan belajar cara yang lebih baik untuk menginisialisasi data di bab tentang pengendali.
String AngularJS
String AngularJS seperti senar JavaScript:
Contoh
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Contoh yang sama menggunakan ng-bind:
Contoh
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Objek AngularJS
Objek sudut seperti objek JavaScript:
Contoh
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Contoh yang sama menggunakan ng-bind:
Contoh
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Array AngularJS
Array AngularJS seperti array JavaScript:
Contoh
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Contoh yang sama menggunakan ng-bind:
Contoh
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Contoh :
Maka outputnya :
V.Kesimpulan.
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.
VI.Refrensi.
http://mengenalangularjs.blogspot.co.id/
Komentar
Posting Komentar