AngularJS Data Binding

I.Latar Belakang.
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 Data Binding

Data yang mengikat di AngularJS adalah sinkronisasi antara model dan tampilan.
Model data

AngularJS aplikasi biasanya memiliki model data. Model data adalah kumpulan data yang tersedia untuk aplikasi.
Contoh

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});

HTML View
Wadah HTML mana aplikasi AngularJS ditampilkan, disebut pandangan.

Pandangan memiliki akses ke model, dan ada beberapa cara menampilkan data model dalam pandangan.

Anda dapat menggunakan ng-binddirektif, yang akan mengikat innerHTML dari elemen ke properti model yang ditentukan:
Contoh

<p ng-bind="firstname"></p>

Anda juga dapat menggunakan tanda kurung ganda untuk menampilkan konten dari model:{{ }}
Contoh

<p>First name: {{firstname}}</p>
Atau Anda dapat menggunakan ng-modeldirektif pada HTML kontrol untuk mengikat model untuk tampilan.

ng-modelDirective
Gunakan ng-modeldirektif untuk mengikat data dari model ke tampilan pada kontrol HTML (input, pilih, textarea)
Contoh

<input ng-model="firstname">

ng-modeldirektif menyediakan dua arah mengikat antara model dan tampilan.

Dua arah Binding
Data yang mengikat di AngularJS adalah sinkronisasi antara model dan tampilan.

Ketika data dalam model yang berubah, pandangan mencerminkan perubahan, dan ketika data dalam pandangan perubahan, yang Model diperbarui juga. Hal ini terjadi segera dan secara otomatis, yang memastikan bahwa model dan tampilan diperbarui setiap saat.
Contoh

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";
});
</script>

AngularJS Pengontrol
Aplikasi di AngularJS dikendalikan oleh pengendali. Baca tentang controller di AngularJS Controller bab.

Karena sinkronisasi langsung dari model dan pandangan, controller dapat benar-benar terpisah dari pandangan, dan hanya berkonsentrasi pada model data. Berkat data yang mengikat di AngularJS, pandangan akan mencerminkan perubahan yang dibuat di controller.
Contoh

<div ng-app="myApp" ng-controller="myCtrl">
    <h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.changeName = function() {
        $scope.firstname = "Nelly";
    }
});
</script>
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.
  https://www.w3schools.com/angular/angular_expressions.asp