AngularJS Lingkup
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 Lingkup
Ruang lingkup adalah bagian mengikat antara HTML (tampilan) dan JavaScript (controller).
Ruang lingkup adalah obyek dengan properti dan metode yang tersedia.
Ruang lingkup ini tersedia untuk kedua pandangan dan controller.
Cara Menggunakan Lingkup?
Ketika Anda membuat controller di AngularJS, Anda melewati $scopeobjek sebagai argumen:
Contoh
Properti dibuat dalam controller, dapat disebut dalam 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>
Ketika menambahkan properti ke $scope objek dalam controller, tampilan (HTML) mendapat akses ke properti ini.
Dalam pandangan ini, Anda tidak menggunakan awalan $scope, Anda hanya merujuk PROPERTYNAME sebuah, seperti {{carname}}.
Memahami Lingkup
Jika kita mempertimbangkan aplikasi AngularJS terdiri dari:
Lihat, yang merupakan HTML.
Model, yang merupakan data yang tersedia untuk tampilan saat ini.
Controller, yang merupakan fungsi JavaScript yang membuat / perubahan / menghapus / mengontrol data.
Maka lingkup adalah Model.
Ruang lingkup adalah objek JavaScript dengan sifat dan metode, yang tersedia untuk kedua pandangan dan controller.
Contoh
Jika Anda membuat perubahan dalam tampilan, model dan controller akan diperbarui:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
Tahu Lingkup Anda
Hal ini penting untuk mengetahui ruang lingkup Anda berurusan dengan, setiap saat.
Dalam dua contoh di atas hanya ada satu ruang lingkup, sehingga mengetahui ruang lingkup Anda tidak menjadi masalah, tetapi untuk aplikasi yang lebih besar bisa ada bagian dalam DOM HTML yang hanya dapat mengakses lingkup tertentu.
Contoh
Ketika berhadapan dengan ng-repeatdirektif, setiap pengulangan memiliki akses ke objek pengulangan 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>
Setiap <li>elemen memiliki akses ke objek pengulangan saat ini, dalam hal ini string, yang disebut dengan menggunakan x.
akar Lingkup
Semua aplikasi memiliki $rootScopeyang merupakan ruang lingkup dibuat pada elemen HTML yang berisi ng-appdirektif.
rootScope ini tersedia di seluruh aplikasi.
Jika variabel memiliki nama yang sama di kedua lingkup saat ini dan di rootScope, aplikasi menggunakan salah satu di lingkup saat ini.
Contoh
Sebuah variabel bernama "warna" ada di lingkup kedua controller dan di rootScope yang:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</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>
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
Komentar
Posting Komentar