生活随笔
收集整理的這篇文章主要介紹了
AngularJs 基础教程 —— 控制器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么80%的碼農都做不了架構師？>>> ??
本文為?H5EDU?機構官方?HTML5培訓?教程，主要介紹：AngularJs 基礎教程?—— 控制器
?
AngularJS 控制器AngularJS 控制器 控制 AngularJS 應用程序的數據。AngularJS 控制器是常規的 JavaScript 對象。
AngularJS 控制器
AngularJS 應用程序被控制器控制。
ng-controller 指令定義了應用程序控制器。
控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數 創建。
AngularJS 實例
<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.firstName = "John";$scope.lastName = "Doe";
});
</script>嘗試一下 ?
應用解析：
AngularJS 應用程序由 ng-app 定義。應用程序在 <div> 內運行。
ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用于定義一個控制器。
myCtrl 函數是一個 JavaScript 函數。
AngularJS 使用$scope 對象來調用控制器。
在 AngularJS 中， $scope 是一個應用象(屬于應用變量和函數)。
控制器的 $scope （相當于作用域、控制范圍）用來保存AngularJS Model(模型)的對象。
控制器在作用域中創建了兩個屬性 (firstName 和 lastName)。
ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。
控制器方法
上面的實例演示了一個帶有 lastName 和 firstName 這兩個屬性的控制器對象。
控制器也可以有方法（變量和函數）：
AngularJS 實例
<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>嘗試一下 ?
外部文件中的控制器
在大型的應用程序中，通常是把控制器存儲在外部文件中。
只需要把 <script> 標簽中的代碼復制到名為 personController.js 的外部文件中即可：
AngularJS 實例
<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>嘗試一下 ?
其他實例
以下實例創建一個新的控制器文件:
angular.module('myApp', []).controller('namesCtrl', function($scope) {$scope.names = [{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}];
});
保存文件為 namesController.js:
然后，在應用中使用控制器文件:
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>嘗試一下 ?
轉載于:https://my.oschina.net/yom/blog/749817
總結
以上是生活随笔為你收集整理的AngularJs 基础教程 —— 控制器的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
