快捷導(dǎo)航

AngularJS基礎(chǔ)學(xué)習(xí)筆記之控制器

更新時(shí)間：2015年05月10日 10:04:19 投稿：hebedich

在AngularJS中，控制器是一個(gè)Javascript函數(shù)（類型/類），用來增強(qiáng)除了根作用域意外的作用域?qū)嵗?。?dāng)你或者AngularJS本身通過<code>scope.$new</code>倆創(chuàng)建一個(gè)新的子作用域?qū)ο髸r(shí)，有一個(gè)選項(xiàng)能讓你將它當(dāng)做參數(shù)傳遞給控制器。

AngularJS控制器用來控制AngularJS applications的數(shù)據(jù)。

　　AngularJS控制器就是普通的JavaScript對(duì)象。

AngularJS控制器
　　AngularJS applications通過控制器進(jìn)行控制。

　　ng-controller指令定義了一個(gè)application的控制器。

　　一個(gè)控制器就是一個(gè)JavaScript對(duì)象，它可以通過標(biāo)準(zhǔn)的JavaScript對(duì)象構(gòu)造函數(shù)來創(chuàng)建。

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

代碼解釋：

　　AngularJS application通過ng-app="myApp"來定義。該application的有效作用域處于ng-app所在的<div>中。

　　ng-controller="myCtrl"屬性即一個(gè)AngularJS指令，它定義了一個(gè)控制器。

　　myCtrl函數(shù)是一個(gè)普通的JavaScript函數(shù)。

　　AngularJS使用$scope對(duì)象來調(diào)用控制器。

　　在AngularJS中，$scope是一個(gè)application對(duì)象（即application變量和函數(shù)的所有者）。

　　控制器包含兩個(gè)屬性（或者叫變量）：firstName和lastName。它們被附加到$scope對(duì)象上。

　　ng-model指令將input標(biāo)簽的值綁定到控制器的屬性上（firstName和lastName）。

控制器的方法
　　上面的例子展示了控制器對(duì)象包含兩個(gè)屬性：lastName和firstName。

　　控制器也可以包含方法（將函數(shù)賦值給變量）：

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

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{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>

將控制器放在外部文件中
　　在大型應(yīng)用中，常常會(huì)將控制器代碼寫在外部文件中。

　　將<script>標(biāo)簽中的代碼拷貝到personController.js外部文件中：

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

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 src="personController.js"></script>

另一個(gè)例子
　　創(chuàng)建一個(gè)新的控制器文件并命名為namesController.js：

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

　　然后再application中使用這個(gè)控制器文件：

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

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: