Controller ng AngularJS

Controller ng AngularJS控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

Controller ng AngularJS

AngularJS 应用程序由控制器控制。

ng-controller 指令定义应用程序控制器。

控制器是由标准的 JavaScript 对象构造器创建的 JavaScript 对象。

Instance ng AngularJS

<div ng-app="myApp" ng-controller="myCtrl">  
Sila: <input type="text" ng-model="firstName"><br>  
Pangalan: <input type="text" ng-model="lastName"><br>  
<br>  
全名: {{firstName + " " + lastName}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
});  
</script>

Subukan Muna Ngayon

应用程序说明：

AngularJS 应用程序由 ng-app="myApp" 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" Ang attribute ay isang instruction ng AngularJS. Ito ay nagtutukoy ng isang controller.

myCtrl Ang function ay isang JavaScript function.

Ang AngularJS ay gagamitin ang $scope na tinatawag na

Sa AngularJS, ang $scope ay ang object ng application (may-ari ng mga variable at function ng application).

Ang controller ay nasa scope (firstName at lastName）at gumawa ng dalawang attribute (variable).

ng-model Ang instruction ay nagbubind ng input field sa attribute ng controller (firstName at lastName).

Mga method ng controller

Ang halimbawa sa itaas ay nagpakita ng isang controller object na may dalawang attribute: lastName at firstName.

Ang controller ay maaaring may mga paraan (bilang variable ng function):

Instance ng AngularJS

<div ng-app="myApp" ng-controller="personCtrl">  
Sila: <input type="text" ng-model="firstName"><br>  
Pangalan: <input type="text" ng-model="lastName"><br>  
<br>  
Buong pangalan: {{fullName()}}  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('personCtrl', function($scope) {  
  $scope.firstName = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  };  
});  
</script>

Subukan Muna Ngayon

Controller sa labas ng file

Sa malaking application, ang pag-iimbak ng controller sa labas ng file ay pangkaraniwan.

Kailangan lamang kopyahin ang code sa loob ng <script> tag at ilagay sa isang file na tinatawag na personController.js sa labas ng file:

Instance ng AngularJS

<div ng-app="myApp" ng-controller="personCtrl">  
Sila: <input type="text" ng-model="firstName"><br>  
Pangalan: <input type="text" ng-model="lastName"><br>  
<br>  
Buong pangalan: {{fullName()}}  
</div>  
<script src="personController.js"></script>

Subukan Muna Ngayon

Isang ibang halimbawa

Para sa susunod na halimbawa, gagawa kami ng bagong controller file:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

I-save ang file bilang namesController.js:

Pagkatapos ay gamitin ang file ng controller sa aplikasyon:

Instance ng AngularJS

<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>

Subukan Muna Ngayon