Pengawal AngularJS

Pengawal AngularJS Data kawalan aplikasi AngularJS.

Pengawal AngularJS ialah objek JavaScript biasa.

Pengawal AngularJS

Aplikasi AngularJS dikawal oleh pengawal. Arahan

ng-controller mentakrifkan pengawal aplikasi.

Pengawal ialah objek JavaScript, dicipta oleh JavaScript standard pembina objek.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Penghuraian aplikasi:

Aplikasi AngularJS ditakrifkan oleh ng-app. Aplikasi berjalan dalam <div>. Atribut

ng-controller="myCtrl" ialah arahan AngularJS. Digunakan untuk menentukan pengawal. Fungsi

myCtrl ialah fungsi JavaScript.

AngularJS menggunakan objek $scope untuk memanggil pengawal.

Dalam AngularJS, $scope ialah objek aplikasi (kepunyaan pembolehubah dan fungsi aplikasi).

Controller's $scope (bersamaan dengan skop, skop kawalan) digunakan untuk menyimpan objek Model AngularJS.

Pengawal mencipta dua sifat dalam skop (Nama depan dan Nama Akhir). Arahan

ng-model mengikat medan input kepada sifat pengawal (firstName dan lastName).

Kaedah pengawal

Contoh di atas menunjukkan objek pengawal dengan dua sifat: lastName dan firstName.

Pengawal juga boleh mempunyai kaedah (pembolehubah dan fungsi):

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

</body>
</html>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Pengawal dalam fail luaran

Dalam aplikasi besar, adalah perkara biasa untuk menyimpan pengawal dalam fail luaran.

Hanya salin kod dalam teg <skrip> ke dalam fail luaran yang dipanggil personController.js:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Contoh lain

Contoh berikut mencipta fail pengawal baharu:

angular.module('myApp', []).controller('namesCtrl' , fungsi($skop) {
$skop.nama = [
{nama:'Jani',negara:'Norway'},
{nama:'Hege',negara:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});

Simpan fail sebagai namesController.js:

Kemudian , Gunakan fail pengawal dalam aplikasi:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

Run Instance»

Klik "Run Butang contoh" " untuk melihat contoh dalam talian

Pengawal AngularJS