Modul AngularJS
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.
Modul AngularJS
Modul AngularJS mendefinisikan sebuah aplikasi.
Modul adalah wadah untuk berbagai bagian aplikasi.
Modul adalah wadah untuk pengontrol aplikasi.
Controller selalu termasuk dalam modul.
Membuat Modul
Modul dibuat dengan menggunakan angular.module angularJS
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Parameter "myApp" mengacu pada elemen HTML tempat aplikasi dijalankan.
Sekarang Anda dapat menambahkan kontroler, arahan, filter, dan banyak lagi, ke aplikasi AngularJS Anda.
Menambahkan Controller
Tambahkan controller ke aplikasi Anda, dan lihat controller dengan perintah ng-controller:
Contoh
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Anda akan belajar lebih banyak tentang pengendali nanti dalam tutorial ini.
Menambahkan Petunjuk
AngularJS memiliki seperangkat arahan terintegrasi yang dapat Anda gunakan untuk menambahkan fungsionalitas ke aplikasi Anda.
Untuk referensi lengkap, kunjungi referensi direktif AngularJS kami.
Selain itu Anda dapat menggunakan modul ini untuk menambahkan arahan Anda sendiri ke aplikasi Anda:
Contoh
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Anda akan belajar lebih banyak tentang arahan nanti di tutorial ini.
Modul dan Controller dalam FileSudah umum dalam aplikasi AngularJS untuk meletakkan modul dan kontroler dalam file JavaScript.
Dalam contoh ini, "myApp.js" berisi definisi modul aplikasi, sementara "myCtrl.js" berisi pengontrolnya:
Contoh
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
The [] parameter in the module definition can be used to define dependent modules.
Without the [] parameter, you are not creating a new module, but retrieving an existing one.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Fungsi bisa mencemari Global Namespace
Fungsi global harus dihindari dalam JavaScript. Mereka dapat dengan mudah ditimpa atau dihancurkan oleh skrip lainnya.
Modul AngularJS mengurangi masalah ini, dengan menyimpan semua fungsi ke modul lokal.
Kapan Muatkan Perpustakaan?
Meskipun umum dalam aplikasi HTML untuk menempatkan skrip di akhir elemen <body>, disarankan agar Anda memuat perpustakaan AngularJS baik di <head> atau di awal <body>.
Ini karena panggilan ke angular.module hanya bisa dikompilasi setelah perpustakaan dimuat.
Contoh
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
Contoh :
Maka outputnya :
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