AngularJS adalah kerangka JavaScript. Hal ini dapat ditambahkan ke halaman HTML dengan tag <script>.
AngularJS meluas atribut HTML dengan Directive, dan mengikat data ke HTML dengan Expressions.
AngularJS adalah Kerangka JavaScript
AngularJS adalah kerangka JavaScript. Ini adalah perpustakaan yang ditulis dalam JavaScript.
AngularJS didistribusikan sebagai file JavaScript, dan dapat ditambahkan ke halaman web dengan tag script:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJS Memperpanjang HTML
AngularJS meluas HTML dengan ng-arahan.
The ng-aplikasi direktif mendefinisikan sebuah aplikasi AngularJS.
The ng model direktif mengikat nilai kontrol HTML (input, pilih, textarea) untuk data aplikasi.
The ng-mengikat direktif mengikat data aplikasi ke tampilan HTML.
AngularJS Contoh
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Cobalah sendiri " Contoh menjelaskan:
AngularJS dimulai secara otomatis ketika halaman web telah dimuat.
The ng-aplikasi direktif memberitahu AngularJS bahwa elemen <div> adalah "pemilik" dari aplikasi AngularJS.
The ng model direktif mengikat nilai field input ke aplikasi nama variabel.
The ng-mengikat direktif mengikat innerHTML dari <p> elemen untuk aplikasi nama variabel.
AngularJS Directive
Seperti yang Anda telah melihat, AngularJS arahan yang atribut HTML dengan awalan ng.
The ng-init direktif inisialisasi variabel aplikasi AngularJS.
AngularJS Contoh
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Cobalah sendiri " Atau dengan HTML yang valid:
AngularJS Contoh
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Cobalah sendiri "  | Anda dapat menggunakan data-ng-, bukan ng-, jika Anda ingin membuat halaman HTML Anda valid. |
|---|
Anda akan belajar lebih banyak tentang arahan kemudian dalam tutorial ini.
AngularJS Expressions
AngularJS ekspresi ditulis dalam tanda kurung ganda: {{ekspresi}}.
AngularJS akan "output" Data persis di mana ekspresi tertulis:
AngularJS Contoh
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Cobalah sendiri " AngularJS ekspresi mengikat data yang AngularJS ke HTML dengan cara yang sama seperti direktif ng-mengikat.
AngularJS Contoh
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Cobalah sendiri " Anda akan belajar lebih banyak tentang ekspresi nanti dalam tutorial ini.
AngularJS Aplikasi
AngularJS modul menentukan aplikasi AngularJS.
AngularJS controller mengendalikan aplikasi AngularJS.
The ng-aplikasi direktif mendefinisikan aplikasi, ng-controller direktif mendefinisikan controller.
AngularJS Contoh
<div ng-app=" myApp " ng-controller=" myCtrl ">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module(' myApp ', []);
app.controller(' myCtrl ',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Cobalah sendiri " AngularJS modul menentukan aplikasi:
AngularJS Modul
var app = angular.module('myApp', []);
AngularJS aplikasi pengendali kontrol:
AngularJS Pengontrol
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Anda akan belajar lebih banyak tentang modul dan pengendali nanti dalam tutorial ini.