Pengantar AngularJS
AngularJS adalah kerangka kerja JavaScript . Itu dapat ditambahkan ke halaman HTML dengan tag <script>.
AngularJS memperluas atribut HTML dengan Directives , dan mengikat data ke HTML dengan Expressions .
AngularJS adalah Kerangka JavaScript
AngularJS adalah kerangka kerja JavaScript yang ditulis dalam JavaScript.
AngularJS didistribusikan sebagai file JavaScript, dan dapat ditambahkan ke halaman web dengan tag skrip:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS Memperluas HTML
AngularJS memperluas HTML dengan ng-directives .
Arahan ng-app mendefinisikan aplikasi AngularJS.
Direktif ng-model mengikat nilai kontrol HTML (input, pilih, textarea) ke data aplikasi.
Arahan ng-bind mengikat data aplikasi ke tampilan HTML.
Contoh AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Contoh menjelaskan:
AngularJS dimulai secara otomatis ketika halaman web telah dimuat.
Arahan ng-app memberi tahu AngularJS bahwa elemen <div> adalah "pemilik" aplikasi AngularJS .
Direktif ng-model mengikat nilai bidang input ke nama variabel aplikasi .
Direktif ng-bind mengikat konten elemen <p> ke nama variabel aplikasi .
Arahan AngularJS
Seperti yang telah Anda lihat, direktif AngularJS adalah atribut HTML dengan awalan ng .
Direktif ng-init menginisialisasi variabel aplikasi AngularJS.
Contoh AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Atau dengan HTML yang valid:
Contoh AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Anda dapat menggunakan data-ng- , sebagai ganti ng- , jika Anda ingin membuat HTML halaman Anda valid.
Anda akan belajar lebih banyak tentang arahan nanti dalam tutorial ini.
Ekspresi AngularJS
Ekspresi AngularJS ditulis di dalam kurung kurawal ganda: {{ ekspresi }} .
AngularJS akan "menghasilkan" data persis di mana ekspresi ditulis:
Contoh AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Ekspresi AngularJS mengikat data AngularJS ke HTML dengan cara yang sama seperti direktif ng-bind .
Contoh AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Anda akan belajar lebih banyak tentang ekspresi nanti dalam tutorial ini.
Aplikasi AngularJS
Modul AngularJS mendefinisikan aplikasi AngularJS.
Pengontrol AngularJS mengontrol aplikasi AngularJS.
Arahan ng-app mendefinisikan aplikasi, arahan ng-controller mendefinisikan controller.
Contoh AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Modul AngularJS mendefinisikan aplikasi:
Modul AngularJS
var app = angular.module('myApp', []);
Kontroler AngularJS mengontrol aplikasi:
Pengontrol AngularJS
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Anda akan mempelajari lebih lanjut tentang modul dan pengontrol nanti dalam tutorial ini.