Ringkasan AngularJS
- Hal Sebelumnya Panduan AngularJS
- Hal Berikutnya Ekspresi AngularJS
AngularJS adalah Kerangka kerja JavaScript. Ini dapat ditambahkan ke halaman HTML dengan tag <script>.
AngularJS melaluiinstruksiMemperluas atribut HTML dan menggunakanEkspresiMembind data ke HTML.
AngularJS adalah kerangka kerja JavaScript
AngularJS adalah kerangka kerja JavaScript yang ditulis dalam JavaScript.
AngularJS didistribusikan dalam bentuk berkas JavaScript dan dapat ditambahkan ke halaman web dengan tag <script>:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS memperluas HTML
AngularJS digunakan ng-instruksiMemperluas HTML.
ng-app Instruksi mendefinisikan aplikasi AngularJS.
ng-model Instruksi akan memikat nilai kontrol HTML (input, select, textarea) ke data aplikasi.
ng-bind Instruksi akan memikat data aplikasi ke tampilan HTML.
Contoh AngularJS
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Nama: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
Contoh penjelasan:
Ketika halaman web diunggah selesai, AngularJS akan otomatis dijalankan.
ng-app Instruksi memberitahu AngularJS bahwa elemen <div> adalah AngularJS Aplikasidari 'pemilik'.
ng-model Instruksi akan memikat nilai field input ke variabel aplikasi name。
ng-bind Perintah mengikat konten elemen <p> ke variabel aplikasi. name。
Instruksi AngularJS
Seperti yang Anda lihat, perintah AngularJS adalah dengan ng properti HTML dengan prefiks.
ng-init Perintah menginisialisasi variabel aplikasi AngularJS.
Contoh AngularJS
<div ng-app="" ng-init="firstName='Bill'"> <p>Nama adalah <span ng-bind="firstName"></span></p> </div>
atau gunakan HTML yang berlaku:
Contoh AngularJS
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>Nama adalah <span data-ng-bind="firstName"></span></p> </div>
Jika Anda ingin HTML halaman ini berfungsi, Anda dapat menggunakan data-ng- dalam tempat ng-。
Anda akan mengetahui lebih banyak tentang perintah di bagian belakang tutorial ini.
Ekspresi AngularJS
Ekspresi AngularJS ditulis di dalam tanda kurung besar duabelas:{{ ekspresi }}。
AngularJS akan "menyampaikan" data di tempat ekspresi:
Contoh AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Ekspresi pertama saya: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Ekspresi AngularJS mengikat data AngularJS ke HTML, seperti ng-bind Cara penggunaan perintah sama.
Contoh AngularJS
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Nama: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Anda akan mengetahui lebih banyak tentang ekspresi di bagian belakang tutorial ini.
Aplikasi AngularJS
AngularJS ModulMendefinisikan aplikasi AngularJS.
AngularJS KontrolerMengawasi aplikasi AngularJS.
ng-app Perintah mendefinisikan aplikasi,ng-controller Definisi perintah mengatur kontroler.
Contoh AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
Nama: <input type="text" ng-model="firstName"><br>
Nama Belakang：<input type="text" ng-model="lastName"><br>
<br>
Nama Lengkap：{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
Modul AngularJS mendefinisikan aplikasi:
Modul AngularJS
var app = angular.module('myApp', []);
Kontrol AngularJS mengontrol aplikasi:
Kontrol AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
Anda akan mendapatkan informasi lebih lanjut tentang modul dan kontroler di belakang panduan ini.
- Hal Sebelumnya Panduan AngularJS
- Hal Berikutnya Ekspresi AngularJS
