Domain AngularJS

Scope (scope) adalah bagian yang diikat antara HTML (tampilan) dan JavaScript (kontroler).

Scope adalah objek yang memiliki properti dan metode yang dapat digunakan.

Scope tersedia untuk baik tampilan maupun kontroler.

Bagaimana cara menggunakan scope?

Ketika Anda membuat kontroler di AngularJS, Anda akan $scope Objek disampaikan sebagai parameter:

Contoh

Properti yang dibuat di kontroler dapat di referensikan di tampilan:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
</script>

Coba Sendiri

Ketika di kontroler $scope Menambah properti objek, tampilan (HTML) dapat mengakses properti ini.

Dalam tampilan, Anda tidak menggunakan $scope Awalan, Anda hanya perlu merujuk nama properti, seperti {{carname}}.

Memahami domain

Jika kita melihat aplikasi AngularJS seperti terdiri dari beberapa bagian berikut:

  • Tampilan, yaitu HTML.
  • Model, yaitu data yang tersedia untuk tampilan saat ini.
  • Kontroler, yaitu fungsi JavaScript, untuk membuat/ubah/hapus/kendalikan data.

Maka domain adalah model.

Domain adalah objek JavaScript yang memiliki properti dan metode, properti dan metode ini tersedia untuk tampilan dan kontroler.

Contoh

Jika ada perubahan di tampilan, model dan kontroler akan diupdate:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>Nama saya adalah {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Coba Sendiri

Memahami domain Anda

Memahami domain yang Anda tangani pada setiap saat penting.

Dalam dua contoh di atas, hanya ada satu domain, jadi memahami domain yang Anda tangani bukan masalah, tetapi untuk aplikasi yang besar, beberapa bagian DOM HTML hanya dapat diakses oleh beberapa domain.

Contoh

Saat menghandle instruksi ng-repeat, setiap pengulangan dapat mengakses objek yang diulang saat ini:

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

Coba Sendiri

Setiap <li> Elemen dapat mengakses objek yang diulang saat ini, dalam contoh ini adalah string, melalui x untuk di referensi.

domain root

Setiap aplikasi memiliki $rootScopeyang berada di dalam ng-app Domain yang dibuat di atas elemen HTML untuk instruksi.

rootScope dapat diakses seluruhnya di dalam aplikasi.

Jika variabel ada di domain saat ini dan di domain root (rootScope) dengan nama yang sama, aplikasi akan menggunakan variabel di domain saat ini.

Contoh

Dalam domain fungsi dan rootScope ada variabel yang bernama "color":

<body ng-app="myApp">
<p>Warna kegemaran rootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <pWarna yang disukai dalam domain kontrol:</p>
  <h1>{{color}}</h1>
</div>
<pWarna paling disukai rootScope masih:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
  $scope.color = "red";
});
</script>
</body>

Coba Sendiri